box model


# box model - html 태그는 사각형 박스로 다루어 집니다 - box 는 content, padding, border, margin 으로 구성됩니다 > content : 요소의 텍스트, image 등의 실제 내용 padding : border(테두리) 안쪽에 위치하는 요소의 내부 여백 영역 border : 테두리 영역으로 테두리 두께 margin : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역

box width, height

"> 03-01_box-basic

box model


# box model - html 태그는 사각형 박스로 다루어 집니다 - box 는 content, padding, border, margin 으로 구성됩니다 > content : 요소의 텍스트, image 등의 실제 내용 padding : border(테두리) 안쪽에 위치하는 요소의 내부 여백 영역 border : 테두리 영역으로 테두리 두께 margin : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역

box width, height

"> 03-01_box-basic

box model


# box model - html 태그는 사각형 박스로 다루어 집니다 - box 는 content, padding, border, margin 으로 구성됩니다 > content : 요소의 텍스트, image 등의 실제 내용 padding : border(테두리) 안쪽에 위치하는 요소의 내부 여백 영역 border : 테두리 영역으로 테두리 두께 margin : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역

box width, height

"> 
<!-- 03_box-model/03-01_box-basic.html-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-01_box-basic</title>
<!--  
	# box model
	- html 태그는 사각형 박스로 다루어 집니다
	- box 는 content, padding, border, margin 으로 구성됩니다
	  > content : 요소의 텍스트, image 등의 실제 내용
	    padding : border(테두리) 안쪽에 위치하는 요소의 내부 여백 영역
	    border  : 테두리 영역으로 테두리 두께
	    margin  : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역
-->
<style type="text/css">
div {
	background-color: bisque;
	width: 300px;
	border: 10px solid blue; /* 테두리 : 두께 타입 색상 */
	margin: 20px;
	padding: 20px;
}
</style>
</head>
<body>
	<h1>box model</h1>
	<br/>
	<div>
		# box model
		- html 태그는 사각형 박스로 다루어 집니다
		- box 는 content, padding, border, margin 으로 구성됩니다
		  > content : 요소의 텍스트, image 등의 실제 내용
		    padding : border(테두리) 안쪽에 위치하는 요소의 내부 여백 영역
		    border  : 테두리 영역으로 테두리 두께
		    margin  : border(테두리) 바깥에 위치하는 요소의 외부 여백 영역
	</div>
	<div id="size">
		<p>box width, height</p>
	</div>
</body>
</html>