# 브레드크럼 / 페이지 타이틀

| 항목 | 경로 |
|------|------|
| 데모 | `breadcrumb.html` |
| CSS | `css/breadcrumb.css` + `css/layout.css` (`#location` · `.ptitle`) |
| JS | 없음 |

---

## 브레드크럼 (권장)

```html
<nav id="location" class="breadcrumb" aria-label="현재 위치">
  <ol>
    <li><a href="./index.html">홈</a></li>
    <li><a href="./board.html">게시판</a></li>
    <li><span aria-current="page">공지사항</span></li>
  </ol>
</nav>
```

| 항목 | 권장 |
|------|------|
| 랜드마크 | `nav` + `aria-label="현재 위치"` (또는 “빵부스러기”) |
| 목록 | **`ol`** (순서 있는 경로) — 기존 `ul`도 스타일 호환 |
| 현재 페이지 | 링크 말고 `span` + **`aria-current="page"`** |
| 구분 기호 | CSS `li+li::before` (`>`) — 장식용, DOM에 텍스트로 넣지 않음 |

- 홈만 있는 1단계는 보통 숨기거나 생략
- 마지막만 현재 페이지로 표시 (중간에 `aria-current` 두지 않음)

---

## 페이지 타이틀

### 실서비스 (권장)

```html
<div class="page-head">
  <h1 class="page-title">공지사항</h1>
  <p class="page-desc">기관 소식과 주요 안내를 확인하세요.</p>
</div>
```

- 페이지당 **`h1`은 하나** (사이트 로고가 링크면 로고는 `p`/`div`, 본문 제목이 `h1`)
- 부제·설명이 있으면 `.page-desc`

### 이 킷 데모 페이지

```html
<div class="ptitle-head">
  <h2 class="ptitle">공지사항</h2>
  <p class="ptitle-docs"><a href="./docs/board.md">매뉴얼 · docs/board.md</a></p>
</div>
```

- 킷 허브 GNB가 있어 데모에서는 `h2.ptitle` 사용
- `.page-head` / `.page-title` 과 시각적으로 같은 계열

---

## `#location` 과 `.breadcrumb`

| 선택자 | 용도 |
|--------|------|
| `#location` | 레이아웃 슬롯(기존 페이지) |
| `.breadcrumb` | 컴포넌트 클래스(복사·데모) |
| 둘 다 | `ol`/`ul` · `aria-current` 스타일 공유 (`layout.css`) |

---

## 접근성 체크

- [ ] `nav`에 구분용 `aria-label`
- [ ] 현재 페이지 `aria-current="page"` (링크가 아닌 텍스트)
- [ ] 구분 `>` 를 목록 항목 텍스트로 넣지 않음
- [ ] 페이지 `h1`(또는 킷의 `h2.ptitle`)과 브레드크럼 현재 항목 이름 일치
- [ ] 링크 `:focus-visible`

---

## 복사 패키지

```
css/layout.css          ← #location / .ptitle
css/breadcrumb.css      ← .breadcrumb / .page-head (이식·변형)
마크업: breadcrumb.html
```