<!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>
