티스토리 뷰
<!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>layout2</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">
<style>
*{
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
background-color: #E8F5E9;
}
#header {
width: 1200px;
height: 100px;
background-color: #CEE5CB;
}
#nav {
width: 1200px;
height: 100px;
background-color: #AFD5AB;
}
#contents {
width: 1200px;
display: flex;
}
#contents .aside1 {
width: 300px;
height: 780px;
background-color: #91C58A;
}
#contents .aside2 {
width: 600px;
height: 780px;
background-color: #7BB973;
}
#contents .aside3 {
width: 300px;
height: 780px;
background-color: #67AD5B;
}
#footer {
width: 1200px;
height: 100px;
background-color: #5D9E51;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<section id="contents">
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<aside class="aside3"></aside>
</section>
<footer id="footer"></footer>
</div>
</body>
</html>
display : flex를 이용한 레이아웃입니다.
반응형
'Layout' 카테고리의 다른 글
| Layout 3-1 (0) | 2022.04.14 |
|---|---|
| 레이아웃 3 (0) | 2022.03.23 |
| 레이아웃 2-1 (0) | 2022.03.03 |
| 레이아웃1 (0) | 2022.03.03 |
UP NEXT : Layout
댓글
© 2022 babydevelop