CSS Box Sizing 이란 무엇인가요? 요소의 크기 안에 마진과 패딩 포함 시키기

안녕하세요. 지오입니다. 오늘은 css box-sizing 속성에 대해 알아보도록 하겠습니다. box-sizing 속성이란 요소의 전체 폭과 높이 크기에 패딩과 보더를 포함시킬 수 있게 하는 것입니다.

box-sizing 요소가 없는 경우

기본적으로 요소의 폭과 높이의 총 크기는 패딩과 보더를 포함해 계산됩니다. 즉, 요소의 크기를 지정하고 패딩과 보더를 추가할 경우, 실제보다 큰 요소가 생겨나게 되는 것입니다.

box-sizing 속성이 부여되지 않을 경우, 여백이 요소의 전체 크기가 커진다.

box-sizing 속성을 통한 해결

box-sizing 속성을 사용하면 패딩과 보더를 요소의 전체 폭과 높이 안에 포함시킬 수 있습니다. 보통 해당 모든 요소에 해당 속성을 적용하는 것이 디자인 측면에서 좋기 때문에, 이를 전체 요소에 부여하곤 합니다. box-sizing 속성을 html 내 모든 요소에 부여하는 css 코드는 다음과 같습니다.

* {
    box-sizing: border-box;
}

box-sizing 속성을 부여하고 패딩 30을 주면, 전체 크기는 변하지 않는다.

참조 문서:

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• https://www.w3schools.com/css/css3_box-sizing.asp