코딩/웹디자인

AI를 이용한 티스토리 웹디자인 공부 - [DAY 2] DOM 트리와 시맨틱 태그

data-pantry 2026. 4. 20. 12:40

Day 2 — DOM Tree와 시맨틱 태그 (개념 재정립)

오늘은 HTML을 '쓰는' 연습보다, 구조를 '읽는 눈'을 키우는 날입니다

👉 일단 이것만

• HTML = 텍스트 파일 그 자체
• DOM = 브라우저가 그 텍스트를 읽고 만들어낸 구조체
• CSS = 그 구조 안에서 꾸밀 대상을 찾는 방법
📌 조금 더 풀면 이렇습니다:

  1. HTML은 결국 텍스트 파일입니다.
  2. 브라우저는 이걸 받아서 화면에 그리기 위해 내부적으로 '구조'로 변환합니다. 이게 DOM입니다.
  3. CSS가 실제로 적용되는 대상은 원본 HTML 파일이 아니라, 브라우저가 만들어낸 이 구조(DOM)입니다.
👉 어디에 CSS를 넣을지 찾으려면, 이 "구조(DOM)"를 읽을 수 있어야 합니다.

1. DOM Tree = 단순 구조가 아니다

많이들 헷갈리는 부분입니다. 우리가 작성한 HTML 코드가 그대로 화면이 되는 게 아닙니다. 브라우저가 이를 해석해서 '조작 가능한 객체 구조'로 새로 만들어내는데, 그게 바로 DOM(Document Object Model)입니다.
👉 JavaScript로 실시간으로 뜯어고칠 수 있는 구조라는 뜻입니다.

📝 HTML (파일)

서버에서 넘어오는 원본 텍스트 파일입니다.
<p>Hello</p>

🌳 DOM (브라우저 메모리)

브라우저가 HTML을 해석해서 만들어낸 트리 구조입니다. 여기서 중요한 건, "Hello" 같은 텍스트 하나도 독립된 노드로 존재한다는 점입니다.

💡 핵심: DOM은 고정된 구조가 아닙니다. JavaScript가 언제든 바꿀 수 있는 살아있는 구조입니다.
→ 웹이 '정적인 문서'가 아니라 '움직이는 프로그램'인 이유가 여기에 있습니다.

2. CSS와 DOM 구조의 관계

CSS 선택자는 "이 구조 안에서 스타일을 줄 대상을 어떻게 찾을 것인가"의 문제입니다. DOM 구조를 모르면 CSS를 제대로 쓸 수가 없습니다.

💡 자주 겪는 상황

.article h2 { color: red; } — article 안의 h2 제목을 빨갛게 바꾸는 코드입니다.

이게 안 먹힌다면?
→ 클래스가 생각한 위치에 없거나, 구조의 범위를 잘못 파악한 것입니다.

3. 시맨틱 태그 — 실전 판단 기준

<article>과 <section>, 어떻게 쓸지 헷갈린다면 아래 기준 하나만 기억하세요.

태그 직관적 의미 올바른 예시
<article> "완결된 글 하나" 블로그 포스트 1개, 뉴스 기사 1개
<section> "여러 글의 묶음" 최신 글 목록, 인기 글 영역

→ 시맨틱 태그를 제대로 쓰면 검색엔진이 콘텐츠 구조를 더 정확하게 파악합니다. SEO에 직접 영향을 줍니다.

4. 티스토리에서 꼭 알아야 할 것

⚠️ 우리는 이미 지어진 집 안에서 가구를 배치하고 있습니다.

티스토리 스킨에는 이미 뼈대 구조가 있습니다. 본문을 작성하는 건 그 구조 안의 특정 방에 내용을 채워넣는 일입니다.

[실전 원칙]
1. 스킨에 이미 있는 <main>, <header>를 본문 안에서 또 만들지 마세요.
2. 구조끼리 충돌하면 레이아웃이 무너지고, 검색 노출도 떨어집니다.

5. 실전 기술: DOM 트리 파악하기

F12(개발자 도구)로 구조를 직접 뜯어보는 연습입니다.

1

바꾸고 싶은 요소를 우클릭 → 검사(Inspect)합니다.

2

그 요소를 감싸고 있는 부모 태그가 뭔지 확인합니다.

3

같은 레벨에 있는 다른 요소들까지 훑으면서 전체 패턴을 잡습니다.

👉 핵심: 구조를 볼 때는 안에서 밖으로 파고들지 말고, 요소에서 위(부모)로 거슬러 올라가면서 전체 틀을 잡아야 합니다.

6. 오늘의 실습 — 내 블로그 뼈대 찾기

목표: 코드를 읽는 게 아니라 전체 뼈대를 해석하는 것

본인 블로그의 [스킨 편집] → [HTML 편집]에 들어가서 다음 영역을 직접 찾아보세요.

  • 최상단 <header> 찾기
  • 메인 콘텐츠가 시작되는 <main> 또는 #mArticle 찾기
  • 포스트가 생성되는 <article> 찾기
  • 찾은 영역들이 서로 어떤 부모-자식 관계인지 종이에 트리로 그려보기

☑️ Day 2 완료 체크리스트

☐ HTML 파일과 브라우저가 만든 DOM 트리가 어떻게 다른지 설명할 수 있다.
☐ 텍스트 노드도 DOM 구조의 일부라는 걸 이해했다.
☐ CSS는 DOM 구조를 기준으로 대상을 찾아 적용된다는 걸 이해했다.
☐ article(글 하나)과 section(글 묶음)의 쓰임을 명확히 구분할 수 있다.
☐ 티스토리 스킨에는 이미 구조가 있으며, 이걸 건드리면 어떤 문제가 생기는지 이해했다.

다 체크했다면, 실습에서 그린 트리 구조를 사진으로 찍어두세요.

Next Step 🚀 Day 3 — 구조를 활용한 CSS 선택자와 실전 스타일링