MENU
조회 예시 1, 조회 예시 2 동일한 스타일로 내용만 다름. 내용에 따라 <col style="width:60%;">
값 조정.
조회 예시 1
|
발송일
-
|
제목 |
|
검색필터 |
|
조회 예시 2
|
발송일
-
|
종류 |
|
제목 |
상태 |
//조회 예시 1
<div class="filter">
<table>
<colgroup>
<col style="width:60%;">
<col style="width:40%;">
</colgroup>
<tr>
<td>
<p class="filter__title">발송일</p>
<div class="input-set input-set--period">
<input type="date">
<span>-</span>
<input type="date">
</div>
</td>
<td>
<p class="filter__title">제목</p>
<input type="text" class="input--full">
</td>
</tr>
<tr>
<td colspan="2">
<p class="filter__title">검색필터</p>
<ul class="checkboxes--horizontal spacing--xxxs">
<li>
<input type="checkbox" id="check_ex1">
<label for="check_ex1">전체</label>
</li>
<li>
<input type="checkbox" id="check_ex2">
<label for="check_ex2">발송완료</label>
</li>
<li>
<input type="checkbox" id="check_ex3">
<label for="check_ex3">발송대기</label>
</li>
<li>
<input type="checkbox" id="check_ex4">
<label for="check_ex4">발송취소</label>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" class="filter__btns">
<button type="button" class="btn btn--primary icon-search">검색</button>
</td>
</tr>
</table>
</div>
//조회 예시 2
<div class="filter">
<table>
<colgroup>
<col style="width:70%;">
<col style="width:30%;">
</colgroup>
<tr>
<td>
<p class="filter__title">발송일</p>
<div class="input-set input-set--period">
<input type="date">
<span>-</span>
<input type="date">
</div>
</td>
<td>
<p class="filter__title">종류</p>
<select class="input--full">
<option value="Option">Option</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="filter__title">제목</p>
<input type="text" class="input--full">
</td>
<td>
<p class="filter__title">상태</p>
<select class="input--full">
<option value="Option">Option</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" class="filter__btns">
<button type="button" class="btn btn--primary btn--outline icon-x-circle">초기화</button>
<button type="button" class="btn btn--primary icon-search">검색</button>
</td>
</tr>
</table>
</div>