[CSS] box-sizing: border-box와 content-box 간단 정리

🗒 make-up할 때 width와 heigth를 하나하나 계산하는 번거로운 일을 한 번에 해결해줄 수 있는 box-sizing에 대해서 알아보자!

📌 box-sizing 속성?

: box-sizing 속성은 width 속성과 height 속성이 차지하는 범위를 지정한다.

전체너비 = width + 2 x (margin+border+padding)
전체높이 = height +2 x (margin+border+padding)

📌 box-sizing: border-box;

padding과 border 값을 모두 포함하여 width,height를 계산함
(단, margin은 포함하지 않음!)

따라서 요소의 크기가 전체너비/높이에 넘칠 때 box-sizing: border-box 속성을 적용하여 간단하게 해결할 수 있다!

(*가장 많이 사용)

📌 box-sizing: content-box;

padding과 border값은 width,height에 포함되지 않고,
따로 추가하여 계산됨(크기가 커짐)

📌 결론

: 가장 잘 활용할 수 있는 border-box를 매번 추가하여 사용하기엔 번거로움이 있으므로 전체 영역에 해당 태그를 (미리)적용해놓고 사용하자!

*{box-sizing: border-box;}

📚 Reference

: 국비지원 수업