티스토리 뷰

CSS/사이트를 만들자

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

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

코드

<!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>laylout05</title>
    <style>
        * {margin: 0; padding: 0;}
        #wrap {font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
        #header-wrap { width: 100%;  background-color: #8d6e63;}
        #banner-wrap { width: 100%; background-color: #a1887f;}
        #content-wrap { width: 100%;  background-color: #bcaaa4;}
        #footer-wrap { width: 100%; background-color: #d7ccc8;}

        .header-container { width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #3e2723;}
        .banner-container { width: 1000px; margin: 0 auto; height: 300px; line-height: 300px; background-color: #4e342e;}
        .content-container { width: 1000px; margin: 0 auto; height: 500px; line-height: 500px; background-color: #5d4037;}
        .footer-container { width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #6d4c41;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header-wrap">
            <div class="header-container">header</div>
        </div>
        <div id="banner-wrap">
            <div class="banner-container">banner</div>
        </div>
        <div id="content-wrap">
            <div class="content-container">content</div>
        </div>
        <div id="footer-wrap">
            <div class="footer-container">footer</div>
        </div>
    </div>
</body>
</html>

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

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

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

댓글
© 2018 webstoryboy