GNB

웹 사이트에서 가장 많이 사용하고 중요한 GNB (Global navigation Bar)를 마크업 해보자.
말 그대로 모든 화면에서 나오는 네비게이션 바 라는 뜻이다.

 

---

레이아웃 분석

모바일만 만들게 된다면 메뉴버튼, 로고 이미지, 아이콘 버튼 을 따로따로 스타일링 해도 되지만 데스크탑 시안과 공통적인 레이아웃으로 맞춰서 마크업을 하면 스타일링이 좀 더 수월해진다.

이 시안의 경우 크게 오른쪽과 왼쪽으로 나누어서 마크업을 해 볼 수 있다.

 

보통 실무에서는 모바일을 기준으로 먼저 스타일링을 한다. 그 다음 태블릿, 데스크탑 순으로 스타일을 확장해나간다.

이렇게 작은 화면부터 공략하면 전반적으로 디자인이 쉬워질 뿐만 아니라, 상대적으로 컴퓨팅 리소스가 부족한 모바일에서 성능상 이점을 줄 수 있다고 한다.

 

마크업

일단 가장 러프하게 왼쪽과 오른쪽으로 나누는 틀을 짜고 마크업을 해보자.

<header class="global-header">
  <div class="gnb">
    <div class="gnb-left">
      <로고 >
      <메뉴들 >
  	</div>
  	<div class="gnb-right">
      <아이콘들 >
      <버튼 >
  	</div>
  </div>
</header>

여기에 그리드 시스템을 적용하도록 해 보자.

참고로, container -> row -> col 이 3단계는 반드시 순차적으로 지켜져야 한다.
중간에 다른 클래스의 태그가 들어가거나 하면 스타일링에 의도치 않은 알 수 없는 에러가 날 수 있다.

그리고 container, row, col 자체에 스타일링을 주지 않도록 하기 위해 gnb-left와 gnb-right를 gnb-wrapper라는 클래스의 태그로 한 번 더 감싸주었다.

<header class="global-header">
  <div class="gnb">
    
	<!-- 그리드 적용하기 위한 태그 -->
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          
          <div class="gnb-wrapper">
            <div class="gnb-left">
              <로고 >
              <메뉴들 >
            </div>
                
            <div class="gnb-right">
              <아이콘들 >
              <버튼 >
            </div>
          </div>
              
        </div>
      </div>  
    </div>
            
  </div>
</header>