• 이 그림은 기본적으로 padding을 적용했을 때, 가로축 padding으로 인해서 원래의 의도는 가운데에 위치한 거였지만 화면을 넘어가버리는 문제가 발생했다.

box-sizing: border-box;

이는 App.css에

* {
	box-sizing: border-box; 
}

/* 모든 요소와 가상 요소에 적용 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

를 적용하면서 해결되었다. 그러면 이거는 왜 해결된걸까? box-sizing: border-box;의 사용처와 원리는 무엇일까?

기본 원리

• 우선 CSS 박스 모델에 대해서 알아보자. 박스모델은 총 4가지 영역으로 나뉜다.
  

  • Content - 요소의 실제 내용 영역
  • Padding - 콘텐츠와 경계 사이의 내부 여백
  • Border - 요소의 테두리
  • Margin - 요소의 바깥쪽 여백

• box-sizing의 기본값: content-box

  • 별도의 box-sizing을 설정하지 않으면 모든 박스는 content-box로 처리된다.
  • 이는 지정한 width와 height는 콘텐츠 영역의 크기만 포함한다.
  • 이는 padding과 border는 지정된 width와 height에 더해지는 원리이다.

  div {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
  }

  • 이럴경우 요소의 실제 크기는
  • 가로: 200px (content) + 20px (padding-left) + 20px (padding-right) + 5px (border-left) + 5px (border-right) = 250px
  • 세로: 100px (content) + 20px (padding-top) + 20px (padding-bottom) + 5px (border-top) + 5px (border-bottom) = 150px
    가 된다. 그렇기에 값이 위와 같이 계산되므로 부모 컨테이너 크기를 넘어가는 overflow 문제가 발생한다.

이를 위한 해결책

• 그렇기에 이를 해결하는 것이 box-sizing: border-box;이다.
• 이를 사용하면 padding과 border가 콘텐츠 크기에서 처리된다.

img {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 5px solid black;
}

• 이렇게 되면 이미지의 전체 크기가 부모 요소의 100%를 유지하고 padding과 border가 너비 내에서 처리된다.
• 즉, 이미지의 크기는 [전체 크기 - padding 크기 - border 크기]가 되는 것이다.

그러면 content-box는 언제 사용하는가?

• 인터넷을 찾다보면 가장 처음 할 것으로 css 초기화를 해주고 *{box-sizing:border-box;}를 하라고 한다.
• 그런데 그러면 초기 설정인 content-box는 언제 사용할까?
• 보통 이 경우는, 요소 자체 크기가 정확히 정해져야 하는 경우에 사용된다. 근데 이런 때가 도대체 얼마나 있을지 모르겠다. 반응형이 대세인 세상에서 바로 뚫어버릴텐데...
• 웃긴거는 그냥 GPT도 border-box 쓰란다. 그냥 시작하자마자

/* 모든 요소와 가상 요소에 적용 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

• 이거 해주자.

참고 자료

• CSS padding vs. margin: What’s the difference?