Search Form
- Default : 3열 / 팝업 : 2열
- Label 글자수 : 1~9자, 좌측정렬 합니다.
- 입력값이 긴경우 예외적으로 2 cell, 3 cell을 병합하여 사용합니다.
- resizing 시 Label 영역은 고정되며, 입력 영역이 가변됩니다.
Default Search Form
Label
Label
Label
<div class="formSearch">
<div class="formSearch__content">
<div class="formSearch__item">
<div class="formSearch__title"><div class="is-requirement">Label</div></div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input">
</div>
</div>
</div>
<div class="formSearch__item">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input">
</div>
</div>
</div>
<div class="formSearch__item">
<div class="formSearch__title">Label</div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input">
</div>
</div>
</div>
</div>
<div class="formSearch__btn">
<button class="btn is-search"><span class="icon is-search"></span>조회</button>
</div>
</div>
Search Form : 2줄
- height : 104px (1줄 42px씩 증가)
Label
Label
<div class="formSearch">
<div class="formSearch__content">
<div class="formSearch__item is-col3">
<div class="formSearch__title"><div class="is-requirement">Label</div></div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input flex-grow-1">
</div>
</div>
</div>
<div class="formSearch__item is-col2">
<div class="formSearch__title"><div class="is-requirement">Label</div></div>
<div class="formSearch__form">
<div class="formControl">
<input type="text" placeholder="입력하세요" class="form__input flex-grow-1">
</div>
</div>
</div>
</div>
<div class="formSearch__btn">
<button class="btn is-search"><span class="icon is-search"></span>조회</button>
</div>
</div>