[CSS] Box Model(박스 모델)
2022. 6. 14. 11:07
Web Front-end/CSS
Box Model(박스 모델)이란? 문서의 레이아웃을 계산할 때, 하나의 박스는 위 사진과 같이 네 부분으로 이루어진다. 컨텐츠 영역(Content Area) 패딩 영역(Padding Area) 테두리 영역(Border Area) 마진 영역(Margin Area) CSS에서 box-sizing 속성이 기본값인 content-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border, margin을 제외한 컨텐츠 영역의 크기만을 지정하는 것이다. box-sizing 속성이 border-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border를 포함하고, margin은 제외하는 테두리 영역의 크기를 지정하는 것이다. 사이즈 계산..