화면 구성하기 - 박스모델의 구조

 

저번까지 박스 컨테이너의 배치 방법에 대해 알아보았습니다.

이번엔 박스 컨테이너의 내부 구조에 대해 알아보겠습니다.

 

 

 

 

박스모델의 구조

f12 키를 누르고 박스 모델을 살펴보면 margin, border, padding, content, 네개의 구성으로 이루어진 것을 확인할 수 있습니다.

margin : 박스 테두리 밖의 영역입니다.

border : 박스 테두리입니다.

padding: 박스 테두리와 실제 내용 사이의 공간입니다.

content: 박스 모델 내부의 내용입니다.

margin

border

padding

content

일반적인 css에서 설정하는 width와 height의 값은 content + padding 까지의 영역입니다.

만약, border의 길이까지 포함하게 하려면 box-sizing을 사용해야 합니다.

 

 

 

 

box-sizing

box-sizing 속성은 박스의 사이즈를 정하는 기준을 지정하는 속성입니다.

border-box와 content-box 두가지가 존재하는데,

content-box는 일반적인 속성으로 content와 padding의 길이합을 width와 height로 취급하고,

border-box는 border까지의 길이를 width와 height로 취급합니다.

margin

border

padding

content

width(border-box)

height(border-box)

width(content-box)

height(content-box)