본문 바로가기

DHTML/CSS/META

CSS의 display 속성

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다.
display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요.

block : 블록박스로 만든다.
inline : 인라인 박스로 만든다.
inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다. (CSS2.1 권고후보에 추가)
none : 박스를 만들지 않으며 시각적으로 완전히 보이지 않는다.
inherit : 상위 요소의 display속성을 상속받는다.

table : 블록레벨의 표로 만든다. (table)
inline-table : 인라인레벨의 표로 만든다. (table)
table-row : 행으로 만든다 (tr 기본 속성)
table-row-group : 본체 행 그룹으로 만든다. (tbody 기본 속성)
table-header-group : 헤더 행 그룹으로 만든다. (thead 기본 속성)
table-footer-group : 푸터 행 그룹으로 만든다. (tfoot 기본 속성)
table-column : 열로 만든다. (col 기본 속성 - 보이지 않음)
table-column-group : 열 그룹으로 만든다. (colgroup 기본 속성 - 보이지 않음)
table-cell : 하나의 셀로 만든다. (td 기본 속성)
table-caption : 캡션으로 만든다. (caption 기본 속성)

list-item : li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in : 런인박스로 만든다.
compact : 콤팩트 박스로 만든다. (CSS2.1권고후보에서 삭제)
marker : 그 요소의 전후에 생성된 내용을 마커로 정의한다. (CSS2.1권고후보에서 삭제)