Layout Template : Search Box

Search Type별 Sample

사용성에 따라 input, select를 섞어서 사용해줍니다.
input & select sample
input & button 타입 검색 option 선택 타입
						
							<!--Margin-right-5 는 margin-right: 5px 을 뜻하는 helper css 입니다.-->
							<!--검색 버튼의 활용은 아이콘만 넣을 수도 있고 텍스트, 아이콘+텍스트, 텍스트+아이콘등으로 사용할 수 있습니다.
							상세한 자료는 ui.alopex.io에서 확인해주세요.-->

							<!--input & button 타입-->
							<!--data-position="left" 는 아이콘의 위치를 왼쪽으로 지정해주는 속성입니다.-->
							<input class="Textinput Margin-right-5">
							<button class="Button"><span class="Icon Search" data-position="left"></span>검색</button>

							<!--검색 option 선택 타입-->
							<!--data-placeholder="선택"은 셀렉트 컴포넌트의 placeholder 값을 설정하는 속성입니다.-->
							<select class="Select Margin-right-5" data-placeholder="선택">
							    <option>제목</option>
							    <option>글쓴이</option>
							    <option>내용</option>
							</select>
							<input class="Textinput Margin-right-5"><button class="Button">검색</button>
						
					

Helper css를 응용한 big size search sample

						
							<!--포털 사이트처럼 최상단에 search를 우선으로 넣을 경우 Helper css를 활용하여 search object를 구성할 수 있습니다.-->
							<!--Text-center 는 text-align: center을 상징하는 Helper css 입니다. search object를 가운데로 위치하도록 하기 위해서 사용합니다.-->
							<div class="Text-center">
							<!--Width-60 을 width: 60%를 의미합니다. button의 크기는 Extra로 줬기 때문에 input의 height 값을 inline element style을 사용하여 button에 맞추어 줍니다.-->
							    <input class="Textinput Width-60 Margin-right-5" style="height: 38px">
							    <button class="Button Extra"><span class="Icon Search" data-position="left"></span>검색</button>
							</div>
						
					

Layout 내에서 search box 활용하기

search box를 사용자의 layout에 맞게 사용하기 위해서는 아래 template의 html tag 외에 Helper css를 활용하거나 프로젝트내 css를 따로 추가하여 사용자가 원하는 모양이나 간격을 조정해 주면 좋습니다.
Form Table Layout
*항목 체크박스
항목 검색
검색조건
~
검색조건
Form Table 밖에 Button이 있는 경우
*항목 체크박스
항목 검색
검색조건
~
검색조건
						
							<!--Table Alopex UI를 사용해서 적용해줍니다. Table 내 Scroller가 필요한 경우 "Table-wrapper" 아래에 <div class="Table-scroller">를 넣어 주면 됩니다.
							    Table 내에 버튼을 넣고 싶은 경우에는 마지막 td 안에 넣어주세요
							    Table 외부로 버튼을 놓고자 하는 경우 Table-wrapper와 동일 선에서 markup 하여줍니다. 위치값은 Button Object Template를 참고하여 원하는 방향으로
							    설정해주면 됩니다.-->
							
							<div class="Table-wrapper">
							    <table class="Table Form-type"> <!--Form 모양의 Table이 필요한 경우 class name Form-type을 넣어준다.-->
							        <colgroup>
							            <col style="width:100px"> <!--th의 사이즈를 정해준다. 사이즈를 넣지 않을 경우 동일 width로 지정된다.-->
							            <col>
							            <col style="width:100px">
							            <col>
							        </colgroup>
							        <tbody>
							            <tr>
							                <th>항목</th>
							                <td>내용들어가는 곳</td>
							                <th>항목</th>
							                <td>내용들어가는 곳</td>
							        ......
							        </tbody>
							    </table>
							</div>
							<!--Button Object 영역-->
							<div class="Float-right"><button class="Button Warning Margin-right-5">검색</button><button class="Button Default">삭제</button></div>
						
					
Main Menu 우측으로 search를 넣을 경우
						
							<ul class="Navmenu"> <!--메인 메뉴에 대한 API를 적용해주세요.-->
							    <li><a href="#0">Parent #1</a>
							        <ul>
							            <li><a href="#0">Child #1</a>
							                <ul>
							                    <li>
							                        <a href="#0">GrandChild #1</a>
							                    </li>
							                </ul>
							            </li>
							            <li><a href="#0">Child #2</a>
							                <ul>
							                    <li>
							                        <a href="#0">GrandChild #1</a>
							                    </li>
							                </ul>
							            </li>
							        </ul>
							    </li>
							    <li><a href="#0">Parent #2</a>
							        <ul>
							            <li><a href="#0">Child #1</a>
							                <ul>
							                ...... <!--이후 Navmenu에 관한 사용법은 ui.alopex.io를 참조해주세요.-->
							                </ul>
							            </li>
							        </ul>
							    </li>
							    <li>
							        <a href="#0">Parent #3</a>
							    </li>
							    <li class="Float-right"><!--Search 부분을 메뉴의 오른쪽으로 위치하기 위해 Helper css "Float-right"를 사용합니다.-->
							        <input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
							        <!--Button Onlyicon classname을 적용하고 icon의 위치를 잡아주는  data-position="top" 을 추가해주면 버튼을 아이콘만 표시할 수 있습니다.-->
							    </li>
							</ul>
						
					
Main Menu 우측으로 위에 search를 적용할 경우
						
							<!--search 가 먼저 시작하므로 search에 해당하는 markup을 먼저 적용해줍니다. Navmenu 내에 있지 않으므로 block tag를 사용해줍니다.-->
							<div class="Float-right">
							    <input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
							</div>
							<ul class="Clearboth Navmenu"> <!--Navmenu에는 clear:both 등 상위 markup의 float를 해제해주는 것이 없으므로 Helper css인 Clearboth 를 추가해줍니다.-->
							    <li><a href="#0">Parent #1</a>
							        <ul>
							            <li><a href="#0">Child #1</a>
							        ........
							    </li>
							</ul>
						
					
LNB Template에 적용할 경우
						
							<!--search를 먼저 위치시키거나 메뉴 밑에 위치시키거나 사용자의 필요성에 따라 적용해줍니다.-->
							<div>
							    <input class="Textinput"><button class="Button Onlyicon"><span class="Icon Search" data-position="top"></span></button>
							</div>
						
					
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.