display

Display

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

HTML의 모든 요소는 기본 출력 형식이 정해져 있으며, (예:p 요소는 block 형식) 사용자 에이전트의 기본 스타일에서

이 형식을 지정하고 있다. 제작자는 display 속성으로 HTML 기본 출력 형식을 변경해서 다양한 화면을 구현 할 수 있으나,

자칫 오용할 경우 사용자의 경험을 혼란시킬 수 있다.

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

정의

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

값

값	설명
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	부모 요소의 값을 상속하도록 지정한다.