Display 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 요소가 화면에 출력될 형식을 지정한다.

edit

정의

Display설명
값inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
기본값inline
적용대상모든 요소
상속안됨
백분율사용 불가
미디어all?

edit

값

값설명
block블럭 요소로 지정한다.
inline인라인 요소로 지정한다.
list-item목록 항목(list-item)으로 지정한다.
marker앞/뒤 생성된 내용에 표시자가 되도록 지정한다. :before 와 :after 가상 요소에만 지정할 수 있으며, 그 외 요소의 지정하면 inline로 해석된다.
none출력하지 않는다. 또한 지정된 요소의 자손 요소도 출력되지 않는다.
run-in문맥에 따라서 인라인 또는 블록 박스로 지정한다.
inline-block인라인 블록으로 지정한다.
table인라인 테이블로 지정한다.
inline-table인라인 테이블로 지정한다.
table-row-group인라인 테이블의 행 그룹으로 지정한다.
table-header-group테이블의 헤더 그룹으로 지정한다.
table-footer-group테이블의 푸터 그룹으로 지정한다.
table-row테이블의 행으로 지정한다.
table-column-group테이블의 열 그룹으로 지정한다.
table-column테이블의 열로 지정한다.
table-cell테이블의 셀로 지정한다.
table-caption테이블의 캡션으로 지정한다.
inherit부모 요소의 값을 상속하도록 지정한다.

HTML의 모든 요소는 기본 출력 형식이 정해져 있으며,(예: p 요소는 block 형식) 사용자 에이전트의 기본 스트일에서 이 형식을 지정하고 있다. 제작자는 display 속성으로 HTML 기본 출력 형식을 변경해서 다양한 화면을 구현할 수 있으나, 자칫 오용할 경우 사용자의 경험을 혼란시킬 수 있다.

하지만, XML은 기본적으로 출력될 형식이 없기 때문에 display 속성을 반드시 사용한다.

edit

예제

edit

브라우저 호환성

값IE6?IE7?FF2?Op9?
inline지원지원지원지원
block불안정불안정지원지원
list-item지원지원불안정지원
run-in미지원미지원미지원지원
inline-block불안정불안정미지원지원
table미지원미지원지원지원
inline-table미지원미지원미지원지원
table-row-group미지원미지원지원지원
table-header-group불안정불안정지원지원
table-footer-group불안정불안정지원지원
table-row미지원미지원지원지원
table-column-group미지원미지원불안정불안정
table-column미지원미지원불안정불안정
table-cell미지원미지원지원지원
table-caption미지원미지원지원지원
none지원지원지원지원
inherit미지원미지원지원지원

Wiki Trail: < background | 문서 목록 | visibility >

 
Be Friend~! Be Friend~!