๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒ HTML\CSS

ํ™”๋ฉด ๋‚˜๋ˆ„๊ธฐ / ์ปฌ๋Ÿฌ๋ธ”๋Ÿญ ๋งŒ๋“ค๊ธฐ

by Meteora_ 2021. 2. 26.
728x90

์ฝ”๋“œ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#wrapper{
	width: 600px;
	height: 600px;
	margin: 0 auto;
}

#left{
	width: 200px;
	float: left;
}

.red{
	background-color: red;
	width: 200px;
	height: 500px;
}

.yellow{
	background-color: yellow;
	width: 200px;
	height: 100px;
}

#center{
	width: 200px;
	float: left;
}

.blue{
	background-color: blue;
	width: 200px;
	height: 200px;
}

.green{
	background-color: green;
	width: 200px;
	height: 400px;
}

#right{
	width: 200px;
	float: left;
}

.black{
	background-color: black;
	width: 200px;
	height: 300px;
}

.pink{
	background-color: pink;
	width: 200px;
	height: 300px;
}

</style>

</head>
<body>

	<div id="wrapper">
	
	<div id="left">
		<div class="red">red</div>
		<div class="yellow">yellow</div>
	</div>
	
	<div id="center">
		<div class="blue">blue</div>
		<div class="green">green</div>
	</div>
	
	<div id="right">
		<div class="black">black</div>
		<div class="pink">pink</div>
	</div>
	
	</div>
	
</body>
</html>

๋Œ“๊ธ€