티스토리 뷰

나만의 공부연습방/CSS(레이아웃) 직접해보기

스스로 만든 레이아웃 1탄

웹디자이너를꿈꾸는세진 2022. 1. 20. 12:49 

<!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>2022.01/20</title>
    <style>
        * {
            margin: 0;
            height: 0;
        }
        body {
            background-color: pink;
        }
        #container {
            width: 1200px;
            margin: 0 auto;
        }
        #header {
            width: 1200px;
            height: 100px;
            background-color: red;
        }
        #nav {
            width: 1200px;
            height: 100px;
            background-color: orange;
        }
        #contents .left {
            width: 300px;
            height: 780px;
            background-color: yellow;
            float: left;
        }
        #contents .center {
            width: 600px;
            height: 780px;
            background-color: green;
            float: left;
        }
        #contents .right {
            width: 300px;
            height: 780px;
            background-color: blue;
            float: left;
        }
        #footer {
            width: 1200px;
            height: 100px;
            background-color: chocolate;
            clear: both;
        } 
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="contents">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div id="footer"></div>
    </div>
</body>
</html>

 

'나만의 공부연습방 > CSS(레이아웃) 직접해보기' 카테고리의 다른 글

스스로 만든 레이아웃 6탄  (0) 2022.02.03
스스로 만든 레이아웃 5탄  (0) 2022.01.26
스스로 만든 레이아웃 4탄  (0) 2022.01.25
스스로 만든 레이아웃 3탄  (0) 2022.01.23
스스로 만든 레이아웃 2탄  (9) 2022.01.20

UP NEXT : 나만의 공부연습방/CSS(레이아웃) 직접해보기

댓글
© 2018 webstoryboy