Bootstrap - 네비게이션과 탭

소개

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 웹 디자인에서 가장 많이 사용되는 컴포넌트 중 하나를 배울 것입니다: 네비게이션 메뉴와 탭. 이 요소들은 웹사이트의 도로 표지와 같아서, 사용자가 다른 섹션과 콘텐츠로 이동하도록 안내합니다. Bootstrap의 네비와 탭 컴포넌트를 사용하면, 모든 기기에서 작동하는 세련되고 반응형 네비게이션 시스템을 만들 수 있습니다. 그럼 손을 펴고编码을 시작해보겠습니다!

기본 네비게이션

초보부터 시작해보겠습니다. Bootstrap은 .nav 클래스를 사용하여 네비게이션 메뉴를 쉽게 만들 수 있습니다. 다음은 기본 예제입니다:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">연락처</a>
  </li>
</ul>

이 코드는 수평 목록 형식의 네비게이션 링크를 생성합니다. active 클래스는 현재 페이지를 강조하고, disabled 클래스는 현재 클릭할 수 없는 링크를 회색으로 만듭니다.

사용 가능한 스타일

Bootstrap은 네비게이션에 다양한 스타일을 제공합니다. 두 가지 인기 있는 스타일을 살펴보겠습니다.

네비 탭

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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>

이 코드는 콘텐츠를 다른 섹션으로 나누기에 적합한 탭 형식의 네비게이션 메뉴를 생성합니다.

네비 탭let

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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>

탭let 스타일은 네비게이션 링크에 버튼처럼 보이게 합니다.

수평 정렬

네비 아이템의 정렬을 쉽게 변경할 수 있습니다. 다음은 방법입니다:

<ul class="nav justify-content-center">
  <!-- 네비 아이템 여기에 -->
</ul>

<ul class="nav justify-content-end">
  <!-- 네비 아이템 여기에 -->
</ul>

justify-content-center 클래스는 네비 아이템을 중앙에 정렬하고, justify-content-end 클래스는 오른쪽으로 정렬합니다.

Flex 유틸리티 사용

Bootstrap의 flex 유틸리티를 사용하면 네비 레이아웃에 더 많은 제어를 할 수 있습니다:

<nav class="nav flex-column">
  <a class="nav-link active" href="#">활성</a>
  <a class="nav-link" href="#">링크</a>
  <a class="nav-link" href="#">링크</a>
  <a class="nav-link disabled" href="#">비활성</a>
</nav>

이 코드는 flex-column 클래스를 사용하여 수직 네비게이션 메뉴를 생성합니다.

접근성 고려

네비게이션을 만들 때 접근성을 고려하는 것은 매우 중요합니다. 적절한 경우 <nav> 요소를 사용하고, 활성 아이템에 aria-current="page"를 추가합니다:

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">활성</a>
  <!-- 다른 네비 아이템 -->
</nav>

드롭다운 사용

네비게이션에 드롭다운 메뉴를 포함할 수 있습니다. 더 복잡한 네비게이션 구조를 만드는 데 유용합니다:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">활성</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">드롭다운</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">동작</a></li>
      <li><a class="dropdown-item" href="#">다른 동작</a></li>
      <li><a class="dropdown-item" href="#">여기에 다른 것</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">분리된 링크</a></li>
    </ul>
  </li>
  <!-- 다른 네비 아이템 -->
</ul>

이 코드는 드롭다운 메뉴가 포함된 네비게이션을 생성합니다. data-bs-toggle="dropdown" 속성은 드롭다운 기능을 활성화합니다.

탭과 드롭다운

탭 스타일의 네비게이션에 드롭다운을 포함할 수도 있습니다:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">활성</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">드롭다운</a>
    <ul class="dropdown-menu">
      <!-- 드롭다운 아이템 -->
    </ul>
  </li>
  <!-- 다른 네비 아이템 -->
</ul>

탭let과 드롭다운

드롭다운을 포함한 탭let 스타일의 네비게이션도 가능합니다:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">활성</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">드롭다운</a>
    <ul class="dropdown-menu">
      <!-- 드롭다운 아이템 -->
    </ul>
  </li>
  <!-- 다른 네비 아이템 -->
</ul>

자바스크립트 동작

Bootstrap의 자바스크립트 플러그인을 사용하면 네비게이션과 탭에 동적 동작을 추가할 수 있습니다. 다음은 탭과 콘텐츠 패널을 만드는 방법입니다:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">홈</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">프로필</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">홈 콘텐츠 여기에...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">프로필 콘텐츠 여기에...</div>
</div>

이 코드는 클릭할 때마다 다른 콘텐츠 패널을 표시하는 탭을 생성합니다.

접근성

탭을 접근성 있게 만들기 위해 role, aria-controls, aria-selected, aria-labelledby 속성을 사용하세요.

데이터 속성 사용

데이터 속성을 사용하면 자바스크립트를 작성하지 않고 탭 동작을 제어할 수 있습니다:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">홈</button>
  </li>
  <!-- 다른 탭 버튼 -->
</ul>

data-bs-toggle="tab"과 data-bs-target="#home" 속성은 추가적인 자바스크립트 없이 탭 기능을 활성화합니다.

자바스크립트를 통해 활성화

자바스크립트를 사용하여 탭을 활성화할 수도 있습니다:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

이 코드는 각 탭 버튼에 클릭 이벤트 리스너를 추가하여 클릭할 때마다 해당 탭을 활성화합니다.

.fade 효과

탭에.fade 클래스를 추가하면 탭 전환 시 부드러운 효과를 만듭니다:

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

이렇게 하면 탭 간 전환 시 부드러운 효과가 나타납니다.

그리고 이렇게 해서! Bootstrap을 사용하여 네비게이션 메뉴와 탭을 만들고 커스터마이즈하는 방법을 배웠습니다. 연습이 완벽함을 기억하시고, 이 컴포넌트를 자신의 프로젝트에서 실험해 보세요. 행복한 코딩을! |

방법	설명
Tab.getInstance(element)	DOM 요소와 연결된 탭 인스턴스를 가져옵니다
Tab.getOrCreateInstance(element)	DOM 요소와 연결된 탭 인스턴스를 가져오거나 새로 만듭니다
show()	주어진 탭을 선택하고 해당 탭의 패널을 표시합니다
dispose()	요소의 탭을 파괴합니다

Credits: Image by storyset