[HTML/CSS] display 속성 종류

display : block

 

div태그에서 기본 값으로 설정되어 있고 너비를 100%로 가지는 특징을 갖고 있음.

어떤 영역을 고정으로 지정하기 위해 사용되며, 배경색 혹은 너비 및 높이를 지정할 수 있고 전체 레이아웃 틀을 잡는데 유용 

 

 

 

 

display : inline

 

span태그에서 기본 값으로 설정되며, 유동적으로 영역을 설정할 때 사용

콘텐츠 사이즈에 따라 자동으로 늘어나고 조절되기 때문에 기존의 레이아웃을 벗어나지 않으면서 특정 부분만 바꾸고 싶을때 사용

 

 

 

 

display : inline-block

 

inline과 block의 특징을 합쳐놓은 속성

한 행에 여러 컨텐츠들을 나열할 때 사용 됨.

 

 

 

 

display : none

 

특정 영역을 가리고 싶을 때 사용되며, 반응형 페이지를 만들 때 사용하기 유용함.

 

 

 

예제 소스

 

<style>
.display_block{
	display:block;
	background-color : #3f86ff
}

.display_inline{
	display:inline;
	background-color : yellow
}

.display_inline_block{
	display:inline-block;
	background-color : green
}


.display_none{
	display:none;
}
</style>

<div class="display_inline">display:block</div> <div class="display_inline">display:block</div>
<div class="display_block">display:block</div>
<div class="display_none">display_none</div>
<div class="display_inline_block">
	<div class="display_inline_block">inline-block1</div>
	<div class="display_inline_block">inline-block2</div>
</div>

 

 

결과