<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	#wrapper{
		width:600px;
		height:500px;
		overflow:hidden;
		margin:auto;
	}
	#section{
		background-color:green;
		width:100px;
		height:100%;
		float:left;
		
	}    
	#header{
		background-color:yellow;
		width:100%;
		height:100px;
	}
	#center{
		background-color:blue;
		width:100%;
		height:300px;
	}
	#footer{
		background-color:red;
		width:100%;
		height:100px;
	}
	#content{
		width:500px;
		height:500px;
		float:left;
	}
    
</style>
</head>
<body>
	<div id="wrapper">
		<div id="section"></div>
		<div id="content">
			<div id="header">	</div>
			<div id="center"></div>
			<div id="footer"></div>
		</div>
	</div>
</body>
</html>

'프로그래밍 > html_css' 카테고리의 다른 글

css - box의 이해  (0) 2020.08.29
css - clear 이해  (0) 2020.08.29
css - block의 이해  (0) 2020.08.29
css - 태그의 테두리 제어  (0) 2020.08.29
HTML의 기본적인 table 태그  (0) 2020.08.26

+ Recent posts