# 지도 · 연락처

| 항목 | 경로 |
|------|------|
| 데모 | `map.html` |
| CSS | `css/map.css` |
| JS | 없음 (지도는 iframe · 외부 지도 링크) |

---

## 원칙

| 항목 | 권장 |
|------|------|
| 지도만 제공 | **금지** — 주소 텍스트(`address`) 필수 |
| iframe | `title`에 장소명 포함 (예: “○○센터 위치 지도”) |
| 큰 지도 | 새 창 링크 시 `title` + `.dn`(새 창) |
| 전화·메일 | `tel:` / `mailto:` 링크 |
| 자동재생·깜빡임 | 지도 위 오버레이 광고성 모션 지양 |

카카오·네이버·구글 지도로 바꿀 때도 **텍스트 주소는 유지**합니다.

---

## 지도 + 주소

```html
<section class="map-block" aria-labelledby="mapTit">
  <h3 id="mapTit" class="map-block__tit">오시는 길</h3>
  <div class="map-block__frame">
    <iframe
      title="웹접근성 빌드업 위치 지도"
      src="https://www.openstreetmap.org/export/embed.html?…"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>
  </div>
  <address class="map-block__addr">
    (00000) 서울특별시 ○○구 ○○로 00, ○○빌딩
  </address>
  <ul class="map-block__actions">
    <li>
      <a href="https://www.openstreetmap.org/…"
        target="_blank" rel="noopener noreferrer"
        title="새 창으로 열림">
        큰 지도 보기 <span class="dn">(새 창)</span>
      </a>
    </li>
  </ul>
</section>
```

---

## 연락처

```html
<section class="contact-card" aria-labelledby="contactTit">
  <h3 id="contactTit" class="contact-card__tit">연락처</h3>
  <p class="contact-card__org">웹접근성 빌드업</p>
  <dl class="contact-card__list">
    <div>
      <dt>대표전화</dt>
      <dd><a href="tel:02-0000-0000">02-0000-0000</a></dd>
    </div>
    <div>
      <dt>이메일</dt>
      <dd><a href="mailto:help@example.com">help@example.com</a></dd>
    </div>
  </dl>
</section>
```

---

## 교통 안내

```html
<section class="transit" aria-labelledby="transitTit">
  <h3 id="transitTit" class="transit__tit">대중교통</h3>
  <ul class="transit__list">
    <li>
      <p class="transit__label">지하철</p>
      <p class="transit__desc">○호선 ○○역 ○번 출구에서 도보 5분</p>
    </li>
  </ul>
</section>
```

---

## 접근성 체크

- [ ] 주소가 지도 밖에 **텍스트로** 있음
- [ ] iframe `title`이 장소·용도를 설명
- [ ] 새 창 지도 링크: `title` + `.dn`(새 창)
- [ ] 전화·메일은 실제 링크
- [ ] 키보드로 링크·iframe 포커스 가능 (브라우저 기본)

---

## 복사 패키지

```
css/map.css
마크업: map.html
(iframe src → 카카오/네이버/구글/OSM 중 프로젝트 지도로 교체)
```