CSS 디스플레이 속성

정의와 사용법

display 속성은 요소가 생성해야 할 상자 유형을 정의합니다.

설명

이 속성은 레이아웃을 구성할 때 요소가 생성하는 표시 상자 유형을 정의합니다. HTML과 같은 문서 타입에서 display를 신중히 사용하지 않으면 위험할 수 있습니다. 왜냐하면 이미 HTML에서 정의된 표시 계층 구조를 위반할 수 있기 때문입니다. XML은 이러한 내장 계층 구조가 없기 때문에 모든 display는 절대적으로 필요합니다.

주석:CSS2에는 값 compact와 marker가 있지만, 널리 지원되지 않아 CSS2.1에서 제거되었습니다.

추가로 참조:

CSS 강의:CSS 정위치

HTML DOM 참조 매뉴얼:display 속성

예제

구문을 인라인으로 만드는 방법:

p.inline
  {
  display:inline;
  }

직접 시도해보세요

CSS 문법

display: value;

속성 값

값 설명
none 이 요소는 표시되지 않습니다.
block 이 요소는 블록 요소로 표시되며, 요소 전후에 줄 바꿈이 포함됩니다.
inline 기본적으로 이 요소는 인라인 요소로 표시되며, 요소 전후에 줄 바꿈이 없습니다.
inline-block 인라인 블록 요소。（CSS2.1에서 추가된 값）
list-item 이 요소는 목록으로 표시됩니다.
run-in 이 요소는 상황에 따라 블록 요소나 인라인 요소로 표시됩니다.
compact CSS에 값 compact가 있지만, 널리 지원되지 않아 CSS2.1에서 제거되었습니다.
marker CSS에는 marker 값이 있지만, 널리 지원되지 않기 때문에 CSS2.1에서 제거되었습니다.
table 이 요소는 블록 테이블로 표시됩니다 ( <table>와 유사합니다), 테이블 앞뒤에는 줄 바꿈이 있습니다.
inline-table 이 요소는 인라인 테이블로 표시됩니다 ( <table>와 유사합니다), 테이블 앞뒤에는 줄 바꿈이 없습니다.
table-row-group 이 요소는 하나 이상의 행을 그룹화하여 표시됩니다 ( <tbody>와 유사합니다).
table-header-group 이 요소는 하나 이상의 행을 그룹화하여 표시됩니다 ( <thead>와 유사합니다).
table-footer-group 이 요소는 하나 이상의 행을 그룹화하여 표시됩니다 ( <tfoot>와 유사합니다).
table-row 이 요소는 테이블 행으로 표시됩니다 ( <tr>와 유사합니다).
table-column-group 이 요소는 하나 이상의 열을 그룹화하여 표시됩니다 ( <colgroup>와 유사합니다).
table-column 이 요소는 셀 열로 표시됩니다 ( <col>와 유사합니다).
table-cell 이 요소는 테이블 셀로 표시됩니다 ( <td>와 <th>와 유사합니다).
table-caption 이 요소는 테이블 제목으로 표시됩니다 ( <caption>와 유사합니다).
inherit display 속성의 값을 부모 요소에서 상속해야 합니다.

기술 상세 정보

기본 값: inline
thừa kế: no
버전: CSS1
JavaScript 문법: object.style.display="inline"

TIY 예제

요소를 인라인 요소로 표시하는 방법
이 예제에서는 요소를 인라인 요소로 표시하는 방법을 보여줍니다.
요소를 블록 요소로 표시하는 방법
이 예제에서는 요소를 블록 요소로 표시하는 방법을 보여줍니다.

브라우저 지원

표에 기재된 숫자는 이 속성을 완전히 지원하는 최초의 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

주석:DOCTYPE이 정의되어 있으면, Internet Explorer 8 (그리고 더 높은 버전)는 "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", 그리고 "inherit"와 같은 속성 값을 지원합니다.