C
HTML/CSS 목록
이전3 / 11다음
HTML/CSS/HTML기초/Lesson 03

HTML 구조 — head 와 body 의 역할

30분·theory
이 챕터
2/3

HTML 구조 — head 와 body 의 역할

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ block vs inline 차이
  • ▸✅ form · input · label 의 올바른 연결
  • ▸✅ img alt 텍스트 작성 4원칙

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

HTML 페이지의 *해부도*

핵심 한 줄

모든 HTML 페이지는 + 두 부분으로 나뉩니다. head 는 눈에 안 보이는 메타 정보, body 는 실제 보이는 내용.

head — 페이지의 뒷면

html
<head>
    <meta charset="UTF-8">                        <!-- 한글 깨짐 방지 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>                      <!-- 브라우저 탭·검색 결과 -->
    <meta name="description" content="페이지 설명">  <!-- 검색 결과 미리보기 -->
    <link rel="stylesheet" href="styles.css">     <!-- CSS 연결 -->
    <link rel="icon" href="favicon.ico">          <!-- 탭 아이콘 -->
    <script src="app.js" defer></script>           <!-- JS 연결 -->
</head>

여기 들어가는 것:

  • ▸메타 정보: 인코딩·뷰포트·설명·OG (소셜 공유)
  • ▸외부 파일 연결: CSS·JS·폰트·아이콘
  • ▸검색엔진 최적화 (SEO): title·description·canonical 등

사용자에게 직접 보이진 않지만 검색 엔진·SNS·접근성 도구가 이 정보를 읽습니다.

body — 페이지의 앞면

html
<body>
    <header>...</header>
    <main>
        <article>실제 내용</article>
    </main>
    <footer>...</footer>
</body>

사용자가 실제로 보는 내용이 다 들어갑니다. 시맨틱 태그 (header·main·article·section·aside·footer) 로 의미를 구조화하는 게 표준.

자주 빠뜨리는 필수 5가지

1. <!DOCTYPE html> — HTML5 선언. 안 쓰면 옛 모드 동작
2. <html lang="ko"> — 언어 명시. 스크린리더·번역에 영향
3. <meta charset="UTF-8"> — 한글 깨짐 100% 방지
4. <meta viewport> — 모바일 반응형 필수
5. <title> — SEO 1순위 + 브라우저 탭

OG 태그 — SNS 공유 미리보기

링크 공유 시 카카오톡·페이스북 에 보이는 미리보기는 OG (Open Graph) 태그로 결정:

html
<meta property="og:title" content="제목">
<meta property="og:description" content="설명">
<meta property="og:image" content="https://.../preview.png">
<meta property="og:url" content="https://example.com">

마케팅에 중요. 미리보기 없으면 클릭률 ↓.

한 번 정리

head = 눈에 안 보이는 메타, body = 실제 내용. 둘 다 빠뜨리지 않고 시맨틱하게 작성하는 게 좋은 HTML.

접근성 (a11y) · 시맨틱 HTML · SEO 의 관계

시맨틱 태그가 실제로 무엇을 바꾸나

1. 스크린리더 — 눈 없이 웹을 듣는 사람

html
<!-- ❌ 의미 없는 div -->
<div onclick="navigate('/about')">소개</div>

<!-- ✅ 시맨틱 -->
<a href="/about">소개</a>

NVDA·VoiceOver 가 "링크: 소개" 라고 자동 안내. div 클릭은 읽어주지 않음.

2. 키보드 사용자 — 마우스 못 쓰는 사람

  • ▸<a>, <button> 는 Tab 으로 포커스 + Enter 로 활성화 기본
  • ▸<div onclick> 은 Tab 포커스 X. tabindex="0" + role="button" + 키보드 이벤트 직접 처리 필요

3. SEO — 구글 봇이 의미를 이해

html
<main>
    <article>
        <h1>제목</h1>
        <section>
            <h2>섹션 제목</h2>
            <p>본문...</p>
        </section>
    </article>
    <aside>관련 글</aside>
</main>

구글이 어디가 본문인지 자동 판별. SEO 점수 상승.

ARIA 4가지 핵심 속성

role — 의미 부여

html
<div role="alert">저장 실패</div>
<!-- 스크린리더가 *즉시* 읽어줌 (alert role 의 특성) -->

<div role="button" tabindex="0" onkeydown="if(event.key==='Enter')click()">
    버튼
</div>

가능하면 시맨틱 태그 (<button>) 가 우선. ARIA 는 대안 없을 때만.

aria-label — 눈에 안 보이는 라벨

html
<!-- 아이콘만 있는 버튼 -->
<button aria-label="메뉴 열기">
    <svg>...</svg>
</button>

시각적 텍스트가 없는 버튼 의 의미를 알려줌. 아이콘 버튼·검색 박스에 필수.

aria-hidden — 스크린리더에서 감추기

html
<svg aria-hidden="true">...</svg>   <!-- 장식용 아이콘 -->
<span aria-hidden="true">→</span>   <!-- 시각적 화살표 -->

텍스트 정보가 중복 이면 아이콘 자체는 가려줍니다.

aria-describedby — 추가 설명 연결

html
<input id="email" aria-describedby="email-hint">
<small id="email-hint">예: [email protected]</small>

포커스 시 힌트도 함께 읽어줌.

alt 텍스트 — 원칙 4가지

html
<!-- ❌ 의미 없음 -->
<img src="chart.png" alt="이미지">

<!-- ❌ 너무 자세함 -->
<img src="logo.png" alt="빨간색 둥근 배경에 흰 글씨로 CodeMaster 라고 쓰여있는 로고">

<!-- ✅ 정보 전달 -->
<img src="chart.png" alt="2025년 월별 매출: 1월 100만 ~ 12월 250만">

<!-- ✅ 장식용 -->
<img src="divider.png" alt="">    <!-- 빈 alt = 무시하라는 명시적 표현 -->

규칙:
1. 이미지의 의미를 텍스트로 옮긴다
2. 장식용이면 alt="" (생략 X)
3. "이미지", "사진" 같은 단어 금지 (스크린리더가 이미 "이미지" 라고 안내)
4. 짧고 명확하게

tabindex — 포커스 순서

html
<div tabindex="0">   <!-- 포커스 가능 (자연 순서) -->
<div tabindex="-1">  <!-- 포커스 불가 (프로그램만) -->
<div tabindex="5">   <!-- ❌ 양수 사용 X — 자연 순서 깨짐 -->

양수 tabindex 는 안티패턴. DOM 순서를 따르세요.

빠른 점검 도구

  • ▸Lighthouse (Chrome DevTools) — Accessibility 점수
  • ▸axe DevTools 확장 — 자동 진단
  • ▸스크린리더 직접 사용 — Mac VoiceOver (Cmd+F5), Windows NVDA

🤖 AI 에게 이렇게 요청해보세요

  • ▸"이 div 기반 버튼을 시맨틱 button 태그로 바꿔주고 키보드 접근성 추가해줘"
  • ▸"이 모든 아이콘 버튼에 aria-label 을 추가해줘"
  • ▸"이 페이지의 alt 텍스트를 의미 중심으로 다시 써줘"
먼저 읽으면 좋은 개념: HTML이란?
다음 추천: 폼 태그
이전목록다음
HTML 문서 구조 - HTML/CSS