8. 웹사이트의 첫인상, Bootstrap 네비게이션 바 쉽게 디자인하기

안녕하세요! 오늘은 Bootstrap의 네비게이션 바(네브 바) 를 사용해 웹사이트의 메뉴를 디자인하는 방법을 알아보려고 해요. 네비게이션 바는 웹사이트의 주요 메뉴와 페이지를 연결해주는 중요한 요소로, 사이트의 첫인상을 결정짓는 부분이기도 하죠. Bootstrap을 활용하면 기본적인 네비게이션 바부터 드롭다운 메뉴와 반응형 메뉴까지 쉽게 구성할 수 있습니다.

1. 네비게이션 바 기본 구조

Bootstrap에서는 navbar 클래스를 사용해 네비게이션 바를 구성할 수 있어요. 기본적인 네비게이션 바는 아래와 같이 작성합니다:

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">로고</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">홈 <span class="sr-only">(현재)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">소개</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">서비스</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">연락처</a>
      </li>
    </ul>
  </div>
</nav>

 

위 코드에서 중요한 부분들을 살펴보면:

• navbar: 네비게이션 바를 설정하는 기본 클래스입니다.
• navbar-expand-lg: 화면 크기에 따라 네비게이션 바가 확장되도록 설정합니다. lg 외에도 sm, md, xl 등의 옵션을 사용할 수 있어요.
• navbar-light bg-light: 네비게이션 바의 색상을 밝은 톤으로 설정합니다. navbar-dark bg-dark를 사용하면 어두운 네비게이션 바가 됩니다.
• navbar-toggler: 작은 화면에서 네비게이션 바를 축소시키는 토글 버튼을 생성합니다.
• collapse navbar-collapse: 네비게이션 바 항목이 접히고 펼쳐지도록 설정합니다.

2. 드롭다운 메뉴 추가하기

Bootstrap은 드롭다운 메뉴를 간단하게 구성할 수 있도록 dropdown 클래스를 제공해요. nav-item 요소에 dropdown 클래스를 추가하고, dropdown-toggle 클래스를 사용해 버튼을 구성합니다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">로고</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">홈 <span class="sr-only">(현재)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">소개</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          서비스
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">서비스 1</a>
          <a class="dropdown-item" href="#">서비스 2</a>
          <a class="dropdown-item" href="#">서비스 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">연락처</a>
      </li>
    </ul>
  </div>
</nav>

 

 

• dropdown: 드롭다운 메뉴를 포함하는 항목에 추가하는 클래스입니다.
• dropdown-toggle: 드롭다운을 열고 닫는 토글 버튼을 생성합니다.
• dropdown-menu: 드롭다운 목록을 감싸며, 각 드롭다운 항목은 dropdown-item 클래스를 사용해 추가합니다.

3. 반응형 네비게이션 바 설정

Bootstrap은 기본적으로 반응형 네비게이션 바를 지원해요. navbar-expand-* 클래스와 navbar-toggler 버튼을 사용하면 화면 크기에 따라 메뉴가 접히고 펼쳐집니다.

위에서 navbar-expand-lg 클래스를 사용했기 때문에, 화면 크기가 lg 이하일 때 메뉴가 축소됩니다. 작은 화면에서는 navbar-toggler 버튼을 클릭하여 메뉴를 열 수 있어요. navbar-toggler-icon 클래스는 작은 화면에서 햄버거 아이콘을 표시해줍니다.

4. 다양한 색상과 스타일 활용

Bootstrap에서는 다양한 배경색을 적용해 네비게이션 바의 분위기를 바꿀 수 있어요. 기본적인 navbar-light bg-light 외에도 navbar-dark bg-dark, bg-primary, bg-info 등의 클래스를 사용해 색상을 조절할 수 있습니다.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">로고</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">홈 <span class="sr-only">(현재)</span></a>
      <a class="nav-item nav-link" href="#">소개</a>
      <a class="nav-item nav-link" href="#">서비스</a>
      <a class="nav-item nav-link" href="#">연락처</a>
    </div>
  </div>
</nav>

 

이 예제에서는 navbar-dark bg-primary 클래스를 사용해 어두운 배경에 파란색 네비게이션 바를 설정했습니다. 다양한 색상 옵션을 통해 사이트의 분위기에 맞는 네비게이션 바를 구성할 수 있어요.

요약 및 다음 단계

Bootstrap을 사용하면 네비게이션 바를 손쉽게 구성할 수 있으며, 드롭다운 메뉴와 반응형 메뉴도 간편하게 추가할 수 있습니다. navbar, navbar-expand, dropdown 등의 클래스를 활용해 화면 크기와 사용자 경험에 맞는 메뉴를 만들 수 있어요. 다음 단계로는 실제 프로젝트에 네비게이션 바를 적용하고, 다양한 페이지와 연결해 완성도 높은 웹사이트를 구성해보세요!