웹 브라우저가 HTML 문서를 읽고 화면에 표시하는 과정은 단순히 "태그 → 스타일 → 출력"이 아니다. 그 안에는 DOM Tree라는 구조와 CSS 선택자 탐색 규칙이 숨어 있다. 이번 글에서는 DOM 구조를 이해하고, CSS 선택자가 어떻게 동작하는지 정리해보겠다.
DOM(Document Object Model) 구조 이해
- HTML 문서를 브라우저가 해석하면, 각 요소가 노드(Node)라는 객체로 변환된다.
- 이 노드들이 계층적으로 연결된 트리(Tree) 구조가 바로 DOM Tree이다.
- 예시 HTML
<html>
<body>
<div id="container">
<p class="text">안녕하세요</p>
<p class="text">Hello World</p>
</div>
</body>
</html>- DOM Tree 구조
html
└─ body
└─ div#container
├─ p.text ("안녕하세요")
└─ p.text ("Hello World")- DOM은 단순히 "텍스트 문서"가 아니라, 브라우저 안에서 조작 가능한 객체 모델이다.
CSS 선택자가 DOM을 탐색하는 방식
브라우저가 CSS를 적용할 때, 선택자는 DOM Tree를 따라가며 일치하는 요소를 찾는다.
- 예시 CSS
p.text { color: blue; }- 동작 과정
- 브라우저는 DOM Tree에서 모든 <p> 태그를 탐색
- 그중에서 .text 클래스를 가진 요소만 매칭
- 해당 요소의 스타일 규칙에 color: blue 적용
- 선택자가 복잡할수록 브라우저가 더 많은 노드를 탐색해야 하므로, 선택자는 가능한 한 단순하게 작성하는 게 성능에 유리하다.
자손 선택자 vs 후손 선택자와 DOM 구조의 관계
자손 선택자 (>)
- 바로 아래 단계(직계 자식)만 선택한다.
div > p { color: red; }- 적용 대상
<div>
<p>직계 자식</p> <!-- O -->
<section><p>후손</p></section> <!-- X -->
</div>후손 선택자 (공백)
- 모든 하위 요소(중첩 포함)에 적용된다.
div p { color: blue; }- 적용 대상
<div>
<p>직계 자식</p> <!-- O -->
<section><p>후손</p></section> <!-- O -->
</div>- DOM Tree를 이해해야 >와 공백 선택자의 차이를 명확히 구분할 수 있다.
브라우저가 CSS를 적용하는 과정 (렌더링 플로우)
브라우저 렌더링의 핵심 과정은 크게 5단계이다.
- HTML 파싱 → DOM Tree 생성 (HTML 태그를 읽고 계층 구조로 변환)
- CSS 파싱 → CSSOM Tree 생성 (CSS 선택자를 해석해 어떤 규칙이 적용될지 정리)
- Render Tree 생성 (DOM Tree + CSSOM Tree를 결합해 실제 화면에 필요한 요소만 포함)
- Layout(배치) (각 요소의 크기(width/height), 위치(x/y 좌표) 계산)
- Paint & Composite(그리기) (픽셀 단위로 화면에 렌더링)
- 즉, CSS 선택자는 단순히 "색 바꾸는 규칙"이 아니라, 렌더링 과정 전체에 영향을 주는 성능 요소임을 알아야 한다.
정리하자면...
- DOM Tree = 브라우저가 HTML을 객체로 변환한 계층 구조
- CSS 선택자는 DOM Tree를 탐색하며 일치하는 요소를 찾아 스타일을 적용
- >(자손)과 공백(후손)은 DOM 구조를 기준으로 다르게 동작
- 브라우저는 DOM + CSSOM을 결합해 Render Tree를 만들고, Layout과 Paint 과정을 거쳐 화면에 표시
'Front > css' 카테고리의 다른 글
| CSS 레이아웃 속성 정리 (Flexbox 중심) (3) | 2025.08.31 |
|---|---|
| Bootstrap 활용 가이드 (4) | 2025.08.31 |
| CSS 단위 & 박스 모델 정리 (1) | 2025.08.31 |
| CSS 선택자 정리 (4) | 2025.08.31 |
| CSS 기본 개념 & 적용 방법 (0) | 2025.08.31 |
