통합 요약노트
Ch.8 시맨틱 HTML + 멀티미디어
시맨틱 태그, 비디오/오디오, 메타 태그
이 챕터의 내용
1
div를 넘어서 — 시맨틱 태그
시맨틱(Semantic) HTML — 태그 이름만 보고도 역할을 알 수 있는, 의미 있는 HTML입니다.
태그 이름만 보고도 역할을 알 수 있는 HTML
웹 페이지 구조를 잡는 7가지 핵심 태그를 알아봅시다
시맨틱 태그로 블로그 레이아웃을 만들어봅시다
- 시맨틱 태그 = 의미를 가진 HTML (SEO, 접근성, 유지보수)
- header, nav, main, section, article, aside, footer 7종
- <main>은 페이지에 딱 하나만 존재
2
멀티미디어 임베딩
<video>, <audio>, <iframe> — HTML5 멀티미디어 태그로 풍부한 콘텐츠를 만들어봅시다.
HTML5는 플러그인 없이 미디어를 재생합니다
YouTube 영상 임베드와 캡션 추가하기
다양한 미디어 태그로 포트폴리오 페이지를 만들어봅시다
- <video> / <audio>로 미디어 직접 삽입 (controls 필수)
- <iframe>으로 YouTube, 지도 등 외부 콘텐츠 임베드
- <figure> + <figcaption>으로 캡션이 있는 미디어 표시
3
메타 태그와 SEO 기초
<meta> 태그 — 사용자에게 보이지 않지만 검색 엔진과 브라우저에게 중요한 정보를 제공합니다.
모든 HTML 문서에 반드시 들어가야 할 메타 태그
검색 결과와 SNS 공유 시 보이는 정보를 설정합니다
SEO에 최적화된 head 태그를 완성해봅시다
- charset=UTF-8 (한글), viewport (모바일), title (탭 제목)
- description = 구글 검색 결과 설명문
- og: 태그 = SNS 공유 시 미리보기 카드 설정
key
핵심 용어 모음
▶️
controls
재생/일시정지/볼륨 컨트롤 표시
🔄
autoplay
페이지 로드 시 자동 재생 (비권장)
🔇
muted
음소거 상태로 시작
🔁
loop
반복 재생
🖼️
poster
비디오 썸네일 이미지 지정 (video 전용)
🔤
charset=UTF-8
한글 등 다국어 문자가 깨지지 않도록 설정
📱
viewport
모바일에서 확대/축소 없이 올바르게 표시
📑
<title>
브라우저 탭 + 검색 결과 제목으로 표시
compare_arrows
비교 정리
| 항목 | <div> | 시맨틱 태그 |
|---|---|---|
| 의미 | 의미 없는 범용 컨테이너 | 태그 이름이 곧 역할 설명 |
| 접근성 | 스크린 리더가 구역을 구별 못함 | 스크린 리더가 구역을 정확히 안내 |
| SEO | SEO에 도움 안 됨 | 검색 엔진이 구조를 정확히 파악 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기