너비에 맞게 box-sizing 사용하기

필요한 이유

input 태그, div 태그 내에 CSS를 이용한 박스 형태 등을 사용한다면 box-sizing이 필요합니다. 왜냐하면, 이 속성을 설정하면 보다 정확하게 박스형태를 갖출 수 있기 때문입니다. 따라서 이 속성은 요소의 너비와 높이를 계산하는 방법을 지정하는 속성이라고 생각하시면 됩니다.

사용법

box-sizing: content-box;

콘텐츠 영역을 기준으로 크기를 정합니다.

box-sizing: border-box;

테두리를 기준으로 크기를 정합니다.

예제

다음은 box-sizing 속성을 비교한 예제입니다. 테두리가 10px이고 넓이 500px과 높이 100px 그리고 padding 값 30px로 설정했을 때 각 속성값은 어떻게 변하는지 알아보겠습니다.

 

See the Pen box-sizing example by Cho-YoungHo (@choyoungho-web) on CodePen.

box-sizing 속성 비교

content-box는 콘텐츠 영역을 기준으로 크기를 정하기 때문에 위 사진과 같이 테두리와 padding 값을 무시하고 넓이 500px과 높이 100ox이 설정된 것을 알 수 있습니다.

 

border-box는 테두리를 기준으로 크기를 정하는데 콘텐츠 영역을 보면 넓이 420px와 높이 20px이 설정된 것을 확인할 수 있습니다. 이는 양쪽 테두리 20px과 padding 값 60px을 포함한 것이기 때문입니다. 마찬가지로 높이도 20px로 설정된 이유는 위, 아래 테두리 20px과 padding 값 60px을 합쳐서 계산되기 때문입니다.

참고 사이트

box-sizing MDN