Ch.8 시맨틱 HTML + 멀티미디어

div를 넘어서 — 시맨틱 태그

header, nav, main, section, article, aside, footer의 역할을 구분한다시맨틱 태그를 사용하는 이유를 설명할 수 있다시맨틱 태그로 페이지 구조를 설계할 수 있다

div만 100개 쌓으면 무엇이 무엇인지 알 수 있을까?

모든 구조를 <div>로만 만들면 코드만 봐서는 어디가 메뉴이고 어디가 본문인지 알 수 없습니다. 시맨틱 태그는 코드에 '의미'를 부여합니다.

div와 시맨틱 태그는 뭐가 다를까?

시맨틱(Semantic) HTML — 태그 이름만 보고도 역할을 알 수 있는, 의미 있는 HTML입니다.

article

핵심 내용

태그 이름만 보고도 역할을 알 수 있는 HTML

시맨틱 태그의 장점: • 검색엔진(SEO): 구글이 페이지 구조를 더 잘 이해 • 접근성: 스크린 리더가 구역을 정확히 안내 • 유지보수: 개발자가 코드를 빠르게 파악

웹 페이지 구조를 잡는 7가지 핵심 태그를 알아봅시다

<header>: 로고, 사이트 제목, 상단 영역

<nav>: 메뉴, 내비게이션 링크 모음

<main>: 페이지 핵심 콘텐츠 (1개만)

<section>: 주제별로 묶인 콘텐츠 구역

<article>: 독립적 콘텐츠 (블로그 글 등)

<aside>: 사이드바, 부가 정보

<footer>: 저작권, 연락처, 하단 영역

<main>은 페이지에 하나만 존재해야 합니다. <section>은 제목(h2~h6)을 갖는 주제별 구역, <article>은 독립적으로 배포 가능한 콘텐츠입니다.

시맨틱 태그로 블로그 레이아웃을 만들어봅시다

페이지에서 단 하나만 존재해야 하는 시맨틱 태그는?

사이드바나 부가 정보를 담는 시맨틱 태그는 <___> 이다

CSS 변수(Custom Properties)를 선언할 때 사용하는 접두사는?

시맨틱 HTML 마스터!

compare_arrows

edit_note

★

div 대신 의미 있는 시맨틱 태그를 사용하면 접근성과 SEO가 동시에 향상됩니다.

image

다이어그램: wd-scene-semantic-html

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요