<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B-1</title>
<style>
*{padding: 0; margin: 0;}
#wrap{width: 100%;}
header{width: 100%; background-color: #112ffa;}
.header_container{width:1200px; margin: 0 auto; display: flex;}
.header_container .logo{width:20%; height: 100px; background-color: #e3a3a3;}
.header_container nav{width:80%; height: 100px; background-color: #9913a3;}
#slider{width: 1200px; margin: 0 auto; height: 300px; background-color: #bfbfbf;}
#main{width: 1200px; margin: 0 auto; display: flex; height: 200px; background-color: #734d4d;}
.content1{width:400px; height: 200px; background-color: #6a6a7a;}
.content2{width:400px; height: 200px; background-color: #21345a;}
.content3{width:400px; height: 200px; background-color: #6a6ffa;}
#footer{width: 100%; height: 100px; background-color: #567ffa;}
.footer_container{width: 1200px; margin: 0 auto; height: 100px; display: flex;}
.footer1{width: 20%; height: 100px; background-color: #b7a22a;}
.footer2{width: 80%; height: 100px; background-color: #5f88aa; display: flex; flex-direction: column;}
.footer2 .fmenu1{width:100%; height: 50%; background-color: #3aaa2f;}
.footer2 .fmenu2{width:100%; height: 50%; background-color: #fbaa2f;}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="header_container">
<h1 class="logo"></h1>
<nav></nav>
</div>
</header>
<article id="slider"></article>
<main id="main">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</main>
<footer id="footer">
<div class="footer_container">
<div class="footer1"></div>
<div class="footer2">
<div class="fmenu1"></div>
<div class="fmenu2"></div>
</div>
</div>
</footer>
</div>
</body>
</html>출처
https://www.youtube.com/watch?v=QwNNvxaPg1w&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g&index=5
'유튜브 영상 > 웹디자인기능사-webstoryboy' 카테고리의 다른 글
| 레이아웃 유형(B-3) (0) | 2024.03.14 |
|---|---|
| 레이아웃 유형(B-2) (0) | 2024.03.14 |
| 레이아웃 유형(A-4) (1) | 2024.03.14 |
| 레이아웃 유형(A-3) (0) | 2024.03.14 |
| 레이아웃 유형(A-2) (0) | 2024.03.14 |
