[CSS3] 04. Box Model

BOX Model

정의

Box Model은 HTML 요소가 화면에 표시될 때 그 요소의 크기와 위치를 정의하는 모델이다.
각각의 HTML 요소는 내부적으로 하나의 박스로 간주되며,
이 박스는 content area(내용 영역), padding area(패딩 영역), border area(테두리 영역), margin area(여백 영역)으로 구성된다.

모든 HTML 요소는 사각형의 박스 모델이고, 위에서 아래로(Block level), 왼쪽에서 오른쪽으로(Inline level)으로 쌓이게 된다.
여기서 내용 영역인 content area를 정렬하거나, 위치를 지정하기 위해 Padding과 Margin 속성을 사용한다.

Content area:

요소가 실제로 표시되는 내용을 포함하는 영역. 요소의 너비와 높이는 content area의 크기에 의해 결정된다.

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

Padding area:

content area와 border area 사이의 공간으로, 내용 영역 주위에 패딩을 추가하는 데 사용된다. padding 속성을 사용하여 크기를 조정할 수 있다.

Padding은 Content Area와 Border Area 사이의 공간을 채우는 데 사용되며, Padding 값이 증가하면 Content Area의 크기가 감소한다.
Padding 값은 양수의 길이 값으로 지정될 수 있으며, Padding은 상하좌우 각 방향마다 개별적으로 설정할 수 있다.

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

.. 혹은

padding: 10px; /*상하좌우 전부 10px */

Border area:

content area와 margin area 사이의 테두리 영역이다.
border 속성을 사용하여 크기와 스타일을 지정할 수 있다.

Box Model에서 Border Area는 content area를 둘러싸는 경계선이다.
즉, Padding Area를 둘러싸고 있는 영역이다. 그리고 다음과 같은 특징을 가진다.

1. 요소의 가장 바깥쪽에 위치하며, Border의 스타일, 두께, 색상을 지정할 수 있다.

2. 다른 요소의 위에 겹치도록 지정할 수 있다. 이는 z-index 속성을 사용하여 구현된다.

3. Border는 다양한 스타일을 가질 수 있다. 일반적인 스타일로는 실선, 점선, 대시선 등이 있으며, 이 외에도 라운드, 그라데이션 등의 스타일을 적용할 수 있다.

4. 따라서 Border는 패딩과 같이 전체적인 Box Model의 크기를 결정하는 데 영향을 준다.
   만약 Box Model의 크기를 지정하고, Border의 두께를 추가로 지정한다면, Box Model의 크기는 Border의 두께를 고려하여 다시 계산된다. 이는 padding에 대해서도 동일하게 적용된다.

Margin area:

요소와 다른 요소 사이의 간격으로, 여백 영역을 의미한다.
margin 속성을 사용하여 크기를 조정할 수 있다.

Margin Area는 요소의 테두리(Border) 바깥쪽 공간을 의미한다.

top, right, bottom, left를 지정하여 설정할 수 있으며, 이를 shorthand로 표현할 수도 있다.
예를 들어, margin: 10px 20px 30px 40px;는 top margin이 10px, right margin이 20px, bottom margin이 30px, left margin이 40px가 되도록 한다.

Margin Area는 다른 영역들과 달리, 투명한 영역이기 때문에 배경색이나 배경이미지 등이 없다.

.box {
  width: 200px;
  height: 200px;
  background-color: #ddd;
  margin: 20px;
}