HTML 코드
<nav class="pg">
<button>‹</button><button>1</button><span>…</span><button>4</button><button class="on">5</button><button>6</button><span>…</span><button>12</button><button>›</button>
</nav>
<style>
.pg{display:flex;gap:4px;align-items:center}
.pg button{font:inherit;min-width:34px;height:34px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px}
.pg .on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.pg span{color:var(--muted);padding:0 4px}
</style>AI에게 이렇게 요청하세요
게시판 목록 아래에 이전/다음 버튼과 현재 페이지 앞뒤 2개씩 번호, 나머지는 …으로 줄인 페이지네이션 넣어줘
<nav class="pg">
<button>‹</button><button>1</button><span>…</span><button>4</button><button class="on">5</button><button>6</button><span>…</span><button>12</button><button>›</button>
</nav>
<style>
.pg{display:flex;gap:4px;align-items:center}
.pg button{font:inherit;min-width:34px;height:34px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px}
.pg .on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}
.pg span{color:var(--muted);padding:0 4px}
</style>언제 쓰나
게시판, 검색 결과, 관리자 표처럼 항목이 많아 한 번에 보여주기 어려운 목록.
비슷한 것과 차이
- 무한 스크롤: 끝까지 내리면 자동으로 더 불러옴 → SNS 피드에 적합
- 더보기 버튼: 누를 때마다 아래에 이어 붙임
- 특정 위치로 다시 돌아와야 하는 목록은 페이지네이션이 유리