[CSS]CSS 박스 모델

Box model이란 CSS에 있어서 매우 중요한 요소이다.

내용물을 포함하여 margin, border, padding 을 조정하는 사각형의 모델이다.

위와 같이 파란색 부분은 실제 내용물이 들어가는 공간이다.

초록색은 padding으로써 해당 박스의 경계 내의 범위이다.

border는 경계로서 굵기를 조절할 수 있다.

margin은 실제 내용의 경계 밖 범위이다.

이외에도 width는 넓이를 뜻하고, height는 높이를 뜻한다.

padding과 margin이 헷갈릴 수 있는데 경계를 기준으로 안과 밖의 범위라고 생각하며 된다.

이 모든 속성은 CSS속성으로 쉽게 제어할 수 있다.