티스토리 뷰

CSS/사이트를 만들자

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

Gayeong's 2022. 2. 3. 08: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>layout02</title>
    <style>
        body {background-color: #b3e5fc;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
        #header {width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;}
        #nav {width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
        #side_left {float: left; width: 300px; height: 600px; line-height: 600px; background-color: #039be5;}
        #contents {float: left; width: 400px; height: 600px; line-height: 600px; background-color: #03a9f4;}
        #side_right {float: left; width: 300px; height: 600px; line-height: 600px; background-color: #29b6f6;}
        #footer {clear: both;  width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="side_left">side_left</div>
        <div id="contents">contents</div>
        <div id="side_right">side_right</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

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

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

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

댓글
© 2018 webstoryboy