• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Float</title>
7
    <style>
8
        div.page {
9
            border: 3px solid #CD5C5C;
10
            overflow: auto;
11
        }
12
        h2 { text-align: center; }
13
        header{ border: 3px solid #FFD700; }
14
        nav {
15
            border: 3px solid #FF1493;
16
            width: 150px;
17
            float: left;
18
        }
19
        section {
20
            border: 3px solid #00BFFF;
21
            margin-left: 156px;
22
        }
23
        footer{ border: 3px solid #00FA9A; }
24
    </style>
25
</head>
26
​
27
<body>
28
​
29
    <h1>float 속성을 이용한 레이아웃</h1>
30
    <div class="page">
31
32
        <header>
33
            <h2>header 영역</h2>
34
        </header>
35
        <nav>
36
            <h2>nav 영역</h2>
37
            <p>여기에는 보통 메뉴가 들어갑니다.</p>
38
        </nav>
39
        <section>
40
            <h2>section 영역</h2>
41
            <p>여기에는 페이지에 해당하는 내용이 들어갑니다.<br>
42
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget scelerisque libero finibus. Phasellus quis vulputate ante. Fusce sit amet viverra justo. Donec id elementum mauris. Nam id porttitor nisl, et suscipit nunc. Vestibulum sit amet volutpat quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis placerat sem eu facilisis ultricies.
43
            </p>
44
        </section>
45
        <footer>
46
            <h2>footer 영역</h2>
47
        </footer>
48
    </div>
49
​
50
</body>
51
​
52
</html>