통합검색창코드
cmd_search}" /> FIND
간단하게는 위 코드를 레이아웃에서 원하는 영역에 삽입한다.
좀더 자세한 설명은 이나님의 블로그에서 발췌한다.;;
3.5. 레이아웃 상단 코딩 3(검색창), 컨텐츠 영역, 하단 코딩
출처: https://www.ena-ble.net/entry/XE-1x-강좌-35-레이아웃-상단-코딩-3검색창-컨텐츠-영역-하단-코딩 [Enable!]
검색창
이제 상단에 검색창을 만들어보자. 여기서는 로그인과 같은 줄에 검색창을 만들어보도록 하겠다. 우선 html 파일을 열고 다음과 같은 코드를 삽입한다.
cmd_search}" />
짠하고 검색창이 나타났다. 역시 디자인을 수정할 필요가 있겠다.
.layout_container .header .menu .search_area{
font-family:'Calibri';
font-size:10px;
color:#777;
margin-top:10px; /* 로그인폼과의 높이를 동일하게 맞추기 위해 여백을 로그인폼과 같게 조정 */
}
.layout_container .header .menu .search_area input[type="submit"]{
font-size:10px;
background:transparent;
border:none;
font-family:inherit;
cursor:pointer;
color:#777;
}
.layout_container .header .menu .search_area input[type="submit"]:hover, .layout_container .header .menu .search_area input[type="submit"]:active{
color:#aaa;
}
.layout_container .header .menu .search_area input[type="text"]{
border:none;
background:rgba(0,0,0,0.05);
padding:3px;
width:70px;
font-family:inherit;
}
이제 검색창의 위치를 조정할 시간이다. 로그인창과 검색창을 인라인으로 바꿔 한 줄에 같이 나타날 수 있게 하는 원리다.
.layout_container .header .menu .login_area{
display:inline-block; /* 로그인창을 인라인블록으로 전환 */
}
.layout_container .header .menu .search_area{
font-family:'Calibri';
font-size:10px;
color:#777;
margin-top:10px;
display:inline-block;
float:right; /* 검색창으로 오른쪽으로 */
}
그리하여 상단 디자인이 완료되었다.
출처: https://www.ena-ble.net/entry/XE-1x-강좌-35-레이아웃-상단-코딩-3검색창-컨텐츠-영역-하단-코딩 [Enable!]
