Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

부트스트랩 프레임워크로 탭 만들기: 단계별 완벽 가이드

탭(Tab)은 화면 공간을 추가로 사용하지 않고도 여러 정보 패널을 전환하며 볼 수 있게 해주는 사용자 인터페이스(UI) 요소입니다. 바인더나 책의 탭처럼 페이지에서 더 많은 정보가 있는 위치를 표시하며, 각 탭에는 해당 패널에 담긴 내용을 나타내는 라벨이 붙습니다. 탭을 클릭하면 그 탭과 연결된 정보가 화면에 나타납니다.

부트스트랩(Bootstrap)은 이러한 탭을 빠르고 손쉽게 만들 수 있도록 도와주는 프레임워크입니다. 이 글에서는 부트스트랩 개발 환경을 준비하는 방법, 탭이 필요한 이유, 그리고 실제로 동작하는 부트스트랩 탭 예제까지 차근차근 살펴보겠습니다.

시작하기

웹 페이지에서 탭을 정상적으로 표시하려면 먼저 필요한 의존성(dependency)을 모두 갖춰야 합니다. 이 프로젝트에는 Bootstrap, Popper.js, jQuery 세 가지가 필요합니다. 부트스트랩 공식 문서의 Quick Start 페이지를 참고하면 의존성을 손쉽게 준비할 수 있습니다.

필요한 패키지를 연결하는 방법은 자유롭게 선택할 수 있지만, 초보자에게 가장 간편한 방법은 jQuery, Popper.js, Bootstrap을 CDN(콘텐츠 전송 네트워크)으로 불러오는 것입니다. 이때 <script> 태그의 순서에 주의해야 합니다. 스크립트 로딩 순서가 결과에 영향을 주기 때문입니다.

준비가 끝났다면 이제 본격적으로 시작해 보겠습니다!

부트스트랩 공식 문서로 탭 만들기

부트스트랩의 “Introduction/Getting Started” 페이지 왼쪽에는 다양한 항목으로 연결되는 사이드바가 있습니다. 사이드바에서 “Components” 링크를 찾아 클릭해 보세요. 그러면 부트스트랩이 제공하는 수많은 컴포넌트 중 첫 번째인 “Alerts” 문서로 이동합니다. 사이드바를 다시 보면 사용 가능한 모든 컴포넌트 목록으로 업데이트된 것을 확인할 수 있습니다.

여기서 “Navs” 컴포넌트를 클릭하세요. 탭을 만들 때 필요한 정보가 모두 이 문서에 담겨 있습니다.

기본 내비게이션(Base Nav)부터 시작하기

부트스트랩 문서에 제공된 코드를 활용하려면 페이지 상단의 기본 nav 예제부터 시작하는 것이 좋습니다. 이 예제는 nav 클래스 자체에는 특별한 스타일링이 포함되어 있지 않다는 점을 보여줍니다.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

탭 형태로 만들려면 첫 줄의 class 속성에 nav-tabs 클래스를 추가하면 됩니다.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<div> ***** 탭 콘텐츠가 <div>로 들어갈 자리 ***** </div>

UI 관점에서는 이제 탭이 완성되었습니다. 하지만 아직 클릭했을 때 콘텐츠가 전환되는 기능은 없습니다. 다음 단계에서 이 기능을 추가하는 방법을 알아보겠습니다.

ARIA 규격에 맞춰 role 속성 추가하기

웹 접근성 표준인 ARIA 규격을 준수하려면 각 태그에 role 속성을 추가해야 합니다.

  • <ul> 요소에는 role="tablist"
  • <a> 요소에는 role="tab"
  • 각 탭의 내용을 감싸는 <div>에는 role="tabpanel"

탭 콘텐츠와 연결하는 속성 추가하기

