레이아웃 유형(B-3)

book_lover 2024. 3. 14. 13:44
<!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: 60%; height: 100px; background-color: #5f88aa;}
        .footer3{width: 20%; height: 100px; background-color: #434aaa;}
    </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>
                    <div class="footer3"></div>
                </div>
            </footer>
        </div>
    </body>
    
    </html>
출처
https://www.youtube.com/watch?v=pLxtF5yAw84&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g&index=7