박스와 display
크기는 박스 모델로 계산하고, 줄바꿈과 나열 방식은 display 값으로 판단한다.
| 구분 | 결정하는 것 | 대표 값 | 실수 신호 |
|---|---|---|---|
| Box model | 요소가 차지하는 실제 크기 | content, padding, border, margin | width만 보고 실제 폭을 추측 |
| block | 한 줄 전체를 차지하고 세로로 쌓임 | div, p, section | inline처럼 옆에 놓이길 기대 |
| inline | 내용 폭만 차지하고 문장 안에 흐름 | span, a, strong | width/height가 기대대로 안 먹음 |
| flex | 한 축으로 자식 배치 | display:flex | 주축과 교차축을 혼동 |
| grid | 행과 열로 2차원 배치 | display:grid | 단순 한 줄 배치에 과하게 사용 |
레이아웃 문제는 “크기를 계산하는 문제”인지 “흐름을 정하는 문제”인지 나누면 해결 순서가 잡힌다.