Properties

Properties

Editing
  • account_tree
  • bug_report

display

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

사용 가능한 값 타입

<'display'>

DEVDIC-Specified Data Types

display 속성에 사용되는 타입이다.

  • CSS Display Module Level 3
    [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

    단일 키워드 지정은 여전히 유효하지만 새롭게 추가된 다중 키워드로 지정되는 값은 웹브라우저 지원 현황을 확인해야 한다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <display-box>

    요소가 상자를 생성할지 여부를 제어하는 값을 나타낸다.

    • CSS Display Module Level 3
      contents | none
    Details

    사용되는 키워드

    • contents

      CSS Display Module Level 3

      요소 자체는 정상적인 컨테이너를 생성하지 않지만 자식 및 가상 요소는 정상적으로 실행이 된다.

    • none

      CSS Display Module Level 3

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

  • <display-inside>

    요소의 내부 표시 유형을 지정하는 값을 나타낸다. 이는 콘텐츠를 배치하는 서식 컨텍스트(formatting context) 유형을 정의한다.

    • CSS Display Module Level 3
      flow | flow-root | table | flex | grid | ruby
    Details

    사용되는 키워드

    • flex

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

    • flow

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

    • flow-root

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

    • grid

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

    • table

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

  • <display-internal>

    <table>, <ruby> 등 일부 레이아웃 모델은 복잡한 내부 구조 출력 메커니즘을 지닌다. 하나의 디스플레이 유형이 아닌 내부 요소가 역할에 맞는 디스플레이 유형을 동시에 갖는다. <display-internal>은 이러한 키워드 그룹을 나타낸다.

    • CSS Display Module Level 3
      table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
    Details

    사용되는 키워드

    • ruby-base

      CSS Display Module Level 3

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

    • ruby-base-container

      CSS Display Module Level 3

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

    • ruby-text

      CSS Display Module Level 3

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

    • ruby-text-container

      CSS Display Module Level 3

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

    • table-caption

      CSS Display Module Level 3

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

    • table-cell

      CSS Display Module Level 3

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

    • table-column

      CSS Display Module Level 3

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

    • table-column-group

      CSS Display Module Level 3

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

    • table-footer-group

      CSS Display Module Level 3

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

    • table-header-group

      CSS Display Module Level 3

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

    • table-row

      CSS Display Module Level 3

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

    • table-row-group

      CSS Display Module Level 3

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

  • <display-legacy>

    CSS Level 2에서 사용했던 단일 키워드를 나타낸다.

    • CSS Display Module Level 3
      inline-block | inline-table | inline-flex | inline-grid
    Details

    사용되는 키워드

    • inline-block

      CSS Display Module Level 3

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

    • inline-flex

      CSS Display Module Level 3

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

    • inline-grid

      CSS Display Module Level 3

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

    • inline-table

      CSS Display Module Level 3

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

  • <display-listitem>

    목록의 항목으로 표시 되도록 하는 값을 나타낸다.

    • CSS Display Module Level 3
      <display-outside>? && [ flow | flow-root ]? && list-item

      다중 키워드 지정 방식은 웹브라우저의 지원 현황을 확인할 필요가 있다.

      다음 코드는 파이어폭스(firefox)에서 유효하다. 목록 항목이 인라인 수준(inline level)으로 생성된다.
      .list > div {
        display: block flow list-item;
        list-style-type: disk;
      }
    Details

    포함된 타입

    • <display-outside>

      요소의 외부 디스플레이 유형을 지정하는 키워드를 나타낸다.

      • CSS Display Module Level 3
        block | inline | run-in
      Details

      사용되는 키워드

      • block

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

      • inline

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

      • run-in

        다음 블록 컨테이너로 병합하려고 시도하는 특별한 동작이 있는 인라인 레벨 박스 유형인 run-in 박스를 생성한다.

    사용되는 키워드

    • list-item

      CSS Display Module Level 3

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

    • flow

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

    • flow-root

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

  • <display-outside>

    요소의 외부 디스플레이 유형을 지정하는 키워드를 나타낸다.

    • CSS Display Module Level 3
      block | inline | run-in
    Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
    타입에 대한 자세한 설명은 다음 링크를 참조하라.[<display-outside>]

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

  • 〈display-outside〉inline

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

    Example
  • CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

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

    Example
  • CSS Display Module Level 3

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

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

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

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

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

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

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

    Example
  • CSS Display Module Level 3

    요소 자체는 정상적인 컨테이너를 생성하지 않지만 자식 및 가상 요소는 정상적으로 실행이 된다.

    Example
  • CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

  • 〈display-internal〉ruby-base-container
    CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

  • 〈display-internal〉ruby-text-container
    CSS Display Module Level 3

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

  • 다음 블록 컨테이너로 병합하려고 시도하는 특별한 동작이 있는 인라인 레벨 박스 유형인 run-in 박스를 생성한다.

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

    Example
  • CSS Display Module Level 3

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

    Example
  • CSS Display Module Level 3

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

    Example
  • CSS Display Module Level 3

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

  • 〈display-internal〉table-column-group
    CSS Display Module Level 3

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

  • 〈display-internal〉table-footer-group
    CSS Display Module Level 3

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

  • 〈display-internal〉table-header-group
    CSS Display Module Level 3

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

  • CSS Display Module Level 3

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

    Example
  • 〈display-internal〉table-row-group
    CSS Display Module Level 3

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

구문

  • display: flex;
    CSS Display Module Level 3
  • display: contents;
    CSS Display Module Level 3

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

    Example

테스트 도구/예제

(1) 요소를 출력하는 방식을 지정하는 주요 설정 값 테스트
(2) 태그 본래의 역할 또는 그룹으로 묶는 용도로만 제한하는 경우 display 속성의 contents 값의 사용 예

버전 명세

Modules
Module NameStatusSummary
CSS Display Module Level 3

Last review date: 2022-6-11

지원 웹브라우저