CSS 코스

display 속성

개요

display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

  • none : 보이지 않음
  • block : 블록 박스
  • inline : 인라인 박스
  • inline-block : block과 inline의 중간 형태

none

태그가 보이지 않게 되는데, visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다.

block

<div>, <p> 태그 등이 이에 해당됩니다.

가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈 되어 보입니다.
width, height 속성을 지정 할 수 있으며, 레이아웃 배치시 주로 쓰입니다.

inline

<span>, <b>, <i> 태그 등이 이에 해당됩니다.
block 과 달리 줄 바꿈이 되지 않고, widthheight를 지정 할 수 없습니다.

inline-block

blockinline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
Internet Explorer 7 이하에서는 사용할 수 없으며 *zoom: 1 이라는 속성을 사용하면 비슷하게 사용할 수 있습니다. (이는 CSS IE 핵 중 하나입니다)

사용법

#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>