• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Display</title>
7
    <style>
8
        div { width: 100px; height: 50px; }
9
​
10
        .first { background-color: aqua; }
11
        .second { background-color: green; }
12
        .third { background-color: yellow; }
13
​
14
        .inline { display: inline; }
15
        .inline-block { display: inline-block; }
16
    </style>
17
</head>
18
​
19
<body>
20
​
21
    <h1>다양한 display 속성값</h1>
22
​
23
    <p>아래에 나오는 div 요소는 모두 display 속성값이 블록입니다.</p>
24
    <div class="first">블록</div>
25
    <div class="second">블록</div>
26
    <div class="third">블록</div><br>
27
​
28
    <p>아래에 나오는 div 요소는 모두 display 속성값이 인라인입니다.</p>
29
    <div class="first inline">인라인</div>
30
    <div class="second inline">인라인</div>
31
    <div class="third inline">인라인</div><br><br>
32
​
33
    <p>아래에 나오는 div 요소는 모두 display 속성값이 인라인-블록입니다.</p>
34
    <div class="first inline-block">인라인-블록</div>
35
    <div class="second inline-block">인라인-블록</div>
36
    <div class="third inline-block">인라인-블록</div>
37
​
38
</body>
39
​
40
</html>