레이아웃

각 요소의 위치와 크기를 계산하는 단계입니다.

Reflow라고도 부릅니다.

역할

렌더 트리: "div와 p를 그려야 해"
    ↓
Layout: "div는 (0,0)에서 너비 500px, 높이 100px"
        "p는 (0,100)에서 너비 500px, 높이 50px"

계산하는 것들

┌─────────────────────────────────┐
│ (x: 0, y: 0)                    │
│ ┌─────────────────────────────┐ │
│ │ div                         │ │
│ │ width: 500px, height: 100px │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ p                           │ │
│ │ width: 500px, height: 50px  │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

계산 항목	설명
위치 (x, y)	어디에 배치할지
크기 (width, height)	얼마나 차지할지
여백 (margin, padding)	간격 계산

Layout이 다시 발생하는 경우 (Reflow)

// Layout 다시 계산됨
element.style.width = '300px';   // 크기 변경
element.style.top = '100px';     // 위치 변경
element.appendChild(newChild);   // 요소 추가

비용이 큼 → 성능에 영향

전체 과정에서 위치

DOM + CSSOM
     ↓
렌더 트리 (뭘 그릴지)
     ↓
Layout (어디에, 얼마나)  ← 여기
     ↓
Paint (색칠)
     ↓
화면 출력