오늘은 HTML을 쓰는 연습보다, 구조를 읽는 눈을 키우는 날입니다
많이들 헷갈리는 부분입니다. 우리가 작성한 HTML 코드가 그대로 화면이 되는 게 아닙니다. 브라우저가 이를 해석해서 조작 가능한 객체 구조로 새로 만들어내는데, 그게 바로 DOM(Document Object Model)입니다.
서버에서 넘어오는 원본 텍스트 파일입니다.<p>Hello</p>
브라우저가 HTML을 해석해서 만들어낸 트리 구조입니다. "Hello" 같은 텍스트 하나도 독립된 노드로 존재합니다.
DOM은 고정된 구조가 아닙니다 — JavaScript가 언제든 바꿀 수 있는 살아있는 구조입니다. 웹이 '정적인 문서'가 아니라 '움직이는 프로그램'인 이유가 여기 있습니다.
CSS 선택자는 "이 구조 안에서 스타일을 줄 대상을 어떻게 찾을 것인가"의 문제입니다. DOM 구조를 모르면 CSS를 제대로 쓸 수 없습니다.
.article h2 { color: red; }은 article 안의 h2 제목을 빨갛게 바꾸는 코드입니다. 이게 안 먹힌다면? 클래스가 생각한 위치에 없거나, 구조의 범위를 잘못 파악한 것입니다.대표적인 시맨틱 태그인 <article>과 <section>, 어떻게 쓸지 헷갈린다면 아래 기준 하나만 기억하세요.
| 태그 | 직관적 의미 | 올바른 예시 |
|---|---|---|
<article> | "완결된 글 하나" | 블로그 포스트 1개, 뉴스 기사 1개 |
<section> | "여러 글의 묶음" | 최신 글 목록, 인기 글 영역 |
시맨틱 태그를 제대로 쓰면 검색엔진이 콘텐츠 구조를 더 정확하게 파악합니다. SEO에 직접 영향을 줍니다.
<div>만 잔뜩 있으면 "그냥 덩어리"로만 인식하지만, <article>·<nav> 같은 시맨틱 태그를 쓰면 "여기는 글 하나, 여기는 메뉴"라고 구분해서 알아듣습니다. 이 주제(접근성)는 Day 37에서 제대로 다룹니다.<html>, <head>, <body> 같은 기본 뼈대가 있습니다. 이미 있는 <header>나 <main>을 본문 콘텐츠 안에서 또 만들지 않습니다. 구조끼리 충돌하면 레이아웃이 무너지고, 검색 노출도 떨어집니다.
지금은 이 원칙만 기억해두세요. 실제로 여러 페이지 파일과 레이아웃을 나눠 만드는 법은 Week 2에서 다룹니다.
F12(개발자 도구)로 구조를 직접 뜯어보는 연습입니다.
아무 웹사이트나 열어 <header>, <main>, <article> 영역을 각각 찾고, 서로 어떤 부모-자식 관계인지 종이에 트리로 그려보세요. 목표는 코드를 한 줄씩 읽는 게 아니라, 전체 뼈대를 해석하는 것입니다.