CSS display 속성

1 개요

CSS display 속성

값	설명
none	보이지 않게 함(공간도 없음)
block	블록 형식
inline	인라인 형식
inline-block	인라인 블록 형식
table	테이블 형식
table-cell	테이블 셀 형식

2 예시

block, inline, inline-block 차이 문서를 참고하십시오.

<style>
span {
	width: 100px;
	height: 60px;
	margin: 10px;
}
.my-block { display: block; background-color: salmon; }
.my-inline { display: inline; background-color: lightgreen; }
.my-inline-block { display: inline-block; background-color: skyblue; }
</style>
 
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
 
<hr><hr><hr>
 
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
 
<hr><hr><hr>
 
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>
<span class="my-inline-block">우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데</span>

3 같이 보기

• CSS display, visibility
• CSS visibility 속성
• HTML 블록 요소, 인라인 요소
• CSS 오른쪽 aside 레이아웃 예제
• CSS float 자식들 포함하기

4 참고

• http://www.w3schools.com/cssref/pr_class_display.asp