Properties

Properties

Editing
  • account_tree
  • bug_report

display

요소의 화면 출력 방식을 설정한다.

사용 가능한 값 타입

〈display-outside〉

사용되는 키워드

  • block

    블록 수준의 박스를 생성한다.

  • inline

    인라인 수준의 요소를 생성한다.

〈display-inside〉

사용되는 키워드

  • flex

    자식 요소들을 CSS3에 추가된 flex 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.

  • flow

    외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.

  • flow-root

    블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.

  • grid

    자식 요소들을 CSS3에 추가된 grid 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.

  • table

    테이블 요소처럼 동작한다. CSS 3에서는 내부 디스플레이 값으로 사용한다.

〈display-listitem〉

사용되는 키워드

  • list-item

    list-style 속성에 의해 지정된 내용으로 ::marker 가상 요소를 생성하도록 한다.

  • flow

    외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.

  • flow-root

    블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

〈display-internal〉

사용되는 키워드

  • ruby-base

    루비 기본 상자(<rb>)를 표시한다.

  • ruby-base-container

    루비 기본 컨테이너(<rbc>)를 표시한다.

  • ruby-text

    루비 주석 상자(<rt>)를 표시한다.

  • ruby-text-container

    루비 주석 컨테이너(<rtc>)를 표시한다.

  • table-caption

    테이블의 <caption>을 표시한다.

  • table-cell

    테이블의 셀인 <td>, <th>를 표시한다.

  • table-column

    테이블의 열을 설명하는 <col>를 표시한다.

  • table-column-group

    테이블의 열 그룹을 의미하는 <colgroup>를 표시한다.

  • table-footer-group

    테이블의 하단 그룹인 <tfoot>를 나타낸다.

  • table-header-group

    테이블의 상단 그룹인 <thead>를 나타낸다.

  • table-row

    테이블의 행을 구성하는 <tr>를 표시한다.

  • table-row-group

    테이블의 <tbody> 요소를 나타낸다.

〈display-box〉

사용되는 키워드

  • contents

    요소 자체는 상자를 생성하지 않지만 해당 자식 및 가상 요소는 여전히 상자를 생성하고 정상적으로 실행이 된다.

  • none

    요소 및 하위 요소들은 뷰포트에 나타나지 않는다.

〈display-legacy〉

사용되는 키워드

  • inline-block

    인라인 flow-root로 처리한다.

  • inline-flex

    인라인 수준의 flex로 표시한다.

  • inline-grid

    인라인 수준의 grid로 표시한다.

  • inline-table

    인라인 수준의 테이블을 표시한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈display-outside〉inlineCSS Display Module Level 3
  • inlineCSS1

    요소를 가로로 배치한다.  가로 세로 크기를 설정을 할 수 없고 상하 padding, margin을 설정할 수 없다. CSS 3에서는 외부 디스플레이 값으로 사용한다.

  • blockCSS1

    가로 공간을 차지하면 요소를 세로로 배치한다. CSS 3에서는 외부 디스플레이 값으로 사용한다.

  • tableCSS1

    테이블 요소처럼 동작한다. CSS 3에서는 내부 디스플레이 값으로 사용한다.

  • flexCSS3

    자식 요소들을 CSS3에 추가된 flex 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.

  • gridCSS3

    자식 요소들을 CSS3에 추가된 grid 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.

  • flow-rootCSS3

    block 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.

  • table-captionCSS1

    테이블의 caption 태그처럼 동작한다.

  • table-cellCSS1

    테이블의 td 태그처럼 동작한다.

  • table-rowCSS1

    테이블의 tr 태그처럼 동작한다.

  • list-itemCSS1

    li 태그의 속성처럼 화면에 출력을 한다.

구문

  • [ 〈display-outside〉 || 〈display-inside〉 ] | 〈display-listitem〉 | 〈display-internal〉 | 〈display-box〉 | 〈display-legacy〉CSS Display Module Level 3
  • display contents;CSS3

    콘텐츠를 담고 있는 컨테이너를 사라지게 하는 방식으로 콘텐츠를 표시한다.

테스트 도구

요소를 출력하는 방식을 지정하는 주요 설정 값 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Display Module Level 3

Last review date: 2022-6-11

지원 웹브라우저