박스 크기의 기준을 정하는 CSS

이 포스트에서는 <div> 등의 태그로 그리는 박스 영역의 크기를 잡을 때 그 기준을 정하는 CSS에 대해서 서술합니다.

박스 크기의 기준을 정하는 CSS 프로퍼티의 이름은 box-sizing이며, 이 프로퍼티는 CSS3에서 새로 추가된 프로퍼티입니다. 이 프로퍼티가 가질 수 있는 값은 initial과 inherit를 제외하면 다음과 같이 두 가지가 있습니다.

content-box

내용 영역을 기준으로 크기를 잡습니다. 즉, 바깥 여백(margin)과 외곽선(border)과 안쪽 여백(padding)을 제외한 순수한 내용 영역을 기준으로 합니다. 따라서 같은 값일 경우 바깥 여백과 외곽선과 안쪽 여백의 합계가 클수록 실제 크기가 커집니다.

border-box

외곽선과 안쪽 여백까지 포함하여 크기를 잡습니다. 따라서 같은 값일 경우 실제 크기는 같지만 같은 값일 경우 외곽선과 안쪽 여백의 합계가 클수록 그에 반비례하여 순수한 내용 영역은 좁아집니다. 단, 바깥 여백은 기준에 포함되지 않습니다.

다음 코드를 봅시다.

<style type="text/css">
	.d-box {
		width: 200px;
		height: 100px;
		margin: 5px;
	}
	.d-bordered {
		border: 1px solid;
		padding: 4px;
	}
</style>

<div class="d-box d-bordered" style="box-sizing: content-box;">
	Hello, world!
</div>
<div class="d-box" style="background-color: #0000aa; color: #ffffff;">
	Hello, world!
</div>
<div class="d-box d-bordered" style="box-sizing: border-box;">
	Hello, world!
</div>

이 코드는 다음과 같이 표현됩니다.

첫 번째 상자와 세 번째 상자는 외곽선과 안쪽 여백이 있는 상자이고 두 번째 상자는 그렇지 않은 상자입니다. 첫 번째 상자는 상자 크기를 content-box 기준으로 하였고 세 번째 상자는 border-box 기준으로 하였습니다. 보는 바와 같이 첫 번째 상자는 두 번째 상자보다 실제 크기는 커졌지만 순수한 내용 영역 크기는 같으며, 반대로 세 번째 상자는 두 번째 상자와 실제 크기는 같지만 순수한 내용 영역 크기는 좁아졌습니다.

CSS로 레이아웃을 모양을 구현할 때 이 점을 참고로 하여 크기를 계산하면 좋습니다.