← 목록으로

페이지네이션

긴 목록을 여러 페이지로 나누어 표시하는 네비게이션 컴포넌트입니다.

1. Full 페이지네이션 (중앙 정렬)

2. 중간 페이지 (생략 표시 양쪽)

Showing 51-60 of 200 results

3. Simple 페이지네이션 (이전/다음만)

4. Compact 페이지네이션

5. 왼쪽 정렬 + 컨트롤

Item 1
Sample content for pagination demonstration
Item 2
Sample content for pagination demonstration
Item 3
Sample content for pagination demonstration
Item 4
Sample content for pagination demonstration
Item 5
Sample content for pagination demonstration

접근성 특징

  • <nav aria-label="Pagination">로 네비게이션 목적 명시
  • aria-current="page"로 현재 페이지 표시
  • aria-label로 각 버튼의 목적 설명
  • aria-disabled로 비활성화 상태 표시
  • 키보드 네비게이션 완전 지원 (Tab, Enter, Space)
  • 포커스 표시 명확히 구현

구현 권장사항

  • 항상 첫 페이지, 마지막 페이지, 현재 페이지 표시
  • 현재 페이지 ±1~2 범위의 페이지 번호 표시
  • 페이지 간 간격이 2 이상이면 생략 기호(...) 사용
  • 모바일에서는 페이지 번호를 줄이고 이전/다음 버튼 강조
  • URL 쿼리 파라미터로 현재 페이지 상태 유지 (북마크/공유 가능)

디자인 프롬프트