CSS Box Model

CSS Box Model

  CSS의 모든 것들은 Box(박스)로 이루어져 있고 이를 이해해야 복잡한 레이아웃을 구성할 수 있습니다. 박스는 크게 Block 박스와 Inline 박스 두 종류로 나뉩니다. 이는 해당 박스가 다른 박스와 어떤 관계고 페이지 흐름 속에서 어떠한 특성을 갖는가로 구분합니다. 그리고 Block 박스와 Inline 박스 안에서도 각각 inner display type 과 outer display type 으로 종류를 나눌 수 있습니다.

 

1. Box의 구분과 그 특징

1-1. Block + outer display type

- 요소를 생성하면 line break과 함께 박스가 생성됩니다.

- 이 박스에는 width, height 속성을 적용할 수 있습니다.
- padding, border, margin이 다른 박스를 밀어낼 수 있습니다.
- width 값이 명시되지 않으면 해당 컨테이너의 너비를 꽉 채웁니다.

1-2. Inline의 outer display type

- 요소를 생성해도 line break가 일어나지 않습니다.
- width, height 속성이 적용되지 않습니다.
- 위아래 방향의 padding, border, margin이 적용되나 다른 inline 박스를 밀어내지는 않습니다.
- 좌우 방향의 padding, border, margin이 적용되고 다른 inline 박스를 밀어냅니다.

1-3. inner display type

- 박스 내부에서 요소들이 어떻게 배치될지에 관한 것입니다.
- 기본적으로 아무런 속성을 주지 않으면 박스 안에서는 normal flow로 배치됩니다.
- 속성을 주면 해당 박스 안에서 자식 요소들이 그 속성대로 배치됩니다.

 

2. Box의 구성 요소

2-1. Content box

  내용(content)이 표시될 영역입니다. inline-size, block-size, width, height로 크기를 조절할 수 있습니다.

2-2. Padding box

  Content box를 둘러싸며 padding 관련 속성으로 크기를 조절할 수 있습니다.

2-3. Border box

  Content box와 Padding box를 둘러싸며 border 관련 속성으로 크기를 조절할 수 있습니다.

2-4. Margin box

  실제 박스의 바깥영역입니다. Content box + Padding box + Border box를 둘러싸며 margin 관련 속성으로 크기를 조절할 수 있습니다.

 

3. Margin의 특징

- 음수 값도 가질 수 있으며 음수 값을 가질 시, 다른 요소를 침범할수도 있습니다. (Padding은 음수 값을 가질 수 없습니다.)
- shorthand에서는 top-right-bottom-left 순으로 적용됩니다.
- 두 요소의 마진이 각각 양수로서 겹치면 둘 중 큰 값이 적용됩니다.
- 두 마진이 음수로서 겹치면 둘 중 작은 값이 적용(0으로부터 먼 것)됩니다.
- 하나의 마진만 음수라면 전체에서 차감됩니다. 예를들어 50px 과 -10px이 만나면 40px이 됩니다.

 

4. 표준 박스 모델과 대체 박스 모델

  표준 CSS 박스 모델에서는 padding과 border에 따라 실제 박스가 차지하는 영역이 달라지나 대체 CSS 박스 모델에서는 inline-size, block-size가 각각 실제 박스의 너비와 높이를 결정합니다. 즉 대체 모델에서는 padding과 border에 따라 실제 박스의 크기가 아니라 Content box의 크기가 변하게 됩니다.

 

  이와 같은 대체 CSS 박스 모델을 페이지 전체에 적용하고 싶다면 다음과 같이 html 전반에 box-sizing 속성을 적용해야 합니다.

 

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}