박스 모델과 표시 방식 계산
모든 요소는 콘텐츠, 패딩, 테두리, 마진으로 계산되는 상자이며 display 값에 따라 줄 흐름과 크기 계산이 달라진다.
| 질문 | 보는 속성 | 해석 기준 | 대응 |
|---|---|---|---|
| 왜 폭이 커졌나 | width, padding, border | content-box인지 border-box인지 확인 | box-sizing을 명시 |
| 왜 간격이 생겼나 | margin, gap | 박스 바깥 간격인지 내부 여백인지 구분 | 간격 책임을 한 곳에 둠 |
| 왜 줄바꿈되나 | display, width | block은 줄 전체, inline은 내용 흐름 | display 의도를 다시 선택 |
| 왜 정렬이 안 되나 | flex/grid 속성 | 부모가 배치 컨텍스트인지 확인 | 정렬 속성을 부모에 둠 |
| 왜 넘치나 | min-width, overflow | 콘텐츠 긴 단어와 고정 폭 확인 | 반응형 폭과 wrap 처리 |
박스 계산과 display 흐름을 분리해 보면 같은 CSS 문제도 원인과 고칠 위치가 명확해진다.