[우아한테크캠프] 13일차

브라우저 동작 방식

오늘은 프론트엔드의 HTML 문서에 CSS 를 입히는 연습을 했습니다. 그 전에, 브라우저에 대한 기본적인 브라우저에 대한 크롱의 온라인 강의를 보는 시간을 가졌는데요. 그 동안 '브라우저' 라고 쉽게 부르던 것이 대체 무엇을 하는 건지 궁금해하다 네이버D2 블로그에서 잘 정리된 글을 읽게 되어 공유합니다.

일반적으로 제 블로그인 http://hyeooona825.tistory.com/ 를 화면에 렌더링 하는 과정에서도 많은 일이 일어납니다. 

먼저 HTML 을 파싱해 브라우저가 이해할 수 있는 구조로 변환하는 과정이 일어납니다. HTML 문서를 읽어가며 CSS 와 같은 자원들을 해당 서버에 요청해 얻어와 CSS 또한 파싱합니다. 파싱된 HTML 문서에 CSS 를 입혀 렌더링 엔진을 통해 화면에 그리는 작업까지 해야 화면에 웹 페이지 로드가 완료된 것입니다.

CSS 정보를 DOM 트리에 적용해 그리는 순서 (Paint Order) 는

1. 배경 색 (background color)
2. 배경 이미지 (background image)
3. 테두리 (border)
4. 자식 노드 (children)
5. 아웃라인 (outline)

입니다.