<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" contkrt="width=device-width, initial-scale=1.0">
<title>C-1</title>
<style>
*{margin: 0; padding: 0;}
#wrap{width: 1000px; background-color: aliceblue; display: flex;}
#aside{width:20%; background-color: aqua; height: 650px;}
#aside .logo{width:100%; height: 20%; background-color: #ff2123 ;}
#aside nav{width:100%; height: 80%; background-color: #af1123 ;}
#main{width: 80%; height: 650px; background-color: beige;}
#slider{width: 100%; height: 350px; background-color: cadetblue;}
#contents{width: 100%; height: 200px; background-color: #33aa22; display: flex;}
#contents .content1{width:33.3333%; height:200px; background-color: #56f1aa;}
#contents .content2{width:33.3333%; height:200px; background-color: #072020;}
#contents .content3{width:33.3333%; height:200px; background-color: #15659f;}
#footer{width: 100%; height: 100px; background-color: #bababa; display: flex;}
#footer .logo{width: 20%; height: 100px; background-color: #fffaba;}
#footer .fwrap{width: 80%; height: 100px; display: flex; flex-direction: column;}
#footer .fwrap .m1{width: 100%; height: 50%; background-color: #affaab;}
#footer .fwrap .m2{width: 100%; height: 50%; background-color: #f1acba;}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<h1 class="logo"></h1>
<nav></nav>
</aside>
<main id="main">
<article id="slider"></article>
<section id="contents">
<article class="content1"></article>
<article class="content2"></article>
<article class="content3"></article>
</section>
<section id="footer">
<h1 class="logo"></h1>
<article class="fwrap">
<article class="m1"></article>
<article class="m2"></article>
</article>
</section>
</main>
</div>
</body>
</html>출처
https://www.youtube.com/watch?v=i5KPtxLRCyc&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g&index=9
'유튜브 영상 > 웹디자인기능사-webstoryboy' 카테고리의 다른 글
| 레이아웃 유형(D-1) (0) | 2024.03.14 |
|---|---|
| 레이아웃 유형(B-4) (1) | 2024.03.14 |
| 레이아웃 유형(B-3) (0) | 2024.03.14 |
| 레이아웃 유형(B-2) (0) | 2024.03.14 |
| 레이아웃 유형(B-1) (1) | 2024.03.14 |
