[많이쓰는 UI] 탭 뷰

화면을 전환하는 탭 뷰를 만드는 방법은 대표적으로 두가지가 있는데, 하나는 자바스크립트를 사용하지 않는 방법이고, 하나는 자바스크립트를 사용하는 방법입니다. 둘 다, 장단점을 중심으로 말씀드리겠습니다.

자바스크립트 없이 만들기

a 태그와 target 선택자를 이용한 탭뷰 입니다. 자바스크립트 없이 스타일링으로만 구현할 수 있어서 코드가 매우 깔끔합니다. 하지만 탭을 클릭 시에 스크롤이 맨 위로 이동하기 때문에, 화면에 스크롤이 있는 경우에는 부적절할 수 있습니다. 또한, 첫번째 탭을 기본으로 보여주는 옵션을 설정할 수 없습니다.

따라서, 탭을 누르기 전에 기본 화면이 있고, 스크롤이 없는 화면에 적합합니다. (대시보드의 사이드 메뉴)

마크업

상단의 역영에는 탭을 a 태그로 만들어 주고, a 태그의 href 속성에는 탭의 내용이 들어가는 태그의 아이디 값을 # 옆에 붙여줍니다.

<section>
  <a class="tab" href="#tab1">Tab 1</a>
  <a class="tab" href="#tab2">Tab 2</a>
  <a class="tab" href="#tab3">Tab 3</a>
</section>
<section>
  <div id="tab1" class="tabview">
    <h2 class="title">Title 1</h2>
    <div class="content">Content 1</div>
  </div>
  <div id="tab2" class="tabview">
    <h2 class="title">Title 2</h2>
    <div class="content">Content 2</div>
  </div>
  <div id="tab3" class="tabview">
    <h2 class="title">Title 3</h2>
    <div class="content">Content 3</div>
  </div>
</section>

스타일

탭의 내용이 들어가는 탭뷰는 기본적으로 보이지 않도록 해 두고, :target을 이용하여 a 태그를 클릭하였을 경우 해당하는 아이디 값을 가진 탭뷰만 보여지도록 작성합니다.

.tabview {
  display: none;
}
.tabview:target {
  display: block;
}

See the Pen Pure css tab view by 홍지성 (@lnbvocxe) on CodePen.

자바스크립트를 사용하여 만들기 (추천)

이전의 경우와 비교하여 자바스크립트를 사용하기 때문에, 코드의 양이 더 많아집니다. 하지만 탭을 클릭 시, 스크롤이 상단으로 이동하는 것을 방지할 수 있기 때문에, 범용적으로 사용할 수 있는 탭 뷰를 만들 수 있습니다.

마크업

탭을 button 태그로 변경하고, on 클래스가 붙으면, 선택되었다고 표시하기 위해 다른 배경색이 적용될 예정입니다.

data-target 속성은 사용자 정의 속성으로, data-속성명 의 형태로 정의할 수 있으며, 해당하는 탭을 클릭하면 이 값을 통해서 탭뷰를 바꿀 수 있도록 할 예정입니다.

<section>
  <button class="tab on" data-target="#tab1">Tab 1</button>
  <button class="tab" data-target="#tab2">Tab 2</button>
  <button class="tab" data-target="#tab3">Tab 3</button>
</section>
<section>
  <div id="tab1" class="tabview">
    <h2 class="title">Title 1</h2>
    <div class="content">Content 1</div>
  </div>
  <div id="tab2" class="tabview">
    <h2 class="title">Title 2</h2>
    <div class="content">Content 2</div>
  </div>
  <div id="tab3" class="tabview">
    <h2 class="title">Title 3</h2>
    <div class="content">Content 3</div>
  </div>
</section>

스타일

탭에 on 클래스가 붙은 영역만 푸른색(aqua)로 보여지도록 하고, 첫번째 탭 뷰는 시작과 동시에 보여지도록 합니다.

.tab.on {
  background-color: aqua;
}
.tabview {
  display: none;
}
.tabview:nth-child(1) {
  display: block;
}

자바스크립트

탭을 전환하기 위해서 사용하는 탭 뷰 함수입니다. 첫번째 인자로 tab의 클래스를 입력하고, 두번째 인자로 tabview의 클래스를 입력하여 함수를 호출하면 탭 전환 이벤트를 적용할 수 있습니다.

function TabView(tabClass, tabviewClass) {
  document.querySelectorAll("." + tabClass).forEach((dom) => {
    dom.addEventListener("click", (e) => {
      // Tab
      const on = document.querySelector("." + tabClass + ".on");
      if (on) {
        on.classList.remove("on");
      }
      e.currentTarget.className = tabClass + " on";

      // Tabview
      const tabviewId = e.currentTarget.dataset.target;
      document.querySelectorAll("." + tabviewClass).forEach((tabview) => {
        tabview.style.display = "none";
      });
      document.querySelector(tabviewId).style.display = "block";
    });
  });
}

TabView("tab", "tabview");

See the Pen by 홍지성 (@lnbvocxe) on CodePen.