CSS 표시 속성

예시

몇 가지 다른 표시 값 사용:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 display요소의 표시 동작(렌더링 상자 유형)을 지정합니다.

HTML에서 기본 표시 속성 값은 HTML 사양이나 브라우저/사용자 기본 스타일 시트에서 가져옵니다. XML의 기본값은 SVG 요소를 포함하여 인라인입니다.

기본값:	?
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS1
자바스크립트 구문:	개체 .style.display="없음"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
display	4.0	8.0	3.0	3.1	7.0

참고: "flex" 및 "inline-flex" 값을 사용하려면 Safari에서 -webkit- 접두사가 필요합니다.

참고: "디스플레이: 콘텐츠"는 Edge 이전 버전 79에서 작동하지 않습니다.

CSS 구문

display: value;

속성 값

Value	Description	Play it
inline	Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block	Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
contents	Makes the container disappear, making the child elements children of the element the next level up in the DOM
flex	Displays an element as a block-level flex container
grid	Displays an element as a block-level grid container
inline-block	Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex	Displays an element as an inline-level flex container
inline-grid	Displays an element as an inline-level grid container
inline-table	The element is displayed as an inline-level table
list-item	Let the element behave like a <li> element
run-in	Displays an element as either block or inline, depending on context
table	Let the element behave like a <table> element
table-caption	Let the element behave like a <caption> element
table-column-group	Let the element behave like a <colgroup> element
table-header-group	Let the element behave like a <thead> element
table-footer-group	Let the element behave like a <tfoot> element
table-row-group	Let the element behave like a <tbody> element
table-cell	Let the element behave like a <td> element
table-column	Let the element behave like a <col> element
table-row	Let the element behave like a <tr> element
none	The element is completely removed
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

콘텐츠 속성 값을 사용하는 방법에 대한 데모입니다. 다음 예제에서 .a 컨테이너는 사라지고 DOM에서 자식 요소(.b)를 다음 수준으로 만듭니다.

.a {
  display: contents;
border: 2px solid red;
background-color: #ccc;
  padding: 10px;
  width: 200px;
}

.b {
  border: 2px solid blue;
background-color: lightblue;
  padding: 10px;
}

예시

상속 속성 값을 사용하는 방법에 대한 데모:

body {
display: inline;
}

p {
display: inherit;
}

예시

<div> 요소 내부의 일부 유연한 항목의 방향을 역순으로 설정합니다.

div {
display: flex;
flex-direction: row-reverse;
}

CSS 참조

CSS Properties