티스토리 뷰

Layout

레이아웃 2-1

babydeveloper 2022. 3. 3. 18:18

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout02_1</title>

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="../assets/face/layout.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/face/layout.png">
    <link rel="icon" href="../assets/face/layout.png" sizes="128x128">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 1200px;
            margin: 0 auto;
            background-color: #E8F5E9;
        }

        #header {
            width: 1200px;
            height: 100px;
            background-color: #CEE5CB;
        }

        #nav {
            width: 1200px;
            display: flex;
        }

        #nav .nav1 {
            width: 400px;
            height: 100px;
            background-color: #AFD5AB;
        }

        #nav .nav2 {
            width: 400px;
            height: 100px;
            background-color: #90c08b;
        }

        #nav .nav3 {
            width: 400px;
            height: 100px;
            background-color: #AFD5AB;

        }

        #contents {
            width: 1200px;
            display: flex;
        }

        #contents .content1 {
            width: 300px;
            height: 780px;
            background-color: #91C58A;
        }

        #contents .content2 {
            width: 600px;
        }

        #contents .content2 .article1 {
            width: 600px;
            height: 390px;
            background-color: #74aa6d;
        }

        #contents .content2 .article2 {
            width: 600px;
            height: 390px;
            background-color: #55854e;
        }

        #contents .content3 {
            width: 300px;
            height: 780px;
            background-color: #183614;
        }

        #footer {
            width: 1200px;
            height: 100px;
            background-color: #67AD5B;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <header id="header"></header>
        <nav id="nav">
            <article class="nav1"></article>
            <article class="nav2"></article>
            <article class="nav3"></article>
        </nav>
        <section id="contents">
            <aside class="content1"></aside>
            <aside class="content2">
                <article class="article1"></article>
                <article class="article2"></article>
            </aside>
            <aside class="content3"></aside>
        </section>
        <footer id="footer"></footer>
    </div>

</body>

</html>
 
 
display: flex를 이용한 레이아웃입니다.
더욱 다양하게 레이아웃을 나눠 봤습니다.
 
반응형

'Layout' 카테고리의 다른 글

Layout 3-1  (0) 2022.04.14
레이아웃 3  (0) 2022.03.23
레이아웃2  (0) 2022.03.03
레이아웃1  (0) 2022.03.03

UP NEXT : Layout

댓글
© 2022 babydevelop