* Programming/HTML&CSS

[HTML/CSS] 블럭/인라인 블럭의 차이와 설정 오버라이드

고경a 2016. 9. 22. 19:30

소스

* 지난 포스팅에서 잠깐 보여준 display: inline-block; / block; 차이 확인

* 공통적으로 배경색을 지정하고 아래에 배경색을 다시 지정하면 오버라이드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            #in02,#box02,#box03{
                background-color: bisque;
                height: 100px;
                width: 100px;
            }
            #box03{
                display: inline-block;
            }
            #box03{
                background-color: aquamarine;
            }
            #in02{
                font-size: 30px;
                display: block;
            }
        </style>
    </head>
    <body>
        <div>box1</div>
        
        <!-- 블럭 라벨 -->
        <div id="box02">box2</div>
        <div id="box03">box3</div>
        <!-- 인라인 라벨 -->
        <a>box3의 display가 인라인-블럭이라 ,</a>
        <a>옆으로 이렇게 </a>
        <span>inline1</span>
        <span id="in02">inline2</span>
        <span>inline3</span>
        <br/>
        <br/>
    </body>
</html>
cs

결과


저작자표시 비영리 변경금지