티스토리 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout3</title>
<!-- 파비콘 -->
<link rel="shortcut icon" href="../assets/face/layout.png">
<link rel="apple-touch-icon-precomposed" href="../assets/face/layout.png">
<link rel="icon" href="../assets/face/layout.png" sizes="128x128">
</head>
<style>
*{
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
background-color: #E3F2FD;
}
#header {
width: 1200px;
height: 100px;
background-color: #B3E5FC;
}
#nav {
width: 1200px;
display: flex;
}
#nav .nav1 {
width: 600px;
height: 100px;
background-color: #81D4FA;
}
#nav .nav2 {
width: 600px;
height: 100px;
background-color: #ecbebe;
}
#contents {
width: 1200px;
display: flex;
}
#contents .aside {
width: 300px;
height: 520px;
background-color: #90CAF9;
}
#contents .content {
width: 900px;
}
#contents .content .article1 {
width: 900px;
height: 260px;
background-color: #64B5F6;
}
#contents .content .article2 {
width: 900px;
height: 260px;
background-color: #2196F3;
}
#content1 {
width: 1200px;
height: 260px;
background-color: #1E88E5;
}
#footer {
width: 1200px;
height: 100px;
background-color: #1976D2;
}
</style>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav">
<article class="nav1"></article>
<article class="nav2"></article>
</nav>
<section id="contents">
<aside class="aside"></aside>
<aside class="content">
<article class="article1"></article>
<article class="article2"></article>
</aside>
</section>
<section id="content1"></section>
<footer id="footer"></footer>
</div>
</body>
</html>이번예제도 display: flex로 만든 예제입니다.
더욱 더 다양하게 나눠봤습니다!
반응형
댓글
© 2022 babydevelop