Bootstrap을 사용하여 tab 구현하기

[JKOVE]

SPA를 구현할 때 한 페이지 안에서 요청 별 구분을 하기위해 자주 사용되는 디자인이 있다. 그것은 바로 'Tab'이다.

전통적인 방법으로 탭을 구현하는 방법으로는 아래와 같은 방법이 있는데

1. 탭을 눌렀을 때 JavaScript의 InnerHTML을 통해 기존의 데이터를 비워주고, 새로운 값을 추가
2. 탭을 눌렀을 때 CSS의 Display 속성 none을 통해 기존 자료를 감춰주고 새로운 자료를 표시

정도의 방법이 있을것이다. 그러나 위의 방법은 너무나도 번거롭고 상당히 긴 코드를 작성해야만 한다. 그러나 다행스럽게도 BootStrap에서 제공하는 nav-tabs라는 기능을 통해 tab을 쉽게 구현할 수 있다. https://getbootstrap.com/docs/5.3/components/navs-tabs/

Navs and tabs

BootStrap에서 제공하는 Tab은 '탭'과 '탭의 내용' 2부분으로 구분할 수 있다.

BootStrap에서 제공하는 탭

------ 탭에 해당되는 부분 -------

<ul class="nav nav-tabs" role="tablist">
   <li class="nav-item">
      <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">탭1</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">탭2</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">탭3</a>
   </li>
</ul>


------ 탭별 내용에 해당되는 부분 -------
<div class="tab-content">
   <div class="tab-pane fade show active" id="tab1" role="tabpanel">
      <h3>탭1의 내용입니다.</h3>
      <div>이런식으로 다양한 내용을 추가할 수 있습니다.</div>
   </div>
   <div class="tab-pane fade" id="tab2" role="tabpanel">
      <h3>탭2의 내용입니다.</h3>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8i4zPog-0j0JR_yZglxPhTPZXxN2iMTQ3Dw&s">
   </div>
   <div class="tab-pane fade" id="tab3" role="tabpanel">
      <h3>탭3의 내용입니다.</h3>
      <input type="text"><button>입력</button>
   </div>
</div>

탭

BootStrap에서 탭은 ul로 관리되며 ul의 class="nav nav-tabs"를 입력함으로 탭임을 설정할 수 있다. 

탭을 하나씩 만들때마다 class="nav-item" 인 li를 만들어야 하며, 탭간 이동을 위해 하부에 a태그를 생성해야 한다. 

a태그에서 공통적으로 주어져야 하는 속성은 data-toggle="tab" role="tab" 이다. 

a태그에서 각 탭별 구별되어야하는 속성은 id와 href(내용의 id와 통일), aria-controls 이며 개발자가 구별할 수 있는 구별자로 입력하면 된다

가장 주목해야하는 속성은 class로 혹 javascript를 통해서 탭의 이동을 설정하고 싶다면 아래와 같이 설정해야 한다.

기본적으로 탭이 활성화 되어있다면 class에 active라는 클래스명이 추가된다. (비활상화시 삭제)

예를들어 탭1에서 탭2로 이동하는 프로세스를 진행하기 위해서는

1. <a>탭1</a>의 class에서 active 제거
2. <a>탭2</a>의 class에서 active 추가

를 진행해 줘야만, 탭이 이동할것을 구현 할 수 있다.

내용

내용은 div로 이루어져 있으며 내용의 전체를 감싸는 class="tab-content"를 가진 div 내부의 div로 각각 탭의 컨텐트를 구분할 수 있다.

탭은 공통적으로 role="tabpanel" 속성을 가진다. 

각각의 내용을 담는 div는 탭과 수가 일치해야하며 탭과는 id값으로 연결된다.(tab의 href) 

내용에서도 탭과 마찬가지로 class가 가장 중요한 역할을 한다. 일반적으로 모든 테이블은 'tab-pane fade' Class를 지니며 활성화된 탭의 내용만 'show active'의 Class를 추가로 지닌다.

즉 javascript를 통해 탭1에서 탭2로 이동하는 프로세스를 진행하기 위해서는내용은 div로 이루어져 있으며, 내용의 전체를 감싸는 class="tab-content"를 가진 div 내부의 div로 각각 탭의 컨텐트를 구분할 수 있다.

탭은 공통적으로 role="tabpanel" 속성을 가진다.

각각의 내용을 담는 div는 탭과 수가 일치해야 하며, 탭과는 id 값으로 연결된다 (tab의 href).

내용에서도 탭과 마찬가지로 class가 가장 중요한 역할을 한다. 일반적으로 모든 테이블은 tab-pane fade 클래스를 지니며, 활성화된 탭의 내용만 show active의 클래스를 추가로 지닌다.

즉, JavaScript를 통해 탭1에서 탭2로 이동하는 프로세스를 진행하기 위해서는 다음과 같은 과정을 진행해야 한다:

1. 탭1 <div>의 class 'show active'를 제거
2. 탭2 <div>의 class 'show active'를 추가

예제코드

https://codepen.io/JKOVE94/full/XWvPOLG

tabtutorial.html

5.52KB

[ParkYK]

훌륭합니다. 👍

[JKOVE]

감사합니다 :)

[이건희]

감사합니다.

[인상현]

최고에요~~ 대박