12) CSS 속성 - boxmodel

HTML의 모든 요소는 사각형의 박스 형태로 만들어집니다.

박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있습니다.

이 4가지 영역을 통틀어서 박스모델이라고 합니다.

문서를 배치할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자로 나타냅니다 . 

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

 

boxmodel 구성

 

     Content 영역

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

• Border 영역
  
  content 영역을 감싸는 테두리 선을 border라고 합니다.
• Padding 영역
  
  content 영역과 테두리 사이의 여백을 padding이라고 합니다.
  content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다.
  이에 따라 padding을 content의 연장으로 볼 수도 있습니다.

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