[CSS] box-sizing - element의 크기 정하기

box-sizing - element의 크기 정하기

오늘은 element의 크기를 정해줄 수 있는 box-sizing에 대해서 알아보자.

 

box-sizing

box-sizing의 속성으로는 기본적으로 content-box, border-box 두가지가 있고, 기본값이 content-box로 되어있다.

content-box

크기의 기준이  content 영역이다. 그렇기 때문에 padding의 크기나, border의 크기를 지정하면 설정한 width와 height보다 더 큰 영역을 차지하는 element가 생성된다.

아래 간단한 예시를 보자.

<div class="content-box-div"></div>

.content-box-div {
    box-sizing: content-box;
    width: 500px;
    height: 200px;
    padding: 10px;
    border: 10px solid black;
}

border-box

크기의 기준이 border(테두리)이다. 그렇기 때문에 padding의 크기나, border의 크기를 포함한 width와 height 크기의 영역을 차지하는 element가 생성된다.

<div class="border-box-div"></div>

.content-box-div {
    box-sizing: border-box;
    width: 500px;
    height: 200px;
    padding: 10px;
    border: 10px solid black;
}

마무리

두가지를 직접적으로 비교해서 보면 아래와 같다.

width와 height를 둘다 동일하게 설정하였지만, content외 padding과 border의 크기에 따라 달라지는 것을 알 수 있다.

content-box의 width, height는 content의 width, height이다.

border-box의 width, height는 content + padding + border 의 width, height이다.