CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

CSS display 속성 사용 방법 및 예제

display CSS 속성은 요소가 생성하는 상자 유형을 지정합니다。

이 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다。

기본 값:	inline
적용 대상:	모든 요소
thừa kế:	없음
애니메이션 가능:	아니요。참조하십시오 애니메이션 속성。
버전：	CSS 1，2，3
JavaScript 문법：	object.style.display="block"

사용 설명

display 속성의 계산 값은 루트 요소와浮动또는절대 위치 요소의 지정 값이 다릅니다。
display 속성의 값이 none으로 설정되면, 이 요소는 어떤 상자도 생성하지 않으며 레이아웃에 어떤 영향도 미치지 않습니다；이 요소와 그 내용은 형식 구조에서 완전히 제거되고, 문서를 표시할 때 그 요소가 문서 트리에 존재하지 않는 것처럼 표시됩니다。

사용 문법

이 속성의 문법은 다음과 같습니다：

display:　inline　|　block　|　contents　|　flex　|　flow　|　flow-root　|　grid　|　inline-block　|　inline-flex　|　inline-grid　|　inline-table　|　list-item　|　run-in　|　table　|　table-caption　|　table-column-group　|　table-header-group　|　table-footer-group　|　table-row-group　|　table-cell　|　table-column　|　table-row　|　none　|　initial　|　inherit

아래 예제는 display 속성을 사용하는 방법을 설명합니다.

예제

　　div　{
　　　display:　inline;
　　}
　　span　{
　　　display:　block;
　　}

테스트를 보세요‹/›

속성 값

이 표는 이 속성의 값을 설명합니다.

값	설명
inline	요소는인라인 수준블록
block	요소는블록 수준블록
contents	요소 자체는 어떤 블록도 생성하지 않지만, 그 자식요소하고pseudo-element생성 블록을 생성하며, 텍스트가 정상적으로 실행됩니다.
flex	요소는 블록 수준의확장 컨테이너 box。
flow	요소는 흐름 레이아웃(블록과 인라인 레이아웃)을 사용하여 내용을 레이아웃합니다.
flow-root	요소는 블록 컨테이너 블록을 생성하고, 내용에 흐름 레이아웃을 사용하여 레이아웃을 수행합니다.
grid	이 요소는 블록 수준의 그리드 컨테이너 블록을 생성합니다.
inline-block	요소는 블록 블록을 생성하며, 그 레이아웃은 내장된 블록과 같습니다.
inline-flex	요소는 인라인 수준의 스타일링 컨테이너 블록을 생성합니다.
inline-grid	요소는 인라인 수준의 그리드 컨테이너 블록을 생성합니다.
inline-table	이 요소의 행동은 테이블과 같으며, 인라인 블록과 같습니다.
list-item	요소는 내용에 블록 블록을 생성하며, 목록 표시에 단일 인라인 블록을 생성합니다.
run-in	이 요소는 상황에 따라 블록이나 인라인 블록을 생성합니다.
table	이 요소의 행동은<table>HTML 요소
table-caption	이 요소의 행동은<caption>HTML 요소
table-column-group	이 요소의 행동은<colgroup>HTML 요소
table-header-group	이 요소의 행동은<thead>HTML 요소
table-footer-group	이 요소의 행동은<tfoot>HTML 요소
table-row-group	이 요소의 행동은<tbody>HTML 요소
table-cell	이 요소의 행동은<td>HTML 요소
table-column	이 요소의 행동은<col>HTML 요소
table-row	이 요소의 행동은<tr>HTML 요소
none	요소의 표시를 닫습니다. 모든 자식 요소의 표시 속성이 none으로 설정되어도, 그 표시를 닫습니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 display 속성 값을 사용합니다.

브라우저 호환성

display 속성의 브라우저 호환성, 아래 표의 숫자는 해당 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 7+

경고:값, 예를 들어 contents, flow-root, run-in 등 대부분의 브라우저에서는 지원이 좋지 않습니다. 일시적으로 사용을 피하는 것이 좋습니다.

더 읽기

다음 튜토리얼을 참조하세요:CSS Display。

관련 속성:visibility，float，position。

CSS empty-cells 속성 CSS 방향 속성