[CSS]박스 모델 (Box Model, box-sizing)

모든 HTML 요소는 박스로 생각할 수 있다.

CSS에서 "박스 모델"은 디자인과 레이아웃을 말할 때 사용된다.

 

Margin : 바깥 여백

Border : 테두리

Padding : 안쪽 여백

Content : Text, image, video

 

박스 모델은 이과 같이 구성되어 있다.

 

CSS요소의 크기를 정하고 싶으면 콘텐츠 영역의 width, height값만 조절하면 되지만

요소의 전체 크기를 설정하려면 패딩, 테두리 및 여백도 설정해야 한다.

 

box-sizing

div{
	box-sizing:border-box
}

content-box 

기본값

 

border-box

패딩, 테두리도 크기 폭에 포함시킴