[CSS] box-sizing 속성이 뭐임?

CSS 속성중 box-sizing은 width와 height를 계산하는 방법을 지정한다.

box-sizing : content-box속성은 width 또는 height가 콘텐츠영역 + padding + border 로 합산된다. 즉 padding또는 border가 증가한다고하면 전체크기(width,hegiht)가 증가한다.

box-sizing : border-box속성은 padding 또는 border 영역이 콘텐츠영역 크기로 고려된다. 즉 padding이나 border가 아무리 증가해도 전체 크기에 영향이 가지않는다.
만약 width가 300이고 padding이나 border 속성이 없는 박스가 있다고할때 padding 속성을 25, border 속성을 25 준다고 치면 300(width) = 200(content) + padding(25+25) + border(25+25) 이런식으로 계산된다.
해당 속성을 사용하는것이 대부분 크기를 조절하는데 있어서 편하다.

다음 예시를보자.
참고로 boxSizng의 기본속성은 content-box로 지정된다.

  const contentBox = { 
  "boxSizing": "content-box", 
  width:"300px",height:"100px",backgroundColor:"green",
  padding:"50px",borderWidth:"50px", borderStyle: "solid",borderColor:"red" 
  }
  
   {/* inner 컨테이너 */}
    <div style={{width:"400px", height:"400px", backgroundColor:"black" }}>
      {/* contentBox 박스 */}
      <div style={contentBox}/>
    </div>

위 코드의 의도는 inner 컨테이너의 width,height의 크기를 벗어나지 않는 선에서 안의 div 박스를 출력하려 했다.
그렇지만 다음과 같이 출력이 된다.

안쪽의 div박스가 contanier(색상이 Black)를 벗어나서 출력되고 있음을 볼 수 있다.
content-box 속성이 지정된 내부 div 박스의 크기를 width만 계산해보자
width = content(green 300px) + padding(green 50px + 50px) + border(red 50px + 50px) = 500px
즉 inner컨테이너 박스가 400px임에도 불구하고 내부 div 박스가 500px이되어 위와같이 벗어나는 현상이 발생하는 것 이다.

box-sizing : border-box 를 사용해보자!

  const borderBox =  { "boxSizing" : "border-box", 
  width:"300px",height:"100px",backgroundColor:"green",padding:"50px",
  borderWidth:"50px",borderStyle: "solid",borderColor:"red"}
  
  {/* inner 컨테이너 */}
    <div style={{width:"400px", height:"400px",backgroundColor:"black"}}>
      {/* borderBox 박스 */}
      <div style={borderBox}/>
    </div>

마찬가지로 계산해보자
width = content(green 100px) + padding(green 50px + 50px) + border(red 50px + 50px) = 300px
컨테이너박스에 벗어나지 않고 내부 div박스가 적절하게 배치되었음을 볼 수 있다.

현업에서는 border-box 속성을 많이 사용한다고한다. 콘텐츠 영역의 크기를 구성하는데 있어서 유지보수 면에서 이점이 많아서 일까??