메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

쪽수 매기기

마지막 업데이트:

번호가 매겨진 페이지, 이전/다음 화살표, 줄임표 간격, 액세스 가능한 라디오 입력 및 페이지 점프 선택을 위한 CSS 전용 Tailwind CSS 페이지 매기기입니다. JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

페이지 매김 구성 요소를 사용하면 사용자는 검색 결과, 데이터 테이블, 기사 아카이브, 제품 목록 등 콘텐츠 페이지 간을 탐색할 수 있습니다. Join 및 Button 구성 요소를 구성하여 구축된 Frutjam 페이지 매기기에는 JavaScript와 추가 CSS가 필요하지 않습니다. 번호가 매겨진 페이지, 이전/다음 화살표, 줄임표 공백, 액세스 가능한 라디오 입력 및 페이지 점프 선택을 지원합니다.

CSS만 가능하며 JavaScript는 필요하지 않습니다. 순수 HTML 및 Tailwind CSS를 사용하여 접근 가능한 페이지 매김을 구축하세요. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React, Next.js 및 모든 스택에서 작동합니다.

수업 유형 설명
join베이스버튼을 연결된 페이지 매김 스트립으로 그룹화합니다.
join-item수정자각 페이지 버튼 또는 조인 내부 입력
btn-activeState현재 페이지를 강조 표시합니다.
btn-disabledState비대화형 줄임표 또는 사용할 수 없는 페이지

기본 페이지 매김

하나의 활성 페이지가 있는 번호가 매겨진 페이지 스트립입니다. 현재 페이지를 강조표시하려면 btn-active를 적용하세요. 서버에서 렌더링된 페이지 링크에는 버튼 대신 앵커 태그를 사용하세요.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
  <button class="join-item btn">4</button>
  <button class="join-item btn">5</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn btn-active">2</button>
  <button className="join-item btn">3</button>
  <button className="join-item btn">4</button>
  <button className="join-item btn">5</button>
</div>

크기

페이지 매김은 모든 버튼 크기를 상속합니다. 소형 테이블에는 btn-xs 또는 btn-sm을 사용하고 터치 우선 인터페이스에는 btn-lg를 사용하세요.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-col gap-3 items-start">
  <div class="join">
    <button class="join-item btn btn-xs">1</button>
    <button class="join-item btn btn-xs btn-active">2</button>
    <button class="join-item btn btn-xs">3</button>
    <button class="join-item btn btn-xs">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-sm">1</button>
    <button class="join-item btn btn-sm btn-active">2</button>
    <button class="join-item btn btn-sm">3</button>
    <button class="join-item btn btn-sm">4</button>
  </div>
  <div class="join">
    <button class="join-item btn">1</button>
    <button class="join-item btn btn-active">2</button>
    <button class="join-item btn">3</button>
    <button class="join-item btn">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-lg">1</button>
    <button class="join-item btn btn-lg btn-active">2</button>
    <button class="join-item btn btn-lg">3</button>
    <button class="join-item btn btn-lg">4</button>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className="flex flex-col gap-3 items-start">
  <div className="join">
    <button className="join-item btn btn-xs">1</button>
    <button className="join-item btn btn-xs btn-active">2</button>
    <button className="join-item btn btn-xs">3</button>
    <button className="join-item btn btn-xs">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-sm">1</button>
    <button className="join-item btn btn-sm btn-active">2</button>
    <button className="join-item btn btn-sm">3</button>
    <button className="join-item btn btn-sm">4</button>
  </div>
  <div className="join">
    <button className="join-item btn">1</button>
    <button className="join-item btn btn-active">2</button>
    <button className="join-item btn">3</button>
    <button className="join-item btn">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-lg">1</button>
    <button className="join-item btn btn-lg btn-active">2</button>
    <button className="join-item btn btn-lg">3</button>
    <button className="join-item btn btn-lg">4</button>
  </div>
</div>

줄임표 사용

넓은 범위의 페이지 사이에 줄임표 간격이 있으면 btn-disabled를 사용하세요. 스크린 리더는 비활성화된 버튼을 건너뛰므로 줄임표에서 aria-hidden="true"와 쌍을 이룹니다.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn">2</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn btn-active">12</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn">99</button>
  <button class="join-item btn">100</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn">2</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn btn-active">12</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn">99</button>
  <button className="join-item btn">100</button>
</div>

이전 / 다음 탐색

화살표 기반 페이지 매김은 정확한 페이지 번호를 표시하는 것이 실용적이지 않은 블로그, 제품 목록 및 페이지가 매겨진 피드에 가장 일반적인 패턴입니다.

화살표 아이콘 포함

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button class="join-item btn">Page 12</button>
  <button class="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button className="join-item btn">Page 12</button>
  <button className="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

동일 너비 이전/다음

조인 컨테이너에서 grid Grid-cols-2 래퍼를 사용하여 두 버튼의 너비를 동일하게 지정합니다. 이는 모바일 우선 레이아웃과 전체 너비 페이지 매기기 막대에 이상적입니다.

1
2
3
4
<div class="join grid grid-cols-2 w-72">
  <button class="join-item btn btn-outline">← Previous</button>
  <button class="join-item btn btn-outline">Next →</button>
</div>

1
2
3
4
<div className="join grid grid-cols-2 w-72">
  <button className="join-item btn btn-outline">← Previous</button>
  <button className="join-item btn btn-outline">Next →</button>
</div>

첫 번째 / 마지막 포함

사용자가 첫 번째 또는 마지막 페이지로 직접 이동할 수 있도록 이중 화살표 버튼을 추가합니다. 수백 페이지의 데이터 테이블에 유용합니다.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-sm">4</button>
  <button class="join-item btn btn-sm btn-active">5</button>
  <button class="join-item btn btn-sm">6</button>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
  <button class="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-sm">4</button>
  <button className="join-item btn btn-sm btn-active">5</button>
  <button className="join-item btn btn-sm">6</button>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
  <button className="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

접근 가능한 라디오 페이지 매김

JavaScript 없이 완전히 키보드로 탐색할 수 있고 CSS 전용 페이지를 선택하려면 type="radio" 입력을 조인 항목으로 사용하세요. 각 입력은 선택한 상태를 기본 양식 상태로 유지하면서 누를 수 있는 버튼 역할을 합니다.

1
2
3
4
5
6
7
<div class="join">
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="2" checked />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

1
2
3
4
5
6
7
<div className="join">
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="2" defaultChecked />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

페이지 점프를 사용한 페이지 매김

조인, 버튼, 선택 기능을 결합하여 사용자가 어떤 페이지로든 직접 이동할 수 있는 컴팩트한 페이지 매김 표시줄을 만들 수 있습니다. 이는 관리 대시보드, CMS 인터페이스, 데이터가 많은 앱에서 흔히 볼 수 있습니다. 선택 자체에는 JavaScript가 필요하지 않습니다. HTMX와 쌍을 이루거나 서버 측 탐색을 위한 양식 제출을 수행합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="join">
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select class="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option selected>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div className="join">
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select className="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

외곽선 스타일

보조 콘텐츠 섹션과 사이드바에 맞게 시각적 무게를 더 가볍게 하려면 모든 버튼에 btn-outline을 사용하세요.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-outline btn-sm">1</button>
  <button class="join-item btn btn-outline btn-sm btn-active">2</button>
  <button class="join-item btn btn-outline btn-sm">3</button>
  <button class="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-outline btn-sm">1</button>
  <button className="join-item btn btn-outline btn-sm btn-active">2</button>
  <button className="join-item btn btn-outline btn-sm">3</button>
  <button className="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 쪽수 매기기 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요