지금까지의 코드 구조를 큰 그림으로 보면, 링크를 담당하는 블록과 콘텐츠를 담당하는 블록이 서로 분리되어 있습니다. 탭과 콘텐츠를 연결하려면 몇 가지 작업이 더 필요합니다. 먼저 <ul> 블록부터 살펴보겠습니다.

  1. 모든 <a> 요소에 id를 지정합니다. 이름은 “탭이름-tab” 형식을 따릅니다(예: home이라는 탭이라면 id는 “home-tab”).
    1. 탭 콘텐츠(tabpanel)로 사용될 <div> 블록에는 해당 탭의 이름을 그대로 id로 사용합니다(home 탭과 연결된 콘텐츠라면 id는 “home”).
  2. 각 탭의 href 속성에 연결된 콘텐츠의 id를 지정합니다. home 탭을 예로 들면 <a> 태그의 href는 “#home”이 됩니다.
  3. 무엇을 토글(toggle)할지 나타내는 data-toggle 속성을 추가합니다. 이 경우 값은 “tab”입니다.
  4. 마지막으로 스크린 리더 같은 보조 기술을 사용하는 사용자를 돕기 위한 aria 속성들을 추가합니다.

여기까지 진행하면 링크를 담은 <ul> 요소는 다음과 같은 모습이 됩니다.

<ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
       <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab"  href="#a">A</a>
     </li>
     <li class="nav-item">
       <a id="b-tab" class="nav-link" role="tab" data-toggle="tab"  href="#b">B</a>
     </li>
     <li class="nav-item">
       <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a>
     </li>
     <li class="nav-item">
       <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a>
     </li>
   </ul>

다음은 tab-content 영역입니다. 이 부분은 링크를 담고 있는 <ul> 블록과 별개의 코드 블록입니다.

  1. 탭 콘텐츠 div들이 하나의 외부 div 안에 모두 감싸져 있는지 확인하세요. 이 외부 div가 각 콘텐츠 div의 컨테이너 역할을 합니다. 또한 각 하위 div의 id는 앞선 블록의 탭 제목과 일치해야 합니다.
  2. 적절한 ARIA 속성이 추가되었는지 확인하세요. 여기서는 aria-selected와 aria-labelledby를 사용합니다. aria-labelledby는 해당 탭 제목의 id와 일치하고, aria-controls는 그 div 요소 자신의 id와 일치합니다.
  3. 마지막으로 class 속성에 최소한 “show” 클래스를 포함하세요. show는 특정 탭을 클릭했을 때 올바른 패널이 표시되도록 돕는 부트스트랩 클래스입니다. 클래스 이름의 “active”는 현재 표시 중인 패널을 의미하며, “fade”는 탭을 클릭할 때 패널이 서서히 나타나고 사라지는 애니메이션 효과를 적용한다는 뜻입니다.

탭 콘텐츠 div 하나의 코드는 다음과 같습니다.

<div class="tab-content" style="padding: 20px;">
     <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
</div>

이 코드를 참고해 나머지 탭 콘텐츠 div들도 만들어 보세요. 진행이 막힌다면 아래 전체 코드를 확인하면 큰 도움이 됩니다.

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <!-- Bootstrap stylesheet -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 </head>
 <body>
   <!-- tab headings -->
   <ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
       <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a>
     </li>
     <li class="nav-item">
       <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a>
     </li>
     <li class="nav-item">
       <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a>
     </li>
     <li class="nav-item">
       <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a>
     </li>
   </ul>
   <!-- tab contents -->
   <div class="tab-content" style="padding: 20px;">
     <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
     <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div>
     <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div>
     <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div>
   </div>
   <!-- jquery cdn -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
   <!-- popper js cdn -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
   <!-- bootstrap cdn -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </body>
</html>

마치며

축하합니다! 부트스트랩으로 탭 내비게이션 컴포넌트를 성공적으로 만들었습니다. 다음에는 필(pill) 스타일 내비게이션 컨테이너 만들기에도 도전해 보세요. 즐거운 코딩 되세요!