시맨틱 레이아웃: Header, Footer, Main

핵심 개념

단순히 <div>만 쓰는 게 아니라, 의미가 담긴 태그를 사용해요. 머리(header), 본문(main), 꼬리(footer)를 구분하면 컴퓨터가 웹사이트를 더 잘 이해해요.

코드 분석

HTML5📋 코드 (3줄)

<header style='background: #eee; padding: 10px;'>상단 로고 및 네비게이션</header>
<main style='padding: 20px;'>핵심 콘텐츠가 들어가는 영역입니다.</main>
<footer style='background: #333; color: white; padding: 10px;'>하단 정보 및 저작권 표시</footer>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 HTML 레이아웃에서 div 남용을 찾아
적절한 시맨틱 태그(header/nav/main/footer)로
리팩토링하고 그 이유를 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

header/nav/main/footer/aside/section을
네이버, 애플, 깃허브 사이트가
실제로 어떻게 쓰는지 예시를 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 시맨틱 구조 전체를 분석해서
SEO 점수에 영향을 주는 부분과
스크린리더 사용성을 종합 평가해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

div + class보다 시맨틱 태그가
2026년에도 여전히 SEO·접근성에서 의미가 있는지,
실제 차이가 큰지 솔직하게 말해줘.

⭐ 이것만 기억하세요

시맨틱 레이아웃: Header, Footer, Main는 이 3가지만 확실히 잡으세요

1.div만으로 구역을 나누면 검색엔진과 스크린리더가 페이지 구조를 전혀 파악하지 못합니다

2.header는 도입부, main은 핵심 콘텐츠, footer는 마무리 — 태그 이름 자체가 역할 설명서입니다

3.다음 챕터에서 이 구역 안의 텍스트에 strong, em, mark로 의미 강조를 더하는 법을 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.5 — 질문하거나 답변을 확인하세요

→

진행도 5 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)