©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 User Interface</title>
	<style>
		div {
			width: 350px;
			height: 100px;
			margin: 10px;
		}
		#origin { border: 1px solid orange; }
		#no_border_box {
			border: 10px solid green; 
			padding: 20px; 
		}
		#border_box { 
			border: 10px solid yellow; 
			padding: 20px; 
			box-sizing: border-box; 
		}
	</style>
</head>

<body>

	<h1>box-sizing 속성을 이용한 크기 설정</h1>
	<div id="origin">원래 div 요소의 크기에요!</div>
	<div id="no_border_box">이 요소는 설정한 패딩과 테두리의 너비만큼 크기가 늘어났어요!</div>
	<div id="border_box">이 요소는 설정한 패딩과 테두리의 너비에 상관없이 크기가 똑같아요!</div>

</body>

</html>