[MDN Study] CSS가 적용되는 절차

1. 개요

브라우저가 CSS를 적용하는 절차 간단히 정리한다.

2. CSS의 작동 방식

1. HTML 로드

   브라우저가 HTML 문서를 수신한다.

2. DOM 생성

   브라우저의 렌더링 엔진이 HTML을 구문 분석하여 DOM 트리를 생성한다.

3. 리소스 가져오기

   HTML 문서에 링크된 모든 CSS 파일과 JS 파일을 가져온다.

4. CSSOM 생성

   브라우저가 다운로드한 모든 CSS 파일을 구문 분석하여 CSSOM 트리를 생성한다. 이 과정에서 선택자 유형별로 규칙을 분류하고 정렬하는 작업이 수행된다.

5. 렌더 트리 생성

   DOM과 CSSOM이 결합된다.
   렌더 트리는 화면에 표시되어야 할 시각적 요소만 포함하는 트리이다(display: none, 요소를 미포함한다는 의미).
   이 때 DOM 노드에 CSSOM의 스타일 규칙이 첨부된다.
   각 노드에 어떤 스타일이 적용되어야 하는지 결정된다.

6. 레이아웃

   렌더 트리의 노드들이 실제 화면상 위치와 정확한 크기를 계산하여 배치된다. 이 때 CSS 박스 모델에 따라 각 박스의 크기와 위치가 결정된다.

7. 페인팅

   레이아웃 단계에서 계산된 위치와 크기에 따라 최종적인 픽셀을 칠한다. 텍스트, 색상, 배경, 테두리 등 스타일이 화면에 시각적으로 표시된다.