div.or.kr이 ofcourse 로 이전 될 예정입니다.
새로운 강의로 보기
display 속성

개요

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 요소 처럼 사용 할 수 있다.)

사용법

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

예제

<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>
출력 결과:
display:none 입니다.
display:block 입니다.
display:inline 입니다. display:inline-block 입니다.