40일차[HTML/CSS] (3)-box-sizing:border-box

box-sizing이란?

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성입니다.

width와 height는 요소의 콘텐츠의 크기를 지정합니다.

따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다.

box-sizing 속성을 border-box로 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다.

box-sizing:border-box를 사용하지 않았을 때

css는 기본 설정 값은 content-box입니다.

따라서 초기 설정에서 width,height를 설정해도 border, padding, margin은 따로 계산되기 때문에

사용자가 width를 100px로 설정해도 설정값보다 영역이 더 커지게 되어 레이아웃을 잡기가 어려워집니다.

div{
    background-color: orange;
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid pink;
    box-sizing: border-box;    }

• 위의 250x250이 나오는 이유는
• padding 20+20=40
• width 200
• border5+5=10
• 40+200+10=250이라는 크기가 나온다.
• 따라서 사용자는 width를 200으로 하고싶지만 여러 가지 부수적인 것들이 자꾸 더해저서 250이라는 설정했던 값보다 50이 더 크게 나온다 이럴 때 우리는 border-box를 쓸 수 있다.

box-sizing:border-box를 사용했을 때

background-color: orange;
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid pink;
    box-sizing: border-box;

border-box속성을 사용하니 사용자가 설정한 width:200에 맞추어서 크기가 설정되었다.

한마디로 border-box와 content-box는 계산 방법이 다른 것이다.

border-box를 사용할 때 패딩,테두리등의 크기를 신경 쓰지 않을 수 있다.

하지만 컨텐츠 영역이 자동으로 초기 설정 값 보다 paddding, border, margin 크기만큼

줄어서 적게 설정되니 이점 주의하자.