오늘 끝나면
브라우저가 하는 일
- ✓브라우저가 하는 일의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 브라우저가이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
HTML 한 덩이를 받아 화면으로 그려내기 (렌더링) 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 11 / 인터넷 · 웹
브라우저가
하는 일
주소를 치면 화면이 뜸. 그 사이 브라우저가 일을 함. HTML 글자를 받아 트리로 만들고, CSS로 꾸미고, 픽셀로 칠함. 마지막에 JS까지 돌림.
브라우저는 무엇인가
브라우저는 웹페이지를 그려주는 프로그램임. 크롬·사파리·엣지가 다 그것임.
우리가 보는 건 예쁜 화면임. 서버가 보낸 건 그냥 글자 뭉치임. 그 글자가 HTML임. 브라우저가 그걸 화면으로 바꿈.
그래서 브라우저는 번역기임. 글자 → 화면으로 옮기는 번역임. 이 번역이 매번 정해진 순서로 일어남.
큰 흐름은 다섯 칸임. 주소 입력 → HTML 받아옴 → 트리(DOM)로 파싱 → CSS 적용 → 화면에 그림. 오른쪽이 그 순서임. 하나씩 뜯어봄.
브라우저가 매번 밟는 다섯 단계 — 글자에서 화면까지
주소 → HTML 글자를 받아옴
주소창에 google.com을 침. 그러면 브라우저가 그 집에 편지를 보냄.
편지 내용은 간단함. "이 페이지 좀 줘"임. 이걸 요청(request)이라 부름. 받는 쪽 컴퓨터가 서버임.
서버는 답장을 보냄. 그게 응답(response)임. 안에 든 게 HTML 글자 뭉치임. 아직 화면이 아님. 그냥 글자임.
편지는 한 번에 다 안 옴. HTML 안에 "이미지도 줘", "CSS도 줘"가 적혀 있으면 또 편지를 보냄. 필요한 만큼 여러 번 주고받음.
주소를 치면 편지를 보내고(요청), HTML 글자를 받음(응답)
파싱 → DOM 트리를 만듦
받은 건 한 줄로 늘어선 글자임. 브라우저는 이걸 읽어 내려가며 구조를 잡음. 이걸 파싱이라 함.
HTML은 상자 안에 상자가 든 구조임. <div> 안에 <h1>이 들어가는 식임. 브라우저는 이 포함 관계를 부모-자식 트리로 만듦.
이 트리가 DOM임 — Document Object Model. 페이지를 나무처럼 표현한 것임. 나중에 JS가 화면을 바꿀 때 이 트리를 건드림.
오른쪽에서 직접 해보셈. HTML 조각을 고르면 그 DOM 트리가 그려짐. 글자가 어떻게 부모·자식으로 갈라지는지 눈으로 보임.
코드 보기
이 HTML이 → <div> <h1>안녕</h1> <p>반가워요</p> </div> 이런 트리가 됨 → div ├ h1 — "안녕" └ p — "반가워요"
<div><h1>안녕</h1><p>반가워요</p></div>
CSS 적용 → 화면을 그림
DOM 트리는 뼈대일 뿐임. 아직 색도 위치도 없음. 여기에 CSS를 입힘.
CSS는 꾸미는 규칙임 — "제목은 크고 굵게", "배경은 파랑" 같은 것임. 브라우저가 각 칸에 이 규칙을 하나하나 입힘.
그다음 두 가지를 계산함. 레이아웃은 칸의 위치·크기를 정함.페인트는 그 자리에 실제 픽셀을 칠함.
칠하기가 끝나야 화면에 보임. 글자 뭉치가 우리가 보는 페이지가 됨. 여기까지가 한 페이지를 띄우는 전 과정임.
뼈대(DOM)에 규칙(CSS)을 입혀 픽셀로 칠함 — 그제서야 보임
JS가 페이지를 살아 움직이게 함
여기까지면 페이지는 멈춰 있는 그림임. 버튼을 눌러도 아무 일 안 남.
그걸 움직이게 하는 게 JavaScript(JS)임. HTML과 함께 브라우저가 JS도 받아와 실행함.
JS는 아까 만든 DOM 트리를 직접 고침. "버튼 누르면 글자 바꿔", "숫자 더해" 같은 일을 함. 트리가 바뀌면 그 부분만 다시 그림.
그래서 같은 페이지가 살아 움직임. 좋아요가 올라가고, 메뉴가 펼쳐짐. JS가 뭔지는 다음 챕터에서 다룸.
Q. 그럼 브라우저는 매번 다섯 단계를 다 하나?
첫 화면은 다섯 단계를 전부 거침. 이후 JS가 DOM을 바꾸면 바뀐 부분만 다시 레이아웃·페인트함. 전부 새로 안 함. 그래서 빠름. 새로고침하면 그제서야 처음부터 다 다시 함.JS가 DOM을 고치면 그 부분만 다시 칠해짐 — 페이지가 살아 움직임