웹 페이지가 어떠한 방식을 걸쳐 그려지는 지 알아봅니다.

웹 페이지는 어떻게 그려지는가?

 

웹 페이지는 어떻게 그려지는가?

 

1. 브라우저가 HTML 파일을 파싱하여 DOM 생성

2. 브라우저가 CSS 파일을 읽어 CSSOM 생성

3. DOM과 CSSOM 합쳐 렌더트리 생성

4. 레이아웃

5. 스타일 적용

6. 페인팅

 

1. 브라우저가 HTML 파일을 파싱하여 DOM 생성

 DOM(Document Object Model)은 HTML을 객체로 나타낸 모델이다. HTML 각 요소의 관계를 파악하여 부모, 자식으로 나뉘어 있다고 본다. 각 요소는 노드로 표현되며, 부모, 자식 관계를 반영하여 트리구조로 표현된다.

2. 브라우저가 CSS 파일을 읽어 CSSOM 생성

 CSSOM(CSS Object Model)은 DOM처럼 CSS를 객체로 나타낸 모델이다. HTML의 각 요소에 적용된 스타일을 저장한다.

3. DOM과 CSSOM 합쳐 렌더트리 생성

 렌더트리는 DOM의 각 노드에 CSSOM에 저장된 스타이을 적용한 형태이다. 이를 통해 각 요소들이 어떻게 그려질 지 결정된다.

4. 레이아웃

 렌더 트리를 기반으로 각 요소의 위치, 크기를 계산한다.

5. 스타일 적용

 렌더 트리를 기반으로 각 요소에 글골, 색상과 같은 스타일을 적용한다.

6. 페인팅

 지금까지 결정된 것을 바탕으로 화면에 픽셀로 나타낸다.

+ Recent posts