<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin: 0px; width: 100%;font-size: 16px;font-family: Verdana, Geneva, Tahoma, sans-serif;color: #333333;}
.space{padding-left:10px;padding-top: 10px;}
.top {background-color: aqua;height: 50px;display: flex;}
.top-menus {background-color:bisque;width: 200px;margin:auto 0px 0px auto;display: flex;}
.top-menu {background-color:blueviolet;width: 100%;padding-left:10px}
.main{display: flex;}
.left {background-color: blueviolet; width:20%;}
.left-menus {background-color: burlywood;width:90%; height:30px; margin:20px auto auto auto ;}
.left-menu{background-color: chocolate; height: 100%;}
.center{background-color: darkolivegreen;width:70%;height:500px}
.center-top{background-color: darksalmon;}
.center-main{background-color: darkviolet;}
.right{background-color: forestgreen;width:10%}
.bottom{background-color: gray;height: 50px;}
</style>
</head>
<body>
<div class="all">
<div class="top space">
<div style="border: 1px solid;">top</div>
<div class="top-menus ">
<div class="top-menu">top1</div>
<div class="top-menu">top2</div>
<div class="top-menu">top3</div>
</div>
</div>
<div class="main">
<div class="left space">left
<div class="left-menus">
<div class="left-menu">menu1</div>
<div class="left-menu">menu2</div>
<div class="left-menu">menu3</div>
</div>
</div>
<div class="center space">center</div>
<div class="right space">right</div>
</div>
<div class="bottom space">botoom</div>
</div>
</body>
</html>
댓글 없음:
댓글 쓰기