페인팅
계산된 위치에 실제로 픽셀을 채우는 단계입니다.
역할
Layout: "div는 (0,0)에 500x100 크기"
↓
Paint: "배경색 파랑, 글자색 검정, 테두리 1px..."
그리는 것들
| 항목 | 예시 |
|---|---|
| 배경 | background-color, background-image |
| 글자 | color, font |
| 테두리 | border |
| 그림자 | box-shadow |
시각화
Layout 결과:
┌─────────────┐
│ │ ← 위치, 크기만 있음
└─────────────┘
Paint 결과:
┌─────────────┐
│ ██ 안녕 ██ │ ← 색상, 글자 채워짐
└─────────────┘
Repaint가 발생하는 경우
// Paint만 다시 발생 (Layout은 안 함)
element.style.color = 'red'; // 글자색 변경
element.style.backgroundColor = 'blue'; // 배경색 변경
Layout보다는 가벼움
Layout vs Paint
| 구분 | Layout (Reflow) | Paint (Repaint) |
|---|---|---|
| 역할 | 위치, 크기 계산 | 픽셀 채우기 |
| 비용 | 큼 | 중간 |
| 트리거 | width, height, top | color, background |
전체 과정
DOM + CSSOM
↓
렌더 트리
↓
Layout (어디에, 얼마나)
↓
Paint (색칠) ← 여기
↓
Composite (합성)
↓
화면 출력