WEB.CSS

chapter16 : float

GAWON 2023. 5. 18. 09:40 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		border: 1px solid black;
		box-sizing: border-box;	/* box크기에 border가 포함되는 방식 */
	}
	.container{
		width: 1000px;
		margin: auto;
	}
	.top-menu{
		background-color: aqua;
		width: 100%;
		height: 300px;
	}
	.body-menu{
		/* background-color: gray; */
		width: 100%;
		height: 700px;
	}
	.left-menu{
		height: 100%;
		width: 20%;
		background-color: lime;
		float:left;
	}
	.right-menu{
		height: 100%;
		width: 80%;
		/* background-color: olive; */
		float:left;
	}
	.right-top-menu{
		width: 100%;
		height: 60%;
		background-color: silver;
	}
	.right-bot-menu{
		width: 100%;
		height: 40%;
		background-color: teal;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="top-menu"></div>
		<div class="body-menu">
			<div class="left-menu"></div>
			<div class="right-menu">
				<div class="right-top-menu"></div>
				<div class="right-bot-menu"></div>
			</div>
		</div>
	</div>
</body>
</html>