[CSS] boxmodel

HTML의 모든 요소는 사각형의 박스 형태로 만들어진다. 박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있다. 이 4가지 영역을 통틀어서 박스모델이라고 부른다. 

CSS를 이용해 이 상자의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 변경할 수 있다. 

 

boxmodel 구성

Content 영역

요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타낸다. 

 

Border 영역

content 영역을 감싸는 테두리 선을 border라고 한다. 

 

Padding 영역

content 영역과 테두리 사이의 여백을 padding이라고 한다. 
content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 그 영향을 미친다. 이에 따라 padding을 content의 연장으로 볼 수도 있다. 

 

Margin 영역

border 바깥쪽의 영역을 margin이라고 한다. 
border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역이다. 즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있다.