# 게시판 (목록 / 상세)

| 항목 | 경로 |
|------|------|
| 데모 | `board.html` |
| CSS | `css/board.css` (+ `table.css` · `form.css` · `button.css` · `common.css` 페이징) |
| 이미지 | `img/download.svg` (표형 첨부) · `img/gallery/gallery_0n.svg` (갤러리 썸네일) |
| JS | 없음 (검색·페이징은 서버/앱 연동) |
| 예시 목록 | `notice.html` · `press.html` (표) · `gallery.html` (갤러리) |
| 관련 | 단독 첨부/관련글 → [related.md](./related.md) |

---

## 구성

| 블록 | 클래스 | 역할 |
|------|--------|------|
| 래퍼 | `.board` | 목록·상세 공통 |
| 검색 | `.board-search` | `role="search"` 권장 |
| 건수·개수 | `.board-util` | “전체 N건” + 개수 선택 |
| 목록 표 | `.tbl-list` (table.css) | caption · scope |
| 목록 갤러리 | `.board-gallery` | 썸네일 그리드 |
| 상세 | `.board-view` | 제목 · 메타 · 본문 · 첨부 |
| 이전/다음 | `.board-nav` | 인접 글 이동 |
| 버튼 | `.board-btns` + `.btn-wrap` | 목록으로 |

---

## 목록 마크업 (요약)

```html
<div class="board">
  <form class="board-search" role="search" aria-label="공지사항 검색">
    <div class="board-search__row">
      <div class="board-search__field">
        <label for="boardSearchType" class="form-label">검색 구분</label>
        <div class="form-field select-box h48">
          <select id="boardSearchType" name="searchType" class="wide">…</select>
        </div>
      </div>
      <div class="board-search__keyword">
        <label for="boardSearchKeyword" class="form-label">검색어</label>
        <div class="form-field">
          <input type="search" id="boardSearchKeyword" name="q" class="form-input">
        </div>
      </div>
      <div class="board-search__btn">
        <button type="submit" class="mbtn black">검색</button>
      </div>
    </div>
  </form>
  <div class="board-util">
    <p class="board-util__count">전체 <strong>128</strong>건</p>
    <div class="board-util__size">
      <label for="boardPageSize" class="dn">목록 개수</label>
      <div class="form-field select-box h48">
        <select id="boardPageSize" name="size" class="wide">
          <option value="10" selected>10개씩</option>
          <option value="20">20개씩</option>
          <option value="30">30개씩</option>
          <option value="50">50개씩</option>
        </select>
      </div>
    </div>
  </div>
  <div class="tbl-list" style="--tbl-min-width:72rem;">
    <table>
      <caption>공지사항 목록</caption>
      <thead>…</thead>
      <tbody>
        <tr class="is-notice">
          <td class="num"><span class="board-badge">공지</span></td>
          <td class="sbj">
            <a href="./board.html#board-view">제목
              <span class="board-badge new">N<span class="dn">새 글</span></span>
            </a>
          </td>
          …
        </tr>
      </tbody>
    </table>
  </div>
  <nav class="paging3" aria-label="공지사항 목록 페이지">…</nav>
</div>
```

- 공지 행: `tr.is-notice` + `.board-badge`
- 새 글: `.board-badge.new` + `.dn`으로 “새 글”
- 첨부: `img/download.svg` + `.dn`「첨부파일 있음」 (아이콘만 쓰지 않음)
- 목록 개수: `.board-util__size` + `select` · 화면 라벨은 `label.dn` (제거 금지)
- 현재 페이지: `aria-current="page"`
- 데모 목록은 **10개씩** 기준(1페이지 10행)

---

## 갤러리형 목록

검색·건수 UI는 표형과 같고, 목록만 `.board-gallery`로 바꿉니다.

```html
<ul class="board-gallery" data-cols="4">
  <li class="board-gallery__item">
    <a class="board-gallery__link" href="./view.html">
      <span class="board-gallery__thumb">
        <img src="…" alt="" width="400" height="300">
      </span>
      <span class="board-gallery__body">
        <span class="board-gallery__tit">제목
          <span class="board-badge new">N<span class="dn">새 글</span></span>
        </span>
        <span class="board-gallery__meta">
          <time datetime="2026-07-20">2026.07.20</time>
          <span>조회 312</span>
        </span>
      </span>
    </a>
  </li>
</ul>
```

- 열 수: **`data-cols="2"` ~ `"6"`** (기본 4). HTML에서 숫자만 바꾸면 됨
- 좁은 화면: `data-cols`보다 많지 않게 자동 축소 (≈1100px↓ max 3 · 720px↓ max 2 · 420px↓ 1열)
- 썸네일+제목+메타를 **하나의 `a`**로 감쌈 (이미지/제목 이중 링크 금지)
- 제목이 보이면 썸네일 `alt=""` (장식). 이미지만 링크하면 `alt`에 목적 포함
- 이미지 없음: `.board-gallery__thumb.is-empty`
- 데모 썸네일: `img/gallery/gallery_01.svg` ~ `gallery_07.svg` (400×300)
- 예시: `gallery.html` · 데모 앵커 `#board-gallery`

---

## 상세 마크업 (요약)

```html
<article class="board board-view" aria-labelledby="boardViewTit">
  <header class="board-view__head">
    <h3 id="boardViewTit" class="board-view__tit">제목</h3>
    <dl class="board-view__meta">
      <div><dt>작성일</dt><dd><time datetime="2026-07-20">2026.07.20</time></dd></div>
      <div><dt>작성자</dt><dd>관리자</dd></div>
      <div><dt>조회</dt><dd>128</dd></div>
    </dl>
  </header>
  <div class="board-view__body">…</div>
  <section class="board-view__files" aria-labelledby="boardFilesTit">
    <h4 id="boardFilesTit" class="board-view__files-tit">첨부파일</h4>
    <ul>
      <li><a href="#none">파일명.pdf <span class="size">(128KB)</span></a></li>
    </ul>
  </section>
  <nav class="board-nav" aria-label="이전글 다음글">
    <ul class="board-nav__list">
      <li>
        <span class="board-nav__label">이전글</span>
        <a class="board-nav__link" href="#none">이전 글 제목</a>
      </li>
      <li>
        <span class="board-nav__label">다음글</span>
        <span class="board-nav__empty">다음글이 없습니다.</span>
      </li>
    </ul>
  </nav>
  <div class="board-btns btn-wrap center">
    <a href="./board.html#board-list" class="mbtn black">목록</a>
  </div>
</article>
```

---

## 접근성 체크

- [ ] 검색 폼 `role="search"` + 필드 `label`
- [ ] 표형: `caption` · `th[scope]`
- [ ] 갤러리: 카드당 링크 하나 · 제목 보이면 `img alt=""`
- [ ] 제목 링크만으로도 의미 파악 가능
- [ ] 첨부·새글·공지 상태 텍스트 제공
- [ ] 목록 개수: `select` + `label.dn` (라벨 삭제·placeholder만으로 대체 금지)
- [ ] 상세 제목 계층(`h2`/`h3`) · 메타는 `dl`
- [ ] 이전/다음·목록 버튼 키보드 초점·`:focus-visible`
- [ ] 결과 없음: `.board-empty` 문구

---

## 복사 패키지

```
css/board.css
css/table.css
css/form.css          ← 검색 필드
css/button.css        ← 목록/검색 버튼
css/common.css        ← 페이징
마크업: board.html
```