[CSS] box-sizing : content-box VS border-box

box-sizing

• 박스의 사이즈에 대한 기준을 잡는 개념!
• default로 content-box가 되어있다.

출처 : codecademy

content-box

출처 : codecademy

• content를 기준으로 하는 box-sizing 방법
• width와 height가 content를 기준으로 하게 된다.
• content에 대한 너비와 높이를 정하게 되므로 실제 렌더링되는 박스의 크기를 계산하는 게 복잡함(padding, border 두께까지 고려)

h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}

border-box

출처 : codecademy

• border를 기준으로 하는 box-sizing 방법
• width와 height가 content, padding, border를 합친 것을 기준으로 하게 된다.
• 즉, 실제 렌더링되는 박스의 너비와 높이를 정하게 되고 설정된 padding, border의 두께에 맞춰서 알아서 content의 크기가 결정된다.
• 더 직관적으로 box의 크기를 이해하기 편하다.

/* default가 아니기 때문에, 전체(*)에 대해 아래와 같이 선언해줘야한다. */

* {
  box-sizing: border-box;
}

h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}