Box Model
콘텐츠와 안쪽/테두리/바깥 여백이 크기를 만듭니다.
BDES · CSS
CSS 박스·배치 모델
요소의 크기와 위치는 박스 모델, display 흐름, position, overflow, flex 규칙이 함께 결정합니다.
CSS 레이아웃 요소
layoutbox-sizing
width 계산에 border와 padding을 포함할지 정합니다.
표시 흐름
block, inline, inline-block 흐름이 기본 배치를 정합니다.
Position
relative, absolute, fixed로 기준점을 바꿉니다.
Flex/Overflow
축 정렬과 넘침 처리로 최종 화면을 다듬습니다.
box model
→
표시 흐름
→
position
→
flex align
→
overflow
CSS 박스·배치 모델 정리
CSS 레이아웃은 속성 하나로 결정되지 않고 박스 크기, 문서 흐름, 위치 기준, 넘침 처리가 함께 만든 결과입니다.