Pagination

Pagination은 콘텐츠 또는 데이터를 여러 페이지로 분할하고 다음 또는 이전 페이지로 이동하는 컨트롤입니다.
제공되는 정보의 양과 사용자의 현재 시점을 알려줌으로써 사용자가 혼란 없이 정보를 원활하게 이용할 수 있도록 구성합니다.

기본 가이드

nav, a 태그를 사용하여 구조를 만듭니다.

접근성 가이드

aria-label="페이지네이션"
페이지 이동이 불필요한 경우 이동 a태그를 없애거나, 비활성화 (tabindex="-1")합니다.
현재 페이지에는 span 태그로 변경, aria-current="page" 를 추가합니다.
.hide-txt 로 페이지 이동 기능을 기재해줍니다.

Pagination

컴포넌트 클래스 : .component-pagination

<nav class="component-pagination" aria-label="페이지네이션">
  <a href="#" class="pagination-item first"><span class="hide-txt">첫 페이지로 이동</span></a>
  <a href="#" class="pagination-item prev"><span class="hide-txt">이전 페이지로 이동</span></a>
  <span class="pagination-item" aria-current="page">1</span>
  <a href="#" class="pagination-item">2</a>
  <a href="#" class="pagination-item">3</a>
  <a href="#" class="pagination-item">4</a>
  <a href="#" class="pagination-item">5</a>
  <a href="#" class="pagination-item next"><span class="hide-txt">다음 페이지로 이동</span></a>
  <a href="#" class="pagination-item last"><span class="hide-txt">마지막 페이지로 이동</span></a>
</nav>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Pagination Mini

컴포넌트 클래스 : .component-pagination-mini

<nav class="component-pagination-mini" aria-label="페이지네이션">
  <a href="#" class="pagination-item prev"><span class="hide-txt">이전 페이지로 이동</span></a>
  <span class="pagination-item-group">
    <span class="pagination-item" aria-current="page">1</span>
    <span class="pagination-item" aria-hidden="true">/</span>
    <span class="pagination-item">100</span>
  </span>
  <a href="#" class="pagination-item next"><span class="hide-txt">다음 페이지로 이동</span></a>
</nav>

/* css 주석 사용시 이 주석사용 부탁드립니다. */