내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
GitHub에서 보기

Pagination(페이지네이션)

여러 페이지에 일련의 관련 내용이 있음을 나타내는 페이지네이션을 사용한 문서와 예제입니다.

Overview

페이지네이션은 큰 블럭의 링크를 사용하고 있어서, 넓은 클릭 영역을 제공하면서 쉽게 확장할 수 있습니다. 리스트의 HTML 요소로 구성되며 스크린 리더는 이용 가능한 링크의 수를 알려줄 수 있습니다. <nav> 요소를 사용해, 그것을 스크린 리더나 기타 지원 기술에서 내비게이션 영역으로서 식별합니다.

게다가 페이지에는 여러 개의 내비게이션 영역이 있을 가능성이 높기 때문에, 그 목적을 반영하기 위해서 <nav>aria-label 을 붙히는 것을 권장합니다. 예를 들어 페이지네이션 컴포넌트를 사용해 일련의 검색 결과 사이를 이동하는 경우 적절한 라벨은 aria-label="Search results pages" 가 됩니다.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Working with icons

페이지네이션 링크에 텍스트 대신에 아이콘이나 심벌을 사용하고 싶다면, aria 속성을 사용하여 스크린 리더를 적절히 지원하도록 하세요.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

페이지네이션 링크는, 다양한 상황에 따라 커스터마이즈 할 수 있습니다. 클릭할 수 없는 링크에는 .disabled 를, 현재의 페이지에는 .active 를 사용합니다.

.disabled 클래스는 pointer-events: none 를 사용하여 <a> 의 링크 기능을 무효화 하려고 하고 있습니다만, 이 CSS 속성은 아직 표준화 되어 있지 않고, 키보드 내비게이션을 고려하고 있지 않습니다. 그래서 비활성화된 링크에는 항상 tabindex="-1" 를 추가하고 그 기능을 완전히 비활성화하기 위헤 커스텀 JavaScript 를 사용해야 합니다.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

활성화된 앵커나 비활성화된 앵커를 <span> 으로 교체하거나, 이전/다음의 화살표의 경우 앵커를 생략하거나 해서 원하는 스타일로 유지한 채 클릭 기능을 삭제하거나 키보드 포커스를 막을 수 있습니다.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sizing

크기 변경을 원할 경우 .pagination-lg.pagination-sm 를 추가해 주세요.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Alignment

Flexbox utilities 를 사용해 페이지네이션의 위치를 변경합니다.

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>