[css] box-sizing 속성

css의 box-sizing 속성에 대해 알아보자

box-sizing 속성이란

• box-sizing은 박스의 크기를 무엇을 기준으로 계산할지 결정하는 속성이다.
• 쉽게 말하면 너비와 높이를 계산할 때, padding과 border를 포함할지를 결정하는 속성인 것이다.

• 기본적으로 box-sizing은 content-box로, 박스의 크기를 계산할 때 content 영역을 기준으로 한다.
• 만약 박스 크기의 기준을 border까지로 잡고 싶다면 box-sizing: border-box를 해준다.

예시를 보면, border-box를 지정한 요소와 content-box인 요소의 크기 차이가 있음을 알 수 있다.

See the Pen box-sizing by KumJungMin (@kumjungmin) on CodePen.