Properties

Properties

Draft
  • account_tree
  • bug_report

displayCSS1, CSS3

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

설정 가능한 속성 값

  • inline키워드CSS1

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

  • block키워드CSS1

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

  • run-in키워드CSS1

    상황에 따라 block 또는 inline으로 표시한다. CSS 3에서는 외부 디스플레이 값으로 사용한다.

  • table키워드CSS1

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

  • flex키워드CSS3

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

  • grid키워드CSS3

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

  • flow키워드CSS3

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

  • flow-root키워드CSS3

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

  • table-caption키워드CSS1

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

  • table-column-group키워드CSS1

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

  • table-header-group키워드CSS1

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

  • table-footer-group키워드CSS1

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

  • table-row-group키워드CSS1

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

  • table-cell키워드CSS1

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

  • table-column키워드CSS1

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

  • table-row키워드CSS1

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

  • list-item키워드CSS1

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

  • inline-block키워드CSS1Delete

    인라인(Inline) 타입과 블록(Block) 타입의 속성을 혼용한 것으로 인라인(Inline) 타입처럼 요소를 우측에 붙혀 출력하지만 블록(Block) 타입처럼 폭 및 상하 여백과 높이를 가질 수 있게 된다. CSS 3에서는 레거시가 되었으며 외부 디스플레이과 내부 디스플레이 값을 나누어서 명하는 것으로 변경되었다. 하지만 이 변경 내용은 아직 웹브라우저에서는 지원이 되지 않을 수 있으므로 반드시 확인이 필요하다.

  • inline-table키워드CSS1Delete

    인라인(Inline) 타입의 테이블 속성으로 화면에 출력을 한다. CSS 3에서는 레거시가 되었으며 외부 디스플레이과 내부 디스플레이 값을 나누어서 명하는 것으로 변경되었다. 하지만 이 변경 내용은 아직 웹브라우저에서는 지원이 되지 않을 수 있으므로 반드시 확인이 필요하다.

  • inline-flex키워드CSS3Delete

    자식 요소들를 CSS3에 추가된 flex 속성에 지정된 값에 따라 화면에 출력하고 인라인(inline) 성격을 갖도록 한다. 레거시가 되었으며 외부 디스플레이과 내부 디스플레이 값을 나누어서 명하는 것으로 변경되었다. 하지만 이 변경 내용은 아직 웹브라우저에서는 지원이 되지 않을 수 있으므로 반드시 확인이 필요하다.

  • inline-grid키워드CSS3Delete

    자식 요소들을 인라인 레벨 그리드 레이아웃으로 출력한다. 레거시가 되었으며 외부 디스플레이과 내부 디스플레이 값을 나누어서 명하는 것으로 변경되었다. 하지만 이 변경 내용은 아직 웹브라우저에서는 지원이 되지 않을 수 있으므로 반드시 확인이 필요하다.

  • content키워드CSS3

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

  • sticky키워드CSS3

    정적 위치를 가지고 있다가 스크롤시 뷰포트 상단에 닿으면 뷰포트에 고정된다.

  • none키워드CSS1

    요소를 공간을 포함해서 보이지 않게 한다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • display inline or block or list-item or run-in or table or table-caption or table-column-group or table-header-group or table-footer-group or table-row-group or table-cell or table-column or table-row;기본형식CSS1

    지정된 상수로 속성 값을 설정한다. run-in은 대부분의 웹브라우저가 지원하지 않는다.

  • display flex or grid;기본형식CSS3

    CSS 3에 추가된 새로운 디스플레이 방식이며 레이아웃 처리를 좀 더 손쉽게 하도록 해준다.

  • display inline-block or inline-table;기본형식CSS1Delete
    CSS 3.0에서 부터는 단일 값을 지정하는 방식을 사용하지 않기로 함에 따라 레거시가 되었다.
  • display inline block or inline table;기본형식CSS3

    inline-block, inline-table 으로 설정하던 2.0 방식이 아닌 외부와 내부 두 개의 값으로 설정하는 방식으로 변경되었다. 하지만 웹브라우저별 지원 여부를 확인해 봐야 한다.

  • display inline-flex or inline-grid;기본형식CSS3Delete
    inline 흐름을 갖는 flex와 grid 레이아웃을 생성한다. 변경된 명세에 따라 외부 디스플레이와 내부 디스플레이 값으로 구분하여 작성하도록 되었다.
  • display inline flex or inline grid;기본형식CSS3

    inline-flex와 inline-grid 값은 변경된 명세에 따라 외부와 내부의 디스플레이 값으로 나누어 작성한다. 하지만 웹브라우저별 지원 여부를 확인해 봐야 한다.

  • display none ;기본형식CSS1

    요소를 숨김처리 한다.

  • display contents;기본형식CSS3

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

    margin-right 테스트
  • object.style.display = 자바스크립트 형식CSS1

    자바스크립트 형식

테스트 도구

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

버전 명세

Version NameDescriptionFlags
CSS1초기 정의
CSS3일부 속성 값에서 두 개의 값(외부 및 내부 디스플레이 유형)이 지정되는 방식으로 변경되었다. 외부 디스플레이 유형은 흐름에 참여하는 방법을 나타내고 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정한다. 기존의 값 지정 방식은 Legacy로 유지한다. 하지만 아직은 각 웹브라우저에서 지원 여부를 확인해야 한다.

지원 웹브라우저