99.유용한정보/잡식2009. 4. 1. 00:34

naver LNB 적용 가이드

반응형

LNB 적용 가이드

  • 어떤 환경의 유저도 사용하는데 불편함이 없도록 합니다.
  • 모든 서비스의 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/ 폴더를 생성)

목록

레이아웃

▲Top
<div id="header">
<div id="gnb_area"></div>
<h1></h1>
<div id="menu"></div>
<div id="search"></div>
</div>

구조1

▲Top
구조1
검색 영역

구조2

▲Top
구조2
GNB 영역h1 영역관련서비스 영역배너광고 영역메뉴 영역검색 영역useful 영역

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 영역
<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
useful
<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>
Posted by 1010

티스토리툴바