# 검색 (통합 검색)

| 항목 | 경로 |
|------|------|
| 데모 | `search.html` |
| CSS | `css/search.css` (+ `form.css` · `button.css` · `common.css` 페이징) |
| JS | 없음 (제출·결과 갱신은 서버/앱) |

---

## 구성

| 블록 | 클래스 | 역할 |
|------|--------|------|
| 래퍼 | `.search` | 검색 페이지 공통 |
| 폼 | `.search-form` + `role="search"` | 구분·검색어·버튼 |
| 인기어 | `.search-popular` | 바로가기 링크 |
| 결과 | `.search-result` | 건수 · 목록 · 페이징 |
| 없음 | `.search-empty` | 0건 안내 |
| 헤더형 | `.search-bar` | 간단 검색(라벨 `.dn`) |

---

## 검색 폼

```html
<section class="search" aria-label="통합 검색">
  <form class="search-form" role="search" aria-label="사이트 검색"
    action="./search.html" method="get">
    <div class="search-form__row">
      <div class="search-form__scope">
        <label for="searchScope" class="form-label">검색 범위</label>
        <div class="form-field select-box h48">
          <select id="searchScope" name="scope" class="wide">
            <option value="all" selected>전체</option>
            <option value="board">게시판</option>
            <option value="menu">메뉴</option>
          </select>
        </div>
      </div>
      <div class="search-form__keyword">
        <label for="searchKeyword" class="form-label">검색어</label>
        <div class="form-field">
          <input type="search" id="searchKeyword" name="q"
            class="form-input" value="웹접근성" required autocomplete="off">
        </div>
      </div>
      <div class="search-form__btn">
        <button type="submit" class="mbtn black">검색</button>
      </div>
    </div>
  </form>
</section>
```

- `role="search"` + 필드 `label` (화면 숨김 시 `label.dn`)
- `type="search"` 권장
- select 라벨은 검색 구분과 같이 **위·아래** (`.select-box` 밖에 `label`)

---

## 결과

```html
<section class="search-result" aria-labelledby="searchResultTit">
  <div class="search-result__head">
    <h3 id="searchResultTit" class="search-result__tit">검색 결과</h3>
    <p class="search-result__count" aria-live="polite">
      <span class="search-result__query">웹접근성</span>
      검색결과 총 <strong>24</strong>건
    </p>
  </div>
  <ul class="search-result__list">
    <li class="search-result__item">
      <p class="search-result__item-tit">
        <a href="./board.html#board-view"><mark>웹접근성</mark> 품질점검 안내</a>
      </p>
      <nav class="search-result__path" aria-label="위치">
        <ol><li>홈</li><li>게시판</li><li>공지사항</li></ol>
      </nav>
      <p class="search-result__snippet">…본문 요약 <mark>웹접근성</mark>…</p>
      <p class="search-result__meta"><time datetime="2026-07-20">2026.07.20</time></p>
    </li>
  </ul>
  <nav class="paging3" aria-label="검색 결과 페이지">…</nav>
</section>
```

- 건수: `aria-live="polite"` (결과 갱신 시 알림)
- 하이라이트: `<mark>` (색만으로 구분하지 말 것)
- 0건: `.search-empty` + `role="status"`

---

## 접근성 체크

- [ ] `role="search"` · 모든 입력에 `label`
- [ ] 결과 영역 제목(`h2`/`h3`) · 건수 `aria-live`
- [ ] 결과 링크에 충분한 이름(제목)
- [ ] 인기 검색어는 실제 검색 URL로
- [ ] 포커스 `:focus-visible`

---

## 복사 패키지

```
css/search.css
css/form.css
css/button.css
css/common.css          ← 페이징
마크업: search.html
```