티스토리 뷰
<!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;
height: 100px;
background-color: #81D4FA;
}
#contents {
width: 1200px;
display: flex;
}
#contents .aside {
width: 400px;
height: 780px;
background-color: #90CAF9;
}
#contents .content {
width: 800px;
}
#contents .content .article1 {
width: 800;
height: 260px;
background-color: #64B5F6;
}
#contents .content .article2 {
width: 800;
height: 260px;
background-color: #2196F3;
}
#contents .content .article3 {
width: 800;
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"></nav>
<section id="contents">
<aside class="aside"></aside>
<aside class="content">
<article class="article1"></article>
<article class="article2"></article>
<article class="article3"></article>
</aside>
</section>
<footer id="footer"></footer>
</div>
</body>
</html>
이번예제 또한 display:flex로 만든 예제입니다.
좀더 다양하게 레이아웃을 만들어보는중입니다!
반응형
'Layout' 카테고리의 다른 글
| Layout 3-1 (0) | 2022.04.14 |
|---|---|
| 레이아웃 2-1 (0) | 2022.03.03 |
| 레이아웃2 (0) | 2022.03.03 |
| 레이아웃1 (0) | 2022.03.03 |
UP NEXT : Layout
댓글
© 2022 babydevelop