display상속 불가애니메이션 불가

사용 가능한 값 타입

〈'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

• 〈display-inside〉

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

  • CSS Display Module Level 3

    flow | flow-root | table | flex | grid | ruby

• 〈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

• 〈display-legacy〉

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

  • CSS Display Module Level 3

    inline-block | inline-table | inline-flex | inline-grid

• 〈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;
    }

• 〈display-outside〉

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

  • CSS Display Module Level 3

    block | inline | run-in