Snippet 본문

기본형 - 헤더/ 검색창 / GNB

등록
신예호 (등록일 : 2013/12/04)
Type
PC
설명
PC 헤더 / 검색창 / GNB 의 기본형
미리보기
Html
<div id="daumHead">
	<h1>
		<a href="#none" id="daumServiceLogo"><span class="ir_wa">서비스명</span></a>
	</h1>
	<h2 class="screen_out">관련서비스</h2>
	<ul id="daumRelServices">
		<li><a href="#none" target="_blank" class="link_services link_services1"><span class="ir_wa">유관명</span></a></li>
		<li><a href="#none" target="_blank" class="link_services link_services2"><span class="ir_wa">유관명</span></a></li>
		<li><a href="#none" target="_blank" class="link_services link_services3"><span class="ir_wa">유관명</span></a></li>
	</ul>
	<h2 class="screen_out">검색</h2>
	<form id="daumSearch" name="daumSearch" action="" onsubmit="return false">
		<fieldset class="fld_inside"><!--  내부검색 fld_inside 추가 -->
			<legend class="screen_out">검색어 입력폼</legend>
			<div class="box_searchbar"><!-- 입력창 선택시 search_on 추가  -->
				<input type="text" class="tf_keyword" id="qTop" name="q" value="" title="검색어 입력"  autocomplete="off" spellcheck="false"/>
				<button id="daumBtnSearch" class="ico_search btn_search" type="submit"><span class="ir_wa">검색</span></button>
			</div>
		</fieldset> 
	</form>
	<h2 class="screen_out">서비스명 메인메뉴</h2>
	<div id="daumGnb">
		<ul class="gnb_comm">
			<li><a href="#none" class="link_gnb link_gnb1"><span class="ir_wa">메뉴명</span></a></li>
			<li class="on"><a href="#none" class="link_gnb link_gnb2"><span class="ir_wa">메뉴명</span></a></li><!-- 현재페이지에 on클래스 추가  -->
			<li><a href="#none" class="link_gnb link_gnb3"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb4"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb5"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb6"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb7"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb8"><span class="ir_wa">메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb9"><span class="ir_wa">메뉴명</span></a></li>
		</ul>
		<ul class="gnb_with">
			<li><a href="#none" class="link_gnb link_gnb1"><span class="ir_wa">부가메뉴명</span></a></li>
			<li><a href="#none" class="link_gnb link_gnb2"><span class="ir_wa">부가메뉴명</span></a></li>			
		</ul>	
		<a href="#none" class="link_app">다음앱 설치</a>
	</div>
</div>
CSS
/* daumHead */
#daumHead {width:978px;padding-top:69px}
#daumHead:after {display:block;visibility:hidden;height:0;content:'';font-size:0;clear:both}
#daumHead h1 {display:inline;float:left;margin-left:2px;font-weight:bold;font-size:32px;line-height:40px;letter-spacing:-1px}
#daumServiceLogo {display:block;width:134px;height:37px;background:url(/snippet/image?idx=387) no-repeat}
#daumRelServices {display:inline;float:left;margin:7px 0 0 11px}
#daumRelServices li {display:inline;float:left;margin-left:12px}
#daumRelServices .link_services {display:block;height:24px;font-weight:bold;font-size:19px;color:#b3b3b3;line-height:24px;background:url(/snippet/image?idx=387) no-repeat}
#daumRelServices .link_services1 {width:63px;background-position:0 -50px}
#daumRelServices .link_services2 {width:63px;background-position:0 -50px}
#daumRelServices .link_services3 {width:63px;background-position:0 -50px}

/* gnb */
#daumGnb {float:left;position:relative;width:978px;border-bottom:3px solid #333;margin-top:9px;height:43px;background:url(/snippet/image?idx=387) no-repeat 0 -175px}
#daumGnb li {float:left}
#daumGnb .gnb_comm {float:left}
.gnb_comm .link_gnb, .gnb_with .link_gnb {display:block;height:43px;margin-right:11px;line-height:43px;font-weight:bold;font-size:14px;background:url(/snippet/image?idx=387) no-repeat;letter-spacing:-1px;text-align:center}
.gnb_comm .link_gnb1 {width:55px;margin-right:8px;background-position:0 -175px}
.gnb_comm .link_gnb2 {width:55px;background-position:-63px -175px}
.gnb_comm .link_gnb3 {width:55px;background-position:-129px -175px}
.gnb_comm .link_gnb4 {width:55px;background-position:-195px -175px}
.gnb_comm .link_gnb5 {width:55px;background-position:-261px -175px}
.gnb_comm .link_gnb6 {width:55px;background-position:-327px -175px}
.gnb_comm .link_gnb7 {width:55px;background-position:-393px -175px}
.gnb_comm .link_gnb8 {width:55px;background-position:-459px -175px}
.gnb_comm .link_gnb9 {width:55px;margin-right:0;background-position:-525px -175px}
.gnb_comm .link_gnb1:hover, .gnb_comm .link_gnb1:focus {background-position:0 -225px}
.gnb_comm .link_gnb2:hover, .gnb_comm .link_gnb2:focus {background-position:-63px -225px}
.gnb_comm .link_gnb3:hover, .gnb_comm .link_gnb3:focus {background-position:-129px -225px}
.gnb_comm .link_gnb4:hover, .gnb_comm .link_gnb4:focus {background-position:-195px -225px}
.gnb_comm .link_gnb5:hover, .gnb_comm .link_gnb5:focus {background-position:-261px -225px}
.gnb_comm .link_gnb6:hover, .gnb_comm .link_gnb6:focus {background-position:-327px -225px}
.gnb_comm .link_gnb7:hover, .gnb_comm .link_gnb7:focus {background-position:-393px -225px}
.gnb_comm .link_gnb8:hover, .gnb_comm .link_gnb8:focus {background-position:-459px -225px}
.gnb_comm .link_gnb9:hover, .gnb_comm .link_gnb9:focus {background-position:-525px -225px}
.gnb_comm .on .link_gnb1, .gnb_comm .on .link_gnb1:hover, .gnb_comm .on .link_gnb1:focus {background-position:0 -275px}
.gnb_comm .on .link_gnb2, .gnb_comm .on .link_gnb2:hover, .gnb_comm .on .link_gnb2:focus {background-position:-63px -275px}
.gnb_comm .on .link_gnb3, .gnb_comm .on .link_gnb3:hover, .gnb_comm .on .link_gnb3:focus {background-position:-129px -275px}
.gnb_comm .on .link_gnb4, .gnb_comm .on .link_gnb4:hover, .gnb_comm .on .link_gnb4:focus {background-position:-195px -275px}
.gnb_comm .on .link_gnb5, .gnb_comm .on .link_gnb5:hover, .gnb_comm .on .link_gnb5:focus {background-position:-261px -275px}
.gnb_comm .on .link_gnb6, .gnb_comm .on .link_gnb6:hover, .gnb_comm .on .link_gnb6:focus {background-position:-327px -275px}
.gnb_comm .on .link_gnb7, .gnb_comm .on .link_gnb7:hover, .gnb_comm .on .link_gnb7:focus {background-position:-393px -275px}
.gnb_comm .on .link_gnb8, .gnb_comm .on .link_gnb8:hover, .gnb_comm .on .link_gnb8:focus {background-position:-459px -275px}
.gnb_comm .on .link_gnb9, .gnb_comm .on .link_gnb9:hover, .gnb_comm .on .link_gnb9:focus {background-position:-525px -275px}
#daumGnb .gnb_with {display:inline;float:left;margin-left:17px}
.gnb_with .link_gnb1 {width:74px;margin-right:8px;background-position:-597px -175px}
.gnb_with .link_gnb2 {width:74px;margin-right:0;background-position:-679px -175px}
.gnb_with .link_gnb1:hover, .gnb_with .link_gnb1:focus {background-position:-597px -225px}
.gnb_with .link_gnb2:hover, .gnb_with .link_gnb2:focus {background-position:-679px -225px}
.gnb_with .on .link_gnb1, .gnb_with .on .link_gnb1:hover, .gnb_with .on .link_gnb1:focus {background-position:-597px -275px}
.gnb_with .on .link_gnb2, .gnb_with .on .link_gnb2:hover, .gnb_with .on .link_gnb2:focus {background-position:-679px -275px}
#daumGnb .link_app {position:absolute;top:7px;right:0;overflow:hidden;width:70px;height:30px;background:url(/snippet/image?idx=387) no-repeat 0 -125px;text-indent:-9999px}

/* search */
.ico_search {background-image:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001)}
#daumSearch {float:right;position:relative;z-index:999;width:310px;margin-top:3px}
#daumSearch .box_searchbar {float:left;background:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001) no-repeat;background-position:0 0}
#daumSearch .search_on {position:relative;background-position:0 -50px}
#daumSearch .tf_keyword {display:inline;float:left;width:370px;height:18px;margin:11px 10px 0;padding:0;border:0 none;font-weight:bold;font-size:16px;line-height:18px;font-family:'돋움',dotum,sans-serif;background-color:transparent;outline:none}
#daumSearch .btn_search {float:left;overflow:hidden;width:66px;height:39px;border:0 none;background-position:0 -300px;cursor:pointer}
#daumSearch .btn_search:hover  {background-position:-70px -300px}
#daumSearch .fld_inside {position:relative;width:100%;height:31px}
#daumSearch .fld_inside .box_searchbar {background-position: 0 -200px}
#daumSearch .fld_inside .tf_keyword {width:242px;height:18px;margin:7px 9px 0;font-weight:normal;font-size:12px;line-height:1.5}
#daumSearch .fld_inside .btn_search {width:50px;height:31px;background-position:100% -200px}
#daumSearch .fld_inside .btn_search:hover {background-position:100% -300px}
#daumSearch .fld_inside .bg_on {background:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001) no-repeat 2px -422px}
#daumSearch .fld_inside .search_on {background-position:0 -250px}
#daumSearch .fld_inside .search_on .btn_search {background-position:100% -250px}
#daumSearch .fld_inside .search_on .btn_search:hover {background-position:100% -300px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기