HTML/CSS - box-sizing

안녕하세요, 오늘은 간단히 box-sizing에 대해 정리해보겠습니다.

box-sizing은 요소의 크기 계산 기준을 지정하는 속성입니다.

 

◆ box-sizing속성의 값

-. content-box : 너비(width, height)만으로 요소의 크기 계산 (기본값)

-. border-box : 너비(width, height)와 안쪽 여백(padding)과 테두리 선(border)을 포함하여 요소의 크기 계산

 

아래 그림으로 설명드리겠습니다.

위의 box가 border-box 개념이고 아래 box2가 실제 content box입니다. box2에서 padding과 border을 추가함으로써 영역이 커진 것을 확인할 수 있습니다. 여기서 padding/border 추가를 하지만 전체 width와 height를 유지하고 싶다면 box-sizing: border-box; 를 추가해주면 padding영역과 border를 감안하여 width/height가 content-box와 동일하게 만들 수 있습니다!

 

지금 HTML과 CSS 공부를하며 웹사이트를 만들어보고 있는데 box-sizing을 따로 설정하지 않아서 영역을 크게 잡은 요소들이 있었다. box-sizing을 사용하여 원하는 공간만을 사용해 효율적인 사이트로 다시 만들어 보아야겠다.