# 페이징 (paging)

| 항목 | 경로 |
|------|------|
| 데모 | `paging.html` |
| CSS | `css/common.css` (`.paging` / `.paging2` / `.paging3`) |
| JS | 없음 |
| 이미지 | 아래 표 참고 |

---

## 스타일별

| 클래스 | 이미지 | 현재 페이지 |
|--------|--------|-------------|
| `.paging` | `paging_first/prev/next/last.png` | `li.on` + `aria-current="page"` |
| `.paging2` | `paging2_*.png` | `a.on` |
| `.paging3` | `paging_*.png` (아이콘) | `li.active` + `aria-current` |

```html
<nav class="paging" aria-label="게시물 목록 페이지">
  <span><a href="#none" class="btn-pg first" title="처음 페이지로 이동">처음</a></span>
  <span><a href="#none" class="btn-pg prev" title="이전 페이지로 이동">이전</a></span>
  <ul class="pg-num">
    <li class="on"><a href="#none" title="1 페이지" aria-current="page">1</a></li>
    <li><a href="#none" title="2 페이지">2</a></li>
  </ul>
  <span><a href="#none" class="btn-pg next" title="다음 페이지로 이동">다음</a></span>
  <span><a href="#none" class="btn-pg last" title="마지막 페이지로 이동">마지막</a></span>
</nav>
```

- 아이콘 버튼은 화면에 글자가 안 보여도 `title` / `aria-label` 필수
- 전체 마크업: `paging.html`