개요
display 속성은 요소를 어떻게 보여줄지를 결정한다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.
none : 보이지 않음
block : 블록 박스로 만듬
inline : 인라인 박스로 만듬
inline-block : block 박스로 만들어지나, inline 처럼 배치가 된다.
display 속성 중 block (블록 요소) 는 요소의 가로 길이가 100%가 되어 (width값을 수동으로 지정해도 보이지 않는 margin 같은 값이 화면을 꽉 채운다) 자동으로 줄 바꿈이 되고 width, height 속성을 지정 할 수 있는데, 자동으로 display:block 이 적용되는 대표적인 태그는 div 가 있다.
inline 요소는 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. display:inline 이 적용되는 대표적인 태그는 span 이 있다.
inline-block 요소는 inline 요소와 block 요소의 특징을 합친 것으로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다. inline-block 요소와 요소 사이에는 공백이 생기게 된다. (단, ie7 이하는 지원하지 않는데, *zoom:1; *display:inline 속성을 이용하면 inline-block 요소 처럼 사용 할 수 있다.)
사용법
1 2 3 4 | #none{ display:none; width:100px; height:60px; } #block{ display:block; width:100px; height:60px; } #inline{ display:inline; width:100px; height:60px; } #inline-block{ display:inline-block; width:100px; height:60px; *zoom:1; *display:inline } | cs |
예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <style> #none{ display:none; border:1px solid blue} #block{ display:block; height:60px; border:1px solid blue } #inline{ display:inline; width:100px; height:60px; border:1px solid blue} #inline-block{ display:inline-block; width:100px; height:60px; border:1px solid blue; *zoom:1; *display:inline } </style> </head> <body> <div id="none">display:none 입니다.</div> <div id="block">display:block 입니다.</div> <span id="inline">display:inline 입니다.</span> <span id="inline-block">display:inline-block 입니다.</span> </body> </html> | cs |
출력결과
display:none 입니다.
display:block 입니다.
display:inline 입니다.
display:inline-block 입니다.
'개발' 카테고리의 다른 글
| [퍼블리싱][css] position 속성 (0) | 2015.02.01 |
|---|---|
| [퍼블리싱][css] margin, padding 속성 (0) | 2015.02.01 |
| [html] ie9에서 화면이 깨진 경우 / 쿼크모드(Quirks Mode) (0) | 2015.01.29 |
| [jquery] 선택자 (0) | 2015.01.24 |
| [javascript] 웹 바코드 code128, 바코드 생성기 (0) | 2015.01.20 |