# 테이블 (table)

| 항목 | 경로 |
|------|------|
| 데모 | `table.html` |
| CSS | `css/table.css` (+ 입력/체크면 `form.css`) |
| JS | `common.js` — `.chk-all` / `.chk-item` 동기화 |
| 이미지 | `img/table_view_sample.svg` (tbl-view 본문 예시) |

---

## 종류

| 클래스 | 용도 |
|--------|------|
| `.tbl-list` | 목록 |
| `.tbl-list.no-wrap` | 셀 줄바꿈 금지 (가로 스크롤) |
| `.tbl-list` + `--tbl-min-width` | 표 최소 너비 (모바일 가로 스크롤) |
| `.tbl-list.body-scroll` | thead 고정 + 본문 세로 스크롤 |
| `.tbl-view` | 상세보기 (이미지: `.tbl-view-media`, 유튜브: `.tbl-view-video` 16:9) |
| `.tbl-input` | 입력 폼형 (≤640px th→td 세로) |

```html
<div class="tbl-list">
  <table>
    <caption>목록 설명</caption>
    <thead>
      <tr>
        <th scope="col">제목</th>
      </tr>
    </thead>
    <tbody>...</tbody>
  </table>
</div>
```

- `caption` 필수 · `th`에 `scope="col|row"`

### tbl-view 유튜브 (반응형)

```html
<div class="tbl-view-video">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="영상 제목"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>
```

- `.tbl-view-video` — `aspect-ratio: 16 / 9`, iframe absolute로 채움
- `title` 필수 · 자동재생 지양 · `youtube-nocookie.com` 권장
- 단독 동영상 패턴(자막·스크립트): [video.md](./video.md)

---

## 최소 너비 (모바일 가로 스크롤)

```html
<div class="tbl-list" style="--tbl-min-width:72rem;">
```

- `--tbl-min-width`보다 화면이 좁으면 `.tbl-list`의 `overflow-x: auto`로 가로 스크롤
- **radio 데모는 `no-wrap` 없이** `--tbl-min-width`만 적용한 예시
- 줄바꿈까지 막을 때만 `no-wrap`을 함께 사용

---

## body-scroll 높이

```html
<div class="tbl-list body-scroll" style="--tbl-scroll-max:32rem;">
```

---

## 체크 / 라디오 열

```html
<th scope="col" class="chk">
  <div class="check-box tbl">
    <div class="items">
      <input type="checkbox" class="chk-all" id="allA" name="boardChkA">
      <label for="allA" class="blank"><span class="dn">전체선택</span></label>
    </div>
  </div>
</th>
<!-- 행 -->
<td class="chk">
  <div class="check-box tbl">
    <div class="items">
      <input type="checkbox" class="chk-item" id="c1" name="boardChkA" value="1">
      <label for="c1" class="blank"><span class="dn">선택</span></label>
    </div>
  </div>
</td>
```

- **테이블마다 `name`을 다르게** (전체선택이 표 단위로만 동작)
- 필수 표시: `.nec`

상세 마크업은 `table.html` 가이드 섹션을 복사하세요.