Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

display 본문

web/CSS3

display

scarecrow1992 2020. 10. 2. 23:24

태그가 화면에 보이는 방식을 지정하는 속성이다.

html5 시대가 되면서 다양한 display속성이 존재하게 되었다.

하지만 모든 display속성을 제대로 지원하는 웹브라우저는 없다.

따라서 예제 코드와 함께 제일 중요한 속성 몇가지만 정리한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
    <head>
        <title>CSS3 Style Property Basic</title>
    </head>
 
    <body>
        <span id="a">Dummy</span>
        <div id="box">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
        <span>Dummy</span>
    </body>
</html>
 cs

 

 

none

화면상에서 해당태그를 사라지게 만든다.

1
2
3
4
5
<style>
    #box{
        display : none;
    }
</style>
 cs

이는 태그의 존재를 지워버리는것이므로 레이아웃 자체를 변경시킬수도 있는 키워드이다.

 

block

1
2
3
4
5
6
7
<style>
    #a{border-style : solid;}
    #box{
        display: block;
        border-style : solid;
    }
</style>
 cs

 

block키워드를 적용할 경우 해당 태그의 영역이 가로영역을 전부다 차지함을 확인 할 수 있다.

 

inline과 inline-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
<!doctype html>
<html>
    <head>
        <title>CSS3 Style Property Basic</title>
        <style>
            #box1{
                display:inline;
                background-color : red;
                width : 300px; height: 50px;
                margin: 10px;
            }
            #box2{
                display:inline-block;
                background-color : red;
                width : 300px; height: 50px;
                margin: 10px;
            }
        </style>
    </head>
 
    <body>
        <span id>Dummy</span>
        <div id="box1">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
        <div id="box2">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
        <span>Dummy</span>
    </body>
</html>
 cs

inline키워드를 적용한 코드는 width 속성과 height속성이 적용되지 않는다.

또한 margin속성이 div태그의 좌우로만 지정된다.... 라고 하는데 확인결과 상하로도 지정되는것이 보인다.

 

 

 

 

저작자표시

'web > CSS3' 카테고리의 다른 글

block내 tag 수직정렬  (0) 2020.10.03
box  (0) 2020.10.03
color  (0) 2020.10.02
font-size  (0) 2020.10.02
pseudo class selector  (0) 2020.10.02
'web/CSS3' Related Articles more
Comments