소스

* 지난 포스팅에서 잠깐 보여준 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

결과


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

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 이미지 넣기  (0) 2016.09.22
[HTML/CSS] 마진과 패딩,border(color,style,width)  (0) 2016.09.22
[HTML/CSS] 마우스 올렸을 경우,클릭하고있는 경우,클릭 후  (0) 2016.09.22
[HTML/CSS] HTML에 CSS를 적용하는 방법 3가지  (0) 2016.09.20
[HTML]Form(input, select, checkbox, radio)  (0) 2016.09.06

+ Recent posts

티스토리툴바