-
728x90반응형
display 속성
목차
개요
display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 속성값이 쓰이며, 태그마다 기본값이 다르다.
none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block 과 inline의 중간 형태none
태그가 보이지 않게 되며,
visibility속성을hidden으로 설정한 것과 달리 영역을 차지하지 않는다.block
<div>,<p>태그 등이 이에 해당된다.가로 길이가 기본적으로 100%이며,
block인 태그를 이어서 사용하면 줄바꿈 되어 보인다.widthheight속성을 지정 할 수 있으며 레이아웃 배치시 주로 사용된다.inline
span은 표준 인라인 엘리먼트이다. 인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다.링크에 사용하는
a엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트 이다.inline-block
block과inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.Internet Explorer 7 이하에서는 사용할 수 없으며
*zoom:1이라는 속성을 사용하면 비슷하게 사용할 수 있다.다른 display 값
mozilla web page의 display에 대한 설명은 아래 링크를 참조.
display - CSS: Cascading Style Sheets | MDN
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
developer.mozilla.org
사용법
#none { display:none; } #block{ display:block; } #inline{ display:inline; } #inline-block{ display:inline-block; *zoom:1; *display:inline }예제
<html> <head> <style> #box-container > div, #box-container > span { border: 2px solid #09c; margin: 3px 0; padding: 5px; } .none { display: none } .block1 { display: block } .block2 { display: block; width: 300px; height: 60px; } .inline { display: inline; width: 200px; height: 60px; } .inline-block { display: inline-block; width: 200px; height: 60px; *zoom: 1; } </style> </head> <body> <div id="box-container"> <div class="none">none</div> <div class="block1">block1</div> <div class="block2">block2</div> <span class="inline">inline</span> <span class="inline-block">inline-block</span> </div> </body> </html>출력 결과 :
728x90반응형'Style Sheet > CSS' 카테고리의 다른 글
s✨ CSS 박스 모델 (Box-model) (0) 2024.01.16 ✨CSS 선택자 (0) 2024.01.15 CSS position (0) 2018.09.19 CSS box-sizing 사용법 (0) 2018.09.18 CSS z-index 속성 (0) 2018.09.17
