유튜브 영상/웹디자인기능사-webstoryboy
레이아웃 유형(D-1)
book_lover
2024. 3. 14. 15:29
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-1</title>
<style>
*{padding: 0; margin: 0;}
#wrap{width: 100%; display: flex; flex-wrap: wrap;}
#aside{width:200px; height: 850px; background-color: #fafafa;}
#aside .logo{width: 200px; height: 20%; background-color: #bb1199;}
#aside nav{width:200px; height: 80%; background-color: #2003af;}
#main{width: calc(100% - 200px); height: 850px; background-color: aquamarine;}
#main .slider .link{position: absolute; right: 0; top: 0; background-color: #989898; width: 150px; height: 300px;}
main .slider{position: relative; ;width: 100%; height: 400px; background-color: #021fa1;}
main .banner{width: 100%; height: 200px; background-color: #0dfaa1;}
main .contents{width: 100%; height: 250px; background-color: #d12fa1;}
#footer{width: 100%; height: 100px; display: flex;}
#footer .logo{width: 200px; height: 100px; background-color: #456fff;}
#footer .footer_container{width: calc(100% - 200px); display: flex;}
#footer .footer_container .copyright{width: 80%; height: 100px; background-color: #1ffacc;}
#footer .footer_container .sns{width: 20%; height: 100px; background-color: #123ffa;}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<h1 class="logo"></h1>
<nav></nav>
</aside>
<main id="main">
<article class="slider">
<div class="slider_box"></div>
<div class="link"></div>
</article>
<article class="banner"></article>
<article class="contents"></article>
</main>
<footer id="footer">
<h1 class="logo"></h1>
<div class="footer_container">
<div class="copyright"></div>
<div class="sns"></div>
</div>
</footer>
</div>
</body>
</html>
출처
https://www.youtube.com/watch?v=CZRVhkRr3Ak&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g&index=13