• 코드:
​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>div 요소를 이용한 레이아웃</h1>
39
    <div id="header">
40
        <h2>HEADER 영역</h2>
41
    </div>
42
    <div id="nav">
43
        <h2>NAV 영역</h2>
44
    </div>
45
    <div id="section">
46
        <p>SECTION 영역</p>
47
    </div>
48
    <div id="footer">
49
        <h2>FOOTER 영역</h2>
50
    </div>
51
​
52
</body>
53
​
54
</html>