• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML Layouts</title>
7
    <style>
8
        header {
9
            background-color:lightgrey;
10
            height:100px;
11
        }
12
        nav {
13
            background-color:#339999;
14
            color:white;
15
            width:200px;
16
            height:300px;
17
            float:left;
18
        }
19
        section {
20
            width:200px;
21
            text-align:left;
22
            float:left;
23
            padding:10px;
24
        }
25
        footer {
26
            background-color:#FFCC00;
27
            height:100px;
28
            clear:both;
29
        }
30
        header, nav, section, footer { text-align:center; }
31
        header, footer { line-height:100px; }
32
        nav, section { line-height:240px; }
33
    </style>
34
</head>
35
​
36
<body>
37
​
38
    <h1>HTML5 레이아웃</h1>
39
    <header>
40
        <h2>HEADER 영역</h2>
41
    </header>
42
    <nav>
43
        <h2>NAV 영역</h2>
44
    </nav>
45
    <section>
46
        <p>SECTION 영역</p>
47
    </section>
48
    <footer>
49
        <h2>FOOTER 영역</h2>
50
    </footer>
51
​
52
</body>
53
​
54
</html>