Tab + Pagination

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/tab.css" />
<link rel="stylesheet" href="/guide/css/components/pagination.css" />

<script src="/guide/js/components/tab.js"></script>
<script src="/guide/js/components/pagination.js"></script>

Live

탭을 전환하고 페이지네이션을 클릭해 동작을 확인하세요. 각 탭의 페이지 상태는 독립적으로 유지됩니다.

  • 디자인 시스템 구축 가이드 2026-05-30
  • 컴포넌트 토큰 설계 원칙 2026-05-28
  • 반응형 그리드 시스템 적용기 2026-05-25
  • 접근성 체크리스트 정리 2026-05-22
  • 다크모드 토큰 전환 방법 2026-05-20

Code

<div class="tab">
  <div class="tab__header" role="tablist">
    <button class="tab__btn tab__btn--active" role="tab" aria-selected="true" aria-controls="panel-all">전체</button>
    <button class="tab__btn" role="tab" aria-selected="false" aria-controls="panel-mine">내 게시물</button>
  </div>

  <div class="tab__panel tab__panel--active" id="panel-all" role="tabpanel">
    <!-- 목록 콘텐츠 -->
    <nav class="pagination" aria-label="전체 목록 페이지">
      <button class="pagination__btn pagination__btn--nav" data-action="first">«</button>
      <button class="pagination__btn pagination__btn--nav" data-action="prev">‹</button>
      <button class="pagination__btn pagination__btn--active" data-page="1" aria-current="page">1</button>
      <button class="pagination__btn" data-page="2">2</button>
      <button class="pagination__btn" data-page="3">3</button>
      <button class="pagination__btn pagination__btn--nav" data-action="next">›</button>
      <button class="pagination__btn pagination__btn--nav" data-action="last">»</button>
    </nav>
  </div>

  <div class="tab__panel" id="panel-mine" role="tabpanel" hidden>
    <!-- 목록 콘텐츠 -->
    <nav class="pagination" aria-label="내 게시물 페이지">
      <!-- 동일 구조 -->
    </nav>
  </div>
</div>

<script src="/guide/js/components/tab.js"></script>
<script src="/guide/js/components/pagination.js"></script>