JavaScript를 위한 CSS 요소 확장

width와 height CSS 속성을 설정하는 것이 요소가 해당 크기로 될 것임을 보장하지는 않습니다. 예제를 통해 살펴보겠습니다.

예제

현재 요소의 크기는 지정된 것과 일치합니다:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

예제

이제 요소에 padding 속성을 설정해 보겠습니다. 결과적으로 요소의 실제 너비는 지정된 안쪽 여백 값만큼 더 커지고 확장될 것입니다:

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

예제

테두리가 존재하는 것도 요소를 확장시킵니다:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

예제

box-sizing 속성은 위에서 설명한 동작을 변경할 수 있게 합니다. 안쪽 여백이나 테두리가 요소를 확장하지 않도록 만들 수 있습니다. 이를 위해 이 속성에 border-box 값을 설정해야 합니다:

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

설명된 내용의 중요성

JavaScript의 관점에서 보면, 설명된 상황은 그다지 편리하지 않습니다. 결국 width 속성의 값을 읽었다고 해서 우리가 요소가 정확히 그 너비일 것이라고 확신할 수는 없게 됩니다.