# head 요소 정리 (웹접근성)

다른 프로젝트에 붙일 때 **문서 최상단** 체크리스트입니다.  
meta만이 아니라 `html`·`title`·폰트·CSS 순서까지 포함합니다.

---

## 필수

| 항목 | 예시 / 규칙 |
|------|-------------|
| `<!DOCTYPE html>` | HTML5 선언 |
| `<html lang="ko">` | 페이지 언어 (스크린리더 발음·번역에 필요) |
| `<meta charset="UTF-8">` | **head 최상단**에 두기 |
| `<meta name="viewport" …>` | `width=device-width, initial-scale=1` |
| `<title>` | 페이지마다 **고유** · 내용 파악 가능하게 |
| CSS | 본문 스타일 로드 |

### viewport — 하지 말 것
```html
<!-- ❌ 저시력 사용자 확대 불가 → 접근성 위반 소지 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

```html
<!-- ✅ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

### title 권장 형식
```text
페이지명 | 사이트명
예) 버튼 | 웹접근성 빌드업
```
- 탭/즐겨찾기·스크린리더가 **먼저** 읽는 정보
- 모든 페이지가 같은 title이면 안 됨
- (선택) location 연동 시 JS로 `경로 | 사이트명` 갱신 가능 → `common.js`

---

## 권장

| 항목 | 설명 |
|------|------|
| `<meta name="description">` | 페이지 요약 (비워 두지 말 것. 없으면 태그 삭제) |
| `<meta name="color-scheme" content="light">` | 브라우저 UI·폼 컨트롤 톤 (다크 미지원 시) |
| 폰트 `preload` + `crossorigin` | FOIT/레이아웃 흔들림 완화 · **crossorigin 필수**(폰트) |
| `<link rel="icon">` | 탭 식별 (실서비스에서 경로 지정) |
| `format-detection` | 전화번호 자동링크 방지가 필요하면 `telephone=no` |

---

## 선택 (실서비스에서 채우기)

빈 값으로 두지 마세요. 쓸 때만 넣고 **실제 내용**을 채웁니다.

```html
<meta name="author" content="기관명">
<link rel="icon" href="/favicon.ico">

<!-- Open Graph / SNS (내용 있을 때만) -->
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="요약">
<meta property="og:url" content="https://example.go.kr/page">
<meta property="og:image" content="https://example.go.kr/og.png">
<meta property="og:locale" content="ko_KR">
```

`http-equiv="X-UA-Compatible"` · `Cache-Control` 은 레거시/개발용.  
모던 브라우저만 대상이면 X-UA는 생략해도 됩니다.

---

## 이 킷 기본 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="color-scheme" content="light">

    <title>페이지명 | 웹접근성 빌드업</title>
    <meta name="description" content="이 페이지가 다루는 내용을 한 문장으로">

    <!-- <link rel="icon" href="./favicon.ico"> -->

    <link rel="preload" href="./font/Pretendard-Regular.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./font/Pretendard-Medium.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./font/Pretendard-SemiBold.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./font/Pretendard-Bold.subset.woff2" as="font" type="font/woff2" crossorigin>

    <link rel="stylesheet" href="./css/style.css">
</head>
```

---

## body 쪽과 짝을 이룰 것 (head 밖)

head만으로 끝나지 않습니다.

| 항목 | 위치 |
|------|------|
| 스킵 네비게이션 | `#skipToContent` (`common.css`) |
| 랜드마크 | `header` / `nav` / `main` 또는 `#container` / `footer` |
| 페이지 제목 | `h2.ptitle` 등 **보이는** 제목 (title과 의미 일치) |

---

## 체크리스트

- [ ] `lang` 지정
- [ ] charset이 head 앞쪽
- [ ] viewport에 확대 제한 없음
- [ ] title 고유·의미 있음
- [ ] description 비어 있지 않음 (또는 태그 없음)
- [ ] 빈 og/meta 더미 없음
- [ ] 폰트 preload에 `crossorigin`
- [ ] 스킵 링크·본문 제목은 body에 준비