레이아웃 유형(A-4)

book_lover 2024. 3. 14. 12:36

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" contkrt="width=device-width, initial-scale=1.0">
    <title>A-3</title>
    <style>
        *{margin: 0; padding: 0;}
        #wrap{width: 1200px; background-color: #b2b2b2; margin: 0 auto;}
        header{width:100%; height: 100px; display: flex;}
        header .logo {width:20%; background-color: #343434; height: 100px;}
        header nav{width:80; background-color: #2a2a2a; height:100px;}
        .slide{height: 300px; width: 100%; background-color: #e2e2e2;}
        main{width: 100%; background-color: #d2d2f2; height: 200px; display: flex;}
        main .content1{width:33.3333%; background-color: #ff22aa; height: 200px;}
        main .content2{width:33.3333%; background-color: #bb3322; height: 200px;}
        main .content3{width:33.3333%; background-color: #cc22cc; height: 200px;}
        footer{width:100%; height: 100px; background-color: #f3f3f3; display: flex;}
        footer .logo{width:20%; height: 100px; background-color: #a3a3a3;}
        footer .copywrap{width: 80%; height: 100px; background-color: #5a5faf; display: flex; flex-direction: column;}
        footer .copywrap .submenu{background-color: #62e7ff; height: 50%; width: 100%;}
        footer .copywrap .copyright{background-color: #c33a3c; height: 50%; width: 100%;}
    </style>
</head>
<body>
    <div id="wrap">
        <header>
            <h1 class="logo"></h1>
            <nav></nav>
        </header>
        <section class="slide"></section>
        <main>
            <article class="content1"></article>
            <article class="content2"></article>
            <article class="content3"></article>
        </main>
        <footer>
            <div class="copywrap">
                <div class="submenu"></div>
                <div class="copyright"></div>
            </div>
            <h1 class="logo"></h1>
        </footer>
    </div>    
</body>
</html>

출처

https://www.youtube.com/watch?v=3XQMhbcEH88&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g&index=4

https://www.figma.com/file/iD3Ehm4HRhe16Vx6kxz3ob/%5B%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%EA%B0%80-%EC%8B%A4%EB%A0%A5%EC%9D%B4%EB%8B%A4%5D-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91%ED%8E%B8?type=design&node-id=26248-1098&mode=design

Figma

Created with Figma