CSS Basics: CSS 작동 방식

CSS가 실제로 어떻게 작동할까?

웹 브라우저가 HTML과 CSS를 받아들여 화면에 표시하기까지의 과정을 단계별로 알아보겠습니다.

 

1. HTML 파일 불러오기
   브라우저가 서버나 파일에서 HTML 문서를 가져옵니다.
2. DOM 트리 만들기 (HTML → DOM)
   HTML을 파싱해서 “DOM (Document Object Model)”이라는 트리 구조로 변환합니다. 각 HTML 요소가 하나의 노드로 변합니다.
3. 필요한 리소스 가져오기
   이미지, 동영상, 그리고 link rel="stylesheet" … 같은 연결된 CSS 파일들을 함께 불러옵니다.
4. CSS를 파싱해서 규칙 분류하기
   브라우저가 CSS를 읽고, 선택자별로 규칙을 분류한 뒤, DOM의 어떤 노드에 어떤 스타일을 적용할지 계산합니다. 이 결과를 “렌더 트리(render tree)”라고 합니다.
5. 레이아웃 계산
   렌더 트리의 각 요소가 화면에 어디에, 얼마나 크게 표시되어야 할지 위치와 크기를 계산합니다.
6. 화면에 그림 그리기 (Painting)
   계산된 정보대로 실제 화면에 요소를 그리고, 브라우저 창에 결과를 보여줍니다.

출처: https://velog.io/@https00200/CSS

 

 

---

비유로 쉽게 이해하기

• HTML = 설명이 적힌 조립 설명서
• DOM = 부품 리스트와 조립 순서; 설명서를 사람이 이해할 수 있는 구조로 바꾼 것
• CSS = 각 부품에 도색이나 장식 규칙 알려주기
• 렌더 트리 + 레이아웃 계산 = 도색할 위치와 크기를 결정
• 페인팅 = 실제로 도색 작업 완료!

 

---

왜 이렇게 복잡할까?

• 효율성: 여러 리소스를 각각 처리해서 최적의 결과를 빠르게 화면에 보여주기 위함입니다.
• 정확성: CSS 우선순위, 상속, 겹치는 규칙 등을 계산해서 “어떤 스타일이 우선인가?”를 정확하게 판단해야 합니다.

이 전체 과정은 사용자가 클릭하거나 스크롤할 때 다시 실행되기도 합니다.

 

---

한 문장 요약

브라우저는 HTML을 읽어 구조화하고(DOM), CSS를 읽어 규칙을 분류한 뒤(렌더 트리), 표시할 위치와 크기를 계산하고(레이아웃), 마지막으로 화면에 그립니다(페인팅).

이 4~6단계를 이해하면 CSS가 실제로 어떻게 웹 페이지를 “꾸미는지” 더 잘 알 수 있습니다.

도움이 되었길 바랍니다 :)

 

출처

CSS 작동 방식 - Web 개발 학습하기 | MDN