목적
- 어떤 환경의 유저도 사용하는데 불편함이 없도록 합니다.
- 모든 서비스의 html 구조를 통일화 합니다.
적용 가이드
- LNB영역의 NAVER 로고는 네이버 메인(http://www.naver.com)으로 링크 걸어야 합니다. (target 사용안함)
- 네이버 서비스의 LNB는 아래와 같은 형식을 지닙니다.
- 표현 양식은 아래 형식에서 벗어나지 않도록 하고, 내용 자체는 각각의 서비스에 맞게 수정하여 사용하도록 합니다.
- 아래 예시는 쿽스모드로 제작 되었으며 표준모드의 경우 padding 수치에 따라 width, height 값을 변경해야 합니다.
접근성
- 본문 바로가기 영역을 두어 스크린리더를 사용하는 유저들이 본문컨텐츠 영역으로 이동할 수 있게 해주는 스킵 네비게이션이 포함되어 있어야 합니다.
- 스크린리더를 사용하는 유저들이 주메뉴와 서브메뉴를 명확히 인지할 수 있도록 마크업해야 합니다.
- 검색 input box에 accesskey=s로 삽입하여 alt+s 를 이용하면 바로 검색할 수 있도록 합니다.
주의사항
- header 영역에서 사용하고 있는 header, gnb_area, gnb_box, menu, search, skip 의 ID는 다른 부분(container, footer 등)에서 사용할 수 없습니다.
- header 영역에서 사용하고 있는 service, banner, menu, etc, keyword, useful, bar 의 클래스명을 다른곳에서 사용할 시 서로 영향받지 않도록 합니다.
예) #header .service { } / #content .service { } - 같은 service 라는 클래스를 사용하고 있지만 서로 영향을 주지 않습니다.
이미지
- 이미지는 Static 서버에 업로드 하는것을 원칙으로 합니다. (http://static.naver.com/header/)
http://static.naver.com/header/h1/ - 네이버 로고와 각 서비스명에 해당하는 이미지(h1, ul.service)
http://static.naver.com/header/common/ - 모든 서비스에서 공통적으로 쓰일 수 있는 검색 버튼 및 아이콘 (예: 인기, NEW, UP 등) - 그외 이미지는 각 서비스의 호스트명과 같은 이름의 폴더에 업로드 합니다.
(예:http://dic.naver.com/ 에서 쓰이는 이미지는 /dic/ 폴더를 생성)
목록
- 레이아웃
- 구조1
- 구조2
- GNB 영역
- h1 영역
- 관련 서비스 영역
- 배너 광고 영역
- 메뉴 영역1
- 메뉴 영역2 - 하위메뉴가 있는 경우
- 검색 영역
- 광고문구 영역
- 인기검색어 영역
- useful 영역
- 접근성 - 스크린리더 데모 & 소스
레이아웃
▲Top <div id="header">
<div id="gnb_area"></div>
<h1></h1>
<div id="menu"></div>
<div id="search"></div>
</div>
GNB 영역
▲Top <div id="gnb_area">
<iframe title="Global Navigation Bar" id="gnb_box" name="gnb_new" src="http://gn.naver.com/?tmpl=07" width="100%" height="22" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe></div>
h1 영역
▲Top
<h1>
<a href="http://www.naver.com"><img src="http://static.naver.com/header/h1/naver.gif" alt="NAVER" width="85" height="25"></a>
<a href="#" class="service"><img src="http://static.naver.com/header/h1/local.gif" alt="지역정보" width="83" height="25"></a>
</h1>
#header h1 {position:relative; display:inline; float:left; height:39px; margin:-4px 0 0 14px; font-size:12px;}
#header h1 img {vertical-align:top;}
#header h1 a.service {margin-left:-4px;}
관련서비스 영역
▲Top
<ul class="service">
<li><a href="#"><img src="http://static.naver.com/header/h1/worldtown_s.gif" alt="월드타운" width="51" height="15"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/h1/enjoyjapan_s.gif" alt="인조이재팬" width="63" height="15"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/h1/travel_s.gif" alt="여행" width="26" height="15"></a></li>
</ul>
#header ul.service {display:inline; float:left; margin:2px 0 0 8px; overflow:hidden;}
#header ul.service li {display:inline; float:left; margin:0 10px 0 -1px; padding:0 0 0 9px; font:0/0 돋움; border-left:1px solid #dcdcdc;}
배너광고 영역
▲Top
<p class="banner"><a href="#"><img src="http://imgfinance.naver.com/upload/banners/global/1194834692AIG_1030_27026.gif" width="270" height="26" alt="광고"></a></p>
#header .banner {float:right; margin:7px 1px 0 0;}
메뉴영역 1
▲Top
<div id="menu">
<ul class="menu">
<li><a href="#"><strong><img src="http://static.naver.com/header/local/menu1_on.gif" alt="지역정보홈" width="78" height="24"></strong></a></li>
<li><a href="#"><img src="http://static.naver.com/header/local/menu2.gif" alt="교통" width="42" height="24"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/local/menu3.gif" alt="날씨" width="41" height="24"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/local/menu4.gif" alt="포토스트리트" width="86" height="24"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/local/menu5.gif" alt="테마톡톡" width="63" height="24"></a></li>
<li class="bar"><a href="#"><img src="http://static.naver.com/header/local/menu6.gif" alt="지도" width="41" height="24"></a></li>
</ul>
</div>
#header #menu {position:relative; clear:both; height:36px; _height:38px; padding:1px 0; background:#2693bc url(http://static.naver.com/header/endic/bg_lnb.gif) no-repeat left top;}
#header #menu ul.menu {display:inline; float:left; margin:6px 20px 0;}
#header #menu ul.menu li {position:relative; display:inline; float:left; margin:0 5px 0 0; vertical-align:top; font:0/0 돋움;}
#header #menu ul.menu li.bar {padding:0 7px 0 7px; background:url(http://static.naver.com/header/endic/bg_menu_bar.gif) 0 6px no-repeat;}
메뉴영역 2 - 하위메뉴가 있는 경우
▲Top
<div id="menu">
<ul class="menu">
<li><a href="#"><img src="http://static.naver.com/header/land/menu1.gif" width="67" height="24" alt="부동산 홈"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu2.gif" width="41" height="24" alt="매물"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu3.gif" width="41" height="24" alt="시세"></a></li>
<li class="on"><a href="#"><strong><img src="http://static.naver.com/header/land/menu4_on.gif" width="42" height="24" alt="분양"></strong></a>
<span>분양 하위메뉴 시작</span>
<ul class="sub4">
<li><a href="#">파워분양정보</a></li>
<li><a href="#">분양뉴스·리포트</a></li>
<li><a href="#">미분양</a></li>
<li><a href="#">현장탐방</a></li>
<li><a href="#">호재분석</a></li>
<li><a href="#">경쟁률·당첨확인</a></li>
<li><a href="#">청약가이드</a></li>
</ul>
<span>분양 하위메뉴 끝</span>
</li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu5.gif" width="92" height="24" alt="뉴스·투자정보"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu6.gif" width="62" height="24" alt="커뮤니티"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu7.gif" width="69" height="24" alt="경매·공매"></a></li>
<li><a href="#"><img src="http://static.naver.com/header/land/menu8.gif" width="41" height="24" alt="등기"></a></li>
</ul>
</div>
#header #menu {position:relative; clear:both; height:72px; _height:74px; padding:1px 0; background:#22738e url(http://static.naver.com/header/land/bg_lnb.gif) no-repeat left top;}
#header #menu ul.menu {display:inline; float:left; margin:6px 20px 0; background:none;}
#header #menu ul.menu li {position:relative; display:inline; float:left; margin:0 5px 0 0;}
#header #menu ul.menu li img {vertical-align:top;}
#header #menu ul.menu li.bar {padding:0 7px 0 7px; background:url(http://static.naver.com/header/land/bg_menu_bar.gif) 0 6px no-repeat;}
#header #menu ul.menu li span {display:none;}
#header #menu ul.menu li ul {display:none; position:absolute; left:9px; top:44px; width:700px; overflow:hidden;}
#header #menu ul.menu li ul li {margin:0 10px 0 -1px; padding:0 0 0 10px; background:url(http://static.naver.com/header/land/bg_menu_bar2.gif) no-repeat left top;}
#header #menu ul.menu li ul li a {color:#5b5b5b;}
#header #menu ul.menu li.on ul {display:block;}
#header #menu ul.menu li.on ul.sub4 {left:-125px;}
검색영역
▲Top
<div id="search">
<p>...</p>
<fieldset>
<legend>검색</legend>
<input type="text" class="keyword" title="검색어" accesskey="s">
<input type="image" src="http://static.naver.com/header/common/btn_search.gif" width="45" height="23" alt="검색" class="btn_search">
</fieldset>
<dl class="keyword">...</dl>
</div>
#header #search {position:relative; height:36px; background:#f8f8f8 url(http://static.naver.com/header/endic/bg_lnb.gif) no-repeat left bottom;}
#header #search fieldset {padding:7px 0 0 294px; color:#c4c4c4; text-align:left;}
#header #search fieldset .keyword {width:230px; height:21px; margin-left:1px; padding:3px 3px 0; border:1px solid #bababa;}
광고문구 영역
▲Top
<div id="search">
<p><a href="#">우리가게 무료홍보! <strong>지역업체 등록하기</strong> <img src="http://static.naver.com/header/local/btn_go.gif" width="17" height="12" alt="GO"></a></p>
<fieldset> ... </fieldset>
<dl class="keyword"> ... </dl>
</div>
#header #search p {position:absolute; left:29px; top:13px; _top:14px; font:11px 돋움;}
#header #search p strong {display:inline; color:#ff5300; font-weight:normal;}
#header #search p a {color:#666;}
#header #search p a:hover {color:#ff5300;}
인기검색어 영역
▲Top
<div id="search">
<p> ... </p>
<fieldset> ... </fieldset>
<dl class="keyword">
<dt><img src="http://static.naver.com/header/common/icon_popular2.gif" width="29" height="16" alt="인기"></dt>
<dd>
<a href="#">용인 맛집</a>,
<a href="#">설악산 펜션</a>,
<a href="#">수원 부동산</a>
</dd>
</dl>
</div>
#header #search dl.keyword {position:absolute; right:0; top:10px; width:340px; padding-top:1px; font-size:11px; line-height:14px; text-align:center;}
#header #search dl.keyword dt {display:inline;}
#header #search dl.keyword dt img {margin:-1px 2px 1px 0; _margin:-2px 2px 2px 0; vertical-align:middle;}
#header #search dl.keyword dd {display:inline; color:#5b5b5b;}
#header #search dl.keyword dd a {color:#5b5b5b;}
useful 영역
▲Top
<div id="search">
<p> ... </p>
<fieldset> ... </fieldset>
<ul class="useful">
<li><a href="#"><em>경제 유니버시아드</em></a></li>
<li><a href="#">기업정보</a></li>
<li><a href="#">금융감독위원회</a></li>
</ul>
</div>
#header #search ul.useful {position:absolute; right:19px; top:13px; white-space:nowrap;}
#header #search ul.useful li {display:inline; margin:0 -1px 0 1px; padding:0 10px 0 9px; font-weight:bold; background:url(http://static.naver.com/header/finance/bg_useful_bar.gif) no-repeat right top;}
#header #search ul.useful li a {color:#5b5b5b;}
#header #search ul.useful li a em {color:#00860a; font-style:normal;}
#header #search ul.useful li a:hover em {text-decoration:underline;}
접근성 - 스크린리더 데모 & 소스
▲Top
스킵 네비게이션
검색 바로가기
주메뉴와 하위메뉴 구분
<!-- Header -->
<div id="skip"><a href="#start">메뉴건너뛰고 본문 바로가기</a></div>
<div id="header">
...
<!-- //Header -->
<div id="start" class="skip"><a name="start">본문시작</a></div>검색 바로가기
<input type="text" class="keyword" name='keyword' title="검색어" accesskey="s">주메뉴와 하위메뉴 구분
<ul class="menu">
<li class="on"><a href="#"><strong><img src="img/menu1_on.gif" width="61" height="22" alt="영어사전"></strong></a>
<span>영어사전 하위메뉴 시작</span>
<ul>
<li><a href="#"><strong>영어사전1</strong></a></li>
<li><a href="#">영어사전2</a></li>
<li><a href="#">영어사전3</a></li>
<li><a href="#">영어사전4</a></li>
<li><a href="#">영어사전5</a></li>
</ul>
<span>영어사전 하위메뉴 끝</span>
</li>