HTML이 웹 브라우저에서 어떻게 작동할까?

1. HTML이 갑자기 궁금해진 과정

대학교 1학년 때 HTML과 CSS를 공부한 이후로는 한동안 사용하지 않았습니다. 그런데 최근에 HTML과 CSS를 사용할 기회가 생기면서, 제가 작성한 HTML이 웹 브라우저에서 어떻게 동작하는지 문득 궁금해졌습니다. 그래서 오늘의 TIL에서는 HTML이 웹 브라우저에서 어떻게 작동하는지 알아보겠습니다.

2. HTML이란 무엇일까?

HTML은 Hypertext Markup Language의 약자로, "마크업" 언어입니다.

3. 그렇다면 마크업 언어란 무엇일까?

마크업 언어는 정보를 "기록"하거나 "설명"하기 위한 언어로, 자바와 같은 “소프트웨어”를 만드는 프로그래밍 언어와는 다릅니다.

4. 마크업 언어와 비슷한 이름 “마크다운 언어”

HTML과 비슷한 개념으로 노션이나 GitHub README에 사용되는 마크다운(Markdown) 언어가 있습니다. 마크다운 언어는 일반 텍스트 기반의 경량 마크업 언어로, 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용됩니다. 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징입니다. 위에서 말했듯, 노션이나 README 파일에 많이 사용됩니다.

5. HTML이 웹 브라우저에서 어떻게 동작하는데요?

1. HTML 파싱: 브라우저는 웹 페이지의 HTML 문서를 가져와서 파싱합니다. 이 과정에서 HTML 문서의 구조를 이해하고, DOM(Document Object Model) 트리를 생성합니다. DOM 트리는 웹 페이지의 요소(태그, 속성 등)와 그들의 관계를 표현합니다.
2. CSS 파싱 및 스타일 계산: HTML 파싱이 완료되면 브라우저는 CSS 스타일 시트를 가져와서 파싱 합니다. 각 요소에 대한 스타일 정보를 추출하고, 스타일 계산을 통해 각 요소의 최종 스타일을 결정합니다. 이 정보는 렌더 트리(Render Tree)에 저장됩니다.
3. 레이아웃(Layout): 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 과정을 거칩니다. 이를 레이아웃 또는 리플로우(reflow)라고 부릅니다. 브라우저는 각 요소가 어디에 표시될지 계산하고, 이를 화면에 배치합니다.
4. 페인팅(Paint): 레이아웃이 끝나면 브라우저는 화면에 요소들을 그립니다. 이 과정을 페인팅이라고 하며, 렌더링 엔진은 픽셀을 채우고 색상, 그림자, 글꼴 등을 적용하여 최종적으로 화면에 그림을 그립니다.
5. 렌더링 결과 표시: 브라우저는 페인팅된 결과물을 화면에 표시합니다. 이때 사용자는 웹 페이지를 볼 수 있게 됩니다.
6. 상호작용 및 이벤트 처리: 웹 페이지가 렌더링된 후에는 사용자의 상호작용(마우스 클릭, 키보드 입력 등)을 처리합니다. 이벤트 핸들러를 실행하여 사용자가 요청한 작업을 수행합니다.

6. 그럼 서버와의 통신은 언제 이루어질까요?

서버와의 통신은 HTML 파싱 단계에서 이루어집니다.

1. 서버 요청: 브라우저는 웹 페이지를 요청하기 위해 웹 서버에 HTTP 요청을 보냅니다.
2. 서버 응답: 웹 서버는 브라우저의 요청을 받고, 웹 페이지의 HTML 문서를 포함한 응답을 생성하여 브라우저로 보냅니다.
3. HTML 파싱: 브라우저는 서버로부터 받은 HTML 문서를 파싱 하여 DOM 트리를 생성합니다. 이 단계에서 HTML 문서의 구조와 내용을 이해하고, 웹 페이지의 요소와 그들의 관계를 표현하는 트리 구조를 생성합니다.
4. CSS 및 JavaScript 파일 요청: HTML 파싱 중에 브라우저가 외부 CSS 및 JavaScript 파일을 만나면 해당 파일을 다운로드하기 위해 추가로 서버에 요청을 보냅니다.
5. 파일 다운로드 및 실행: 서버에서 CSS 및 JavaScript 파일을 다운로드한 후, 브라우저는 이러한 파일을 파싱하고 실행합니다. 이 과정은 웹 페이지의 스타일과 상호작용을 구현하는 데 사용됩니다.

7. 불러오는 속도를 높이려면?

1. 코드 최적화: 코드가 간결하고 효율적일수록 로딩 속도가 빨라집니다.
2. 이미지 최적화: 이미지 크기를 줄여야 합니다. 하지만 너무 많이 최적화하면 이미지가 깨질 수 있으니 주의해야 합니다.

8. 깨달은점

1. HTML과 같은 마크업 언어와 마크다운 언어는 비슷한 언어라고만 생각했습니다. 이번 기회에 찾아보면서 "파생"되어 경량화된 언어라는 것을 알게 되었습니다.
2. HTML을 웹 브라우저로 열었을 때, 내부 흐름이 어떻게 동작하는지 알았습니다.