설치

사용법

페이지가 많을 때는 생략 부호(...)를 사용하여 간결하게 표시됩니다.

총 20페이지 중 1페이지

siblingCount로 현재 페이지 양쪽에 표시할 페이지 수를 조정할 수 있습니다. 기본값은 1입니다.

siblingCount = 1 (기본값)

siblingCount = 2

페이지 번호를 직접 입력하여 원하는 페이지로 이동할 수 있습니다.

더 보기 버튼을 클릭하여 다음 페이지를 로드합니다. 무한 스크롤이나 점진적 로딩에 적합합니다.

1페이지 로드됨

페이지가 적을 때는 생략 부호(...) 없이 모든 페이지 번호가 표시됩니다.

100페이지 이상의 경우에도 간결하게 표시됩니다.

총 100페이지 중 1페이지

실제 데이터 목록과 함께 사용하는 예제입니다. 페이지 변경 시 목록이 업데이트됩니다.

항목 1

페이지 1의 항목입니다.

항목 2

페이지 1의 항목입니다.

항목 3

페이지 1의 항목입니다.

항목 4

페이지 1의 항목입니다.

항목 5

페이지 1의 항목입니다.

WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.

Semantic HTML: nav 요소와 적절한 ARIA 속성 사용
Screen Reader: aria-label, aria-current, aria-live 속성으로 현재 페이지와 페이지 변경 사항을 스크린 리더에 알림
키보드 내비게이션: Tab 키로 포커스 이동, Enter/Space로 페이지 변경. 직접 이동 variant는 Enter 키로 입력 가능
입력 검증 (직접 이동): aria-invalid, aria-describedby 속성으로 유효하지 않은 입력 시 시각적, 청각적 피드백 제공
로딩 상태 (목록 확장): aria-busy 속성으로 콘텐츠 로딩 중 상태를 스크린 리더에 전달
터치 타겟: 최소 40px 크기로 모바일 접근성 보장
시각적 피드백: 현재 페이지, 호버, 포커스, 에러 상태를 명확히 표시