티스토리 뷰

CSS/사이트를 만들자

사이트를 만들자 - 레이아웃7

Gayeong's 2022. 2. 3. 08:56

 

 

코드

<!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>layou07</title>
    <style>
        /* 전체 레이아웃 */
        * {margin: 0; padding: 0;}
        #wrap {font-size: 20px; color: #fff; text-align: center;}
        #header { height: 140px; }
        #banner { height: 450px; line-height: 450px; background-color: #4dd0e1;}
        #contents { height: 950px; }
        #footer { height: 220px; }

        /* 레이아웃 */
        #header-top { height: 70px; line-height: 70px; background: #b2ebf2; }
        #header-nav { height: 70px; line-height: 70px; background: #80deea; }
        #content1 { height: 90px; line-height: 90px; background-color: #26c6da; }
        #content2 { height: 480px; line-height: 480px; background-color: #00bcd4 ;}
        #content3 { height: 380px; line-height: 380px; background-color: #00acc1 ; }
        #footer-nav { height: 60px; line-height: 60px; background-color: #0097a7; }
        #footer-info { height: 160px; line-height: 160px; background-color: #00838f; }

        /* 컨테이너 */
        .container { width: 1100px; margin: 0 auto; height: inherit; /*height: 100%;*/ background-color: rgba(0, 0, 0, 0.3);}

    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id="header-top">
                <div class="container">header-top</div>
            </div>
            <div id="header-nav">
                <div class="container">header-nav</div>
            </div>
        </div>
        <!-- //header -->

        <div id="banner">
            <div class="container">banner</div>
        </div>
        <!-- //banner -->

        <div id="contents">
            <div id="content1">
                <div class="container">content1</div>
            </div>     
            <div id="content2">
                <div class="container">content2</div>
            </div>     
            <div id="content3">
                <div class="container">content3</div>
            </div>     
        </div>
        <!-- //contents -->

        <div id="footer">
            <div id="footer-nav">
                <div class="container">footer-nav</div>
            </div>
            <div id="footer-info">
                <div class="container">footer-info</div>
            </div>
        </div>
        <!-- //footer -->

    </div>
    <!-- //wrap -->
</body>
</html>

'CSS > 사이트를 만들자' 카테고리의 다른 글

사이트를 만들자 - 레이아웃 6  (0) 2022.02.03
사이트를 만들자 - 레이아웃 5  (0) 2022.02.03
사이트를 만들자 - 레이아웃4  (0) 2022.02.03
사이트를 만들자 - 레이아웃3  (0) 2022.02.03
사이트를 만들자 - 레이아웃2  (0) 2022.02.03

UP NEXT : CSS/사이트를 만들자

댓글
© 2018 webstoryboy