[CSS] Box Model

Box Model

출처 : MDN 박스 모델

CSS box Model은 Block 박스에 적용되며, Inline 박스는 Box Model에 정의된 일부 동작만 사용한다. 이 개념은 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠 등이 어떻게 작동할 것인지에 대한 것을 결정짓기 때문에 정확히 이해하고 활용하는 것이 중요하다. 

 

MDN에 있는 한국어 번역이 읽기 나빠서 천천히 정리해나가며 이해해보려고 한다.

 

본격적으로 Box Model에 대해서 알아보기 전에, 이와 관련된 display의 속성 중 block과  inline의 차이에 대해서 알아보려고 한다. 이 두 가지는 서로 다른 배치 방법, 가로 세로 길이, 줄 바꿈 등을 가지고 있기 때문에 차이점을 알고 사용하는 것이 좋다.

 

Block Box &  Inline Box

CSS에는 크게 두 가지 유형이 있다. (블록과 인라인), 이 두가지 유형의 차이는 아래와 같다.

inline과 block 요소의 배치 차이

Block	Inline
.- 박스가 사용가능한 공간을 100%로 채우면서, 상위 컨테이너의 너비만큼 커진다. - 새 줄로 행갈이를 한다. (줄바꿈 O) - width와 height 속성이 적용된다. - 패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려난다.	- 콘텐츠 요소의 너비만큼 차지한다. - 새 줄로 행갈이를 하지 않는다. (줄바꿈 X) - width와 height 속성이 적용되지 않는다. - 패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려나지 않는다.
<h1>, <p> 등의 태그는 기본값으로 block을 사용	<a>, <span>, <strong>, <em> 등의 태그는 기본값으로 inline을 사용

 

이 두 가지 속성에 대해서 알아보고 나니, inline-block 라는 속성에 대해서도 궁금해졌다.

이 속성은 어떤 특징을 가지고 동작할까?

block 요소에 세로 값만 주고 inline-block으로 바꾼 모습

inline-block

- width, height 속성이 적용된다. #block - width, height 값을 주지 않으면 자동으로 내부 요소만큼의 너비만 차지한다. #Inline - 새 줄로 행갈이를 하지 않는다 (줄 바꿈X) #Inline

이렇게, 인라인 요소와 블록요소의 특징이 합쳐진 속성이라는 것을 알 수 있다.

 

상황에 따라 세 가지 속성 중 한 가지를 그때 그때 선택하여 사용하면 될 것 같다.

 

Box의 구성

1. Content Box
   : 콘텐츠가 표시되는 영역으로 그 크기는 `width` and `height 속성을 이용한다.
2. Padding Box
   : 패딩은 콘텐츠 주변의 여백을 말한다. 패딩의 크기는 `padding` 속성을 이용한다.
3. Border Box
   : 테두리는 콘텐츠와 패딩까지 둘러싼다. 테두리의 크기와 스타일은 `border` 속성을 이용한다.
4. Margin Box
   : 마진은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 박스와 다른 요소 사이의 여백을 말한다.

표준 박스 모델

코드와 이미지로 설명해보자.

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

위와 같이 가로세로, 마진, 패딩, 테두리 값을 줬다고 했을 때 실제 박스가 차지하는 공간은 몇 일까?

• 가로 350px에 세로 150px?
• 가로 410px에 세로 210px?

정답은 가로 410px에 세로 210px이다.

표준 박스 모델의 가로 세로

- 가로 width 350px + margin 25px + padding 25px + border 5px + 5px = 410px
- 세로 height 150px + margin 25px + padding 25px + border 5px + 5px = 210px

각각 지정해준 영역들의 크기가 서로 더해져서 생각보다 큰 박스 영역이 잡히는 것을 볼 수 있다.

박스의 가로 세로 길이를 내가 원하는 대로 맞추기 위해서는 박스 구성 요소들의 값을 모두 더해야한다는 것인데, 이는

• CSS 스타일링의 결과를 예측하기 어렵게 만들고,
• 유지보수의 측면에서도 비효율적이다.

그래서 이러한 문제를 개선하기 위해 등장한 개념이 바로 대체 CSS Box Model 이다.

 

대체 Box Model

대체 박스 모델의 가로 세로

모든 요소가 대체 박스 모델을 사용하여 가로 세로 길이를 가지길 원한다면, 

html {
  box-sizing: border-box;
}

아래와 같은 코드를 reset CSS에 추가하여 적용시킬 수 있다.

** 대부분의 개발자들이 이와 같은 방법을 사용한다

 

이렇게 대체 박스 모델을 적용하게 되면 아래의 이미지와 같이 표준 박스 모델의 단점을 보완하여 가로 세로 길이를 제어할 수 있다.

 

마무리하며

사실 개발을 할 때마다 reset CSS에서 대체 박스 모델을 적용해서 작업해오고 있었고, 왜 box-sizing을 쓰는지 어렴풋하게는 알고 있었다.

나는 표준 박스 모델이 가지는 단점을 직접 경험해볼 일이 별로 없었지만, reset CSS에서 적용하는 속성 중 한 가지를 왜 쓰는지 이번에 '정확하게' 알게 된 것 같다.

 

그럼 이만~ 다음에 또 봅시다 :)