# 관련 콘텐츠 / 첨부 목록

| 항목 | 경로 |
|------|------|
| 데모 | `related.html` |
| CSS | `css/related.css` |
| 이미지 | `img/download.svg` (첨부 아이콘) |
| JS | 없음 |
| 관련 | 게시판 상세 첨부 → [board.md](./board.md) `.board-view__files` |

---

## 구성

| 블록 | 클래스 | 용도 |
|------|--------|------|
| 첨부 | `.attach` | 상세·자료실 첨부파일 |
| 관련글 | `.relate` | 같은 주제·카테고리 글 |
| 카드형 | `.relate.relate--card` | 제목 + 요약 |

상세 본문 아래, 이전/다음글·목록 버튼 위에 두는 경우가 많습니다.

---

## 첨부 목록

```html
<section class="attach" aria-labelledby="attachTit">
  <h3 id="attachTit" class="attach__tit">첨부파일</h3>
  <ul class="attach__list">
    <li>
      <a class="attach__link" href="/files/guide.pdf" download>
        <span class="attach__icon" aria-hidden="true">
          <img src="./img/download.svg" alt="" width="20" height="20">
        </span>
        <span class="attach__name">품질점검_안내.pdf</span>
        <span class="attach__meta">
          <span class="attach__type">PDF</span>
          <span class="attach__size">(248KB)</span>
          <span class="dn">다운로드</span>
        </span>
      </a>
    </li>
  </ul>
</section>
```

- 파일명·용량·형식을 **텍스트로** 제공 (아이콘만 금지)
- 다운로드면 `.dn`「다운로드」 (새 창이 아니면 「새 창」 불필요)
- 새 탭으로 미리보기(`target="_blank"`)면 **반드시** `.dn`(새 창) 고지
- 첨부 없음: `.attach__empty` + `role="status"`

---

## 관련 콘텐츠

```html
<section class="relate" aria-labelledby="relateTit">
  <h3 id="relateTit" class="relate__tit">관련 콘텐츠</h3>
  <ul class="relate__list">
    <li>
      <a class="relate__link" href="./board.html#board-view">
        <span class="relate__cate">공지</span>
        <span class="relate__name">시스템 정기 점검 안내</span>
        <time class="relate__date" datetime="2026-07-18">2026.07.18</time>
      </a>
    </li>
  </ul>
</section>
```

카드형:

```html
<section class="relate relate--card" aria-labelledby="relateCardTit">
  …
  <a class="relate__link" href="…">
    <span class="relate__cate">보도</span>
    <span class="relate__name">제목</span>
    <p class="relate__summary">요약 두 줄…</p>
    <time class="relate__date" datetime="…">…</time>
  </a>
</section>
```

---

## 접근성 체크

- [ ] 섹션 제목(`h2`~`h4`) + `aria-labelledby`
- [ ] 첨부: 파일명·용량·다운로드/새 창 고지
- [ ] 관련글: 링크 이름만으로 구분 가능 (날짜만 링크 금지)
- [ ] 아이콘 `alt=""` + `aria-hidden` (의미가 `.dn`/파일명에 있음)
- [ ] `:focus-visible`

---

## 복사 패키지

```
css/related.css
img/download.svg
마크업: related.html
```