# 푸터

| 항목 | 경로 |
|------|------|
| 데모 | `footer.html` |
| CSS | `css/footer.css` (+ select형이면 `form.css` · `button.css`) |
| JS | 패밀리사이트 disclosure — `footer.html` 데모 또는 아래 패턴 |

---

## 구성

| 블록 | 클래스 | 역할 |
|------|--------|------|
| 래퍼 | `footer.site-footer` / `#footer` | 콘텐츠 정보 랜드마크 |
| 유틸 링크 | `.site-footer__nav` | 개인정보·이용약관 등 |
| 기관 정보 | `.site-footer__info` | 주소·전화·사업자번호 |
| 패밀리사이트 | `.site-footer__family` | 관련 사이트 (disclosure 권장) |
| 저작권 | `.site-footer__copy` | copyright |

`footer` 요소는 페이지당 보통 하나. 스킵 링크 대상이면 `id="footer"` 유지.

---

## 마크업 (권장)

```html
<footer id="footer" class="site-footer">
  <h2 class="dn">하단 정보</h2>

  <nav class="site-footer__nav" aria-label="하단 바로가기">
    <div class="site-footer__inner">
      <ul class="site-footer__nav-list">
        <li><a href="#none" class="is-em">개인정보처리방침</a></li>
        <li><a href="#none">이용약관</a></li>
        <li><a href="#none">저작권정책</a></li>
      </ul>
    </div>
  </nav>

  <div class="site-footer__inner">
    <div class="site-footer__body">
      <div class="site-footer__info">
        <p class="site-footer__org">웹접근성 빌드업</p>
        <address class="site-footer__addr">
          (00000) 서울특별시 ○○구 ○○로 00<br>
          대표전화: <a href="tel:02-000-0000">02-000-0000</a>
          · 이메일: <a href="mailto:help@example.com">help@example.com</a>
        </address>
        <dl class="site-footer__meta">
          <div><dt>사업자등록번호</dt><dd>000-00-00000</dd></div>
        </dl>
      </div>

      <div class="site-footer__family">
        <button type="button" class="site-footer__family-btn"
          aria-expanded="false" aria-controls="footerFamilyList"
          id="footerFamilyBtn">패밀리사이트</button>
        <ul id="footerFamilyList" class="site-footer__family-list" hidden>
          <li><a href="#none" target="_blank" rel="noopener noreferrer">관련기관 A <span class="dn">(새 창)</span></a></li>
          <li><a href="#none" target="_blank" rel="noopener noreferrer">관련기관 B <span class="dn">(새 창)</span></a></li>
        </ul>
      </div>
    </div>
    <p class="site-footer__copy">© 웹접근성 빌드업. All rights reserved.</p>
  </div>
</footer>
```

---

## 패밀리사이트

| 방식 | 권장 | 비고 |
|------|------|------|
| **disclosure** (`button` + `aria-expanded` + `hidden`) | ✅ | 키보드·스크린리더에 유리 |
| `select` + 「이동」 버튼 | 가능 | label 필수 · 선택만으로 이동(onchange jump) 비권장 |

새 창 링크: `target="_blank"` + `rel="noopener noreferrer"` + `.dn`(새 창)

---

## 접근성 체크

- [ ] `footer` 랜드마크 · 필요 시 숨김 제목(`h2.dn`)
- [ ] 유틸 `nav`에 `aria-label`
- [ ] 주소는 `address` · 전화/메일은 실제 `tel:` / `mailto:`
- [ ] 개인정보처리방침 강조(`.is-em` 또는 `strong`)
- [ ] 패밀리사이트: 펼침 상태 `aria-expanded` · Esc/바깥 클릭 시 닫기
- [ ] 포커스 `:focus-visible`

---

## 복사 패키지

```
css/footer.css
마크업: footer.html 의 footer.site-footer
(기존 빈 #footer 를 이 마크업으로 교체)
```