Pagination
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
활성 상태 (Active)
.active를 추가해서 .page-item이 현재 보고 있는 페이지임을 나타낼 수 있습니다. 현재 페이지에 <a>를 사용한다면 보조 기술을 위해 aria-current="page"를 추가해야 합니다.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#" aria-current="page">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> 같은 비대화형 요소를 사용한다면 aria-current 속성은 생략해도 됩니다.
<li class="page-item active">
<span class="page-link">2</span>
</li>
비활성 상태 (Disabled)
.page-item에 .disabled를 추가하면 클릭할 수 없어 보이게 만들 수 있습니다. .disabled는 링크의 상호작용을 끄기 위해 pointer-events: none을 사용하지만, 이 CSS 속성은 아직 표준화되지 않았고 키보드 탐색을 고려하지 않습니다. 따라서 비활성 링크에는 항상 tabindex="-1"을 추가하고, 그 기능을 완전히 비활성화하려면 커스텀 JavaScript를 사용해야 합니다.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#" aria-current="page">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>
활성 페이지 항목과 마찬가지로, 비활성 <a>를 <span>으로 바꿔 클릭 기능과 키보드 포커스를 제거하면서도 의도한 스타일은 유지할 수 있습니다.
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
크기 (Sizing)
더 크거나 작은 페이지네이션이 필요하다면 .pagination-lg이나 .pagination-sm을 추가해 크기를 조절할 수 있습니다.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" >
<a class="page-link" aria-current="page">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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active">
<a class="page-link" aria-current="page">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>
</ul>
</nav>
정렬 (Alignment)
페이지네이션 컴포넌트의 정렬은 flexbox 유틸리티로 바꿀 수 있습니다. 예를 들어 .justify-content-center를 쓰면:
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">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>
또는 .justify-content-end를 쓰면:
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">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>
CSS
변수 (Variables)
v5.2.0에서 추가됨
Bootstrap의 진화하는 CSS 변수 접근 방식의 일부로, 페이지네이션은 이제 향상된 실시간 커스터마이즈를 위해 .pagination에 로컬 CSS 변수를 사용합니다. CSS 변수의 값은 Sass로 설정되므로 Sass 커스터마이즈도 여전히 지원됩니다.
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
Sass 변수
$pagination-padding-y: .375rem;
$pagination-padding-x: .75rem;
$pagination-padding-y-sm: .25rem;
$pagination-padding-x-sm: .5rem;
$pagination-padding-y-lg: .75rem;
$pagination-padding-x-lg: 1.5rem;
$pagination-font-size: $font-size-base;
$pagination-color: var(--#{$prefix}link-color);
$pagination-bg: var(--#{$prefix}body-bg);
$pagination-border-radius: var(--#{$prefix}border-radius);
$pagination-border-width: var(--#{$prefix}border-width);
$pagination-margin-start: calc(-1 * #{$pagination-border-width}); // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color);
$pagination-focus-color: var(--#{$prefix}link-hover-color);
$pagination-focus-bg: var(--#{$prefix}secondary-bg);
$pagination-focus-box-shadow: $focus-ring-box-shadow;
$pagination-focus-outline: 0;
$pagination-hover-color: var(--#{$prefix}link-hover-color);
$pagination-hover-bg: var(--#{$prefix}tertiary-bg);
$pagination-hover-border-color: var(--#{$prefix}border-color); // Todo in v6: remove this?
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $component-active-bg;
$pagination-disabled-color: var(--#{$prefix}secondary-color);
$pagination-disabled-bg: var(--#{$prefix}secondary-bg);
$pagination-disabled-border-color: var(--#{$prefix}border-color);
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm);
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg);
Sass mixins
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}