Header(PC/MO)

헤더는 웹페이지의 최상단 영역이며, 사용자들이 가장 먼저 마주하는 영역이다. 사용자에게 이 사이트가 어떤 상품과 서비스를 제공하는지 알려줄 수 있는 영역이기도 하다.

주로 브랜드 로고와 네비게이션바가 포함된다.

Header - LNB 한줄로 떨어지는 유형

GNB 메뉴 하나를 호버하면 밑으로 2depth 메뉴가 밑으로 떨어지는 유형이다.

LNB가 6개 이상은 병렬배치한다.(서비스소개 hover)

PC

Mobile

<header class="header" style="position: static;"> <div class="header__inner"> <div class="header_content"> <!-- A : 로고 --> <a href="/" class="header_logo"> <img src="../_img/common/logo.png" alt="로고" height="30"> </a> <!-- B : 내비게이션 --> <nav class="header_nav"> <ul class="header_gnb"> <li class="header_gnb_li"> <a href="#">회사소개</a> <div class="header_lnb"> <div class="header_lnb__inner"> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> </div> </div> </li> <li class="header_gnb_li"> <a href="#">서비스소개</a> <div class="header_lnb"> <div class="header_lnb__inner"> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> </div> </div> </li> <li class="header_gnb_li"> <a href="#">문의하기</a> <div class="header_lnb"> <div class="header_lnb__inner"> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> </div> </div> </li> <li class="header_gnb_li"> <a href="#">심리테스트</a> <div class="header_lnb"> <div class="header_lnb__inner"> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> </div> </div> </li> <li class="header_gnb_li"> <a href="#">고객센터</a> <div class="header_lnb"> <div class="header_lnb__inner"> <ul> <li class="header_lnb_li"> <a href="#">IT제작</a> </li> <li class="header_lnb_li"> <a href="#">심리테스트</a> </li> <li class="header_lnb_li"> <a href="#">웹디자인</a> </li> <li class="header_lnb_li"> <a href="#">교육 프로그램</a> </li> <li class="header_lnb_li"> <a href="#">서비스소개</a> </li> </ul> </div> </div> </li> </ul> </nav> </div> <div class="header_content"> <!-- C: 로그인/회원가입 버튼 --> <ul class="header_account"> <li><a href="#" class="header_account_link link-login">로그인</a></li> <li><a href="#" class="header_account_link link-signup">회원가입</a></li> </ul> <!-- D : 아이콘 영역 --> <div class="header_icon"> <div class="header_search"> <input type="text"> <button type="button" class="header_btn btn-search"></button> </div> <a href="#" class="header_btn link-mypage"></a> <button type="button" class="header_btn btn-menu"></button> </div> </div> </div> </header>

공통 레이아웃

모든 헤더 섹션의 정보는 일관된 순서로 제공한다. 또한 화면너비가 줄어 병렬배치에서 수직배치로 변경되더라도 순서는 변하지 않도록한다.

  • A : 로고 - 기관/서비스 로고 영역이며, 최대 높이를 40px로 잡음
  • B : 내비게이션 - 사용자가 사이트 내에서 자연스럽게 이동할 수 있도록 안내하는 내비게이션 바 영역. 폰트 사이즈(font size)는 18px이며, 텍스트 간격은 40px로 지정
  • C : 로그인/회원가입 버튼 - 로그인과 회원가입 페이지로 이동할 수 있는 버튼 영역. 폰트 사이즈(font size)는 16px이며, 텍스트 간격은 8px로 지정. 구별선은 높이 10px로 지정
  • D : 아이콘 영역 - 검색, 마이페이지, 햄버거 메뉴 등 사용자들이 자주 사용하는 페이지의 아이콘을 모아둔 영역. 주로 검색, 마이페이지, 햄버거 메뉴, 장바구니, 알림 등이 있음