브라우저
브라우저가 문서를 화면으로 바꾸는 과정
브라우저는 문서 구조와 스타일을 읽어 화면에 배치하고 그립니다.
이럴 때 필요해요
HTML·CSS·JavaScript가 화면에서 만나는 지점을 이해합니다.
어떻게 동작하나요?
브라우저는 HTML을 읽어 문서 구조인 DOM을 만듭니다. CSS는 어떤 모양으로 표시할지 결정하는 데 사용됩니다. DOM은 화면의 사진이 아니라 다룰 수 있는 문서 구조입니다.
화면에는 요소의 크기와 위치를 정하고 픽셀을 그리는 과정도 필요합니다. JavaScript로 DOM을 바꾸면 브라우저가 필요한 화면 작업을 다시 수행할 수 있습니다.
아래 문서는 제목에 색을 지정합니다. 상세한 스타일 계산, Layout과 Paint의 차이는 이어지는 브라우저 파이프라인 노트에서 읽습니다. 단계가 있다는 사실만으로 특정 성능 수치를 추측하지 마세요.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<style>h1 { color: navy; }</style>
<h1>공연 안내</h1>HTML의 제목과 CSS의 표현이 합쳐져 제목이 표시됩니다.
자주 헷갈리는 포인트
- DOM과 화면에 그려진 픽셀은 같은 개념이 아닙니다.
- DOM 변경마다 모든 화면이 같은 비용으로 다시 그려진다고 단정하지 않습니다.
내 말로 설명해 보기
제목의 내용과 글자색은 각각 어디에서 바꾸나요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 브라우저는 문서 구조와 스타일을 읽어 화면에 배치하고 그립니다.
- HTML의 제목과 CSS의 표현이 합쳐져 제목이 표시됩니다.
예시 답변
내용은 HTML 또는 DOM에서, 글자색은 CSS 규칙에서 바꿉니다. 브라우저가 이를 화면으로 반영합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.