display

정의 및 사용

display 속성은 인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정한다.

정의 및 사용
기본값 inline
상속 no
버전 CSS1
자바스크립트 구문 object.style.display=”inline”

브라우저 지원

IE6 지원IE7 지원IE8 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group, inherit 값은 ie7 이하 브라우저에서는 지원하지 않는다.

구문

속성 값 설명
설명
none 해당 요소가 생성되지 않음
block 위아래 줄바꿈이 되는 블럭 요소로 지정
inline 기본값(default), 위아래 줄바꿈이 되지 않는 인라인 요소로 지정
inline-block 인라인 요소로 배치 되지만 블럭 요소의 특징을 가짐
inline-table 인라인 요소로 배치 되지만 테이블 요소의 특징을 가짐
list-item 블럭 요소로 배치되면서 list 항목을 인라인으로 만든다
run-in 해당 문맥에 의존하는 블럭 또는 인라인 박스를 만든다
table 앞뒤 줄바꿈이 되는 테이블처럼 나타낸다
table-caption 테이블 캡션처럼 나타낸다
table-cell 테이블 셀처럼 나타낸다
table-column 테이블 컬럼 처럼 나타낸다
table-column-group 테이블 컬럼그룹(colgroup) 처럼 나타낸다
table-footer-group 테이블의 푸터 행 그룹처럼 나타낸다
table-header-group 테이블의 헤더 행 그룹처럼 나타낸다
table-row 테이블 행 처럼 나타낸다
table-row-group 테이블 행 그룹처럼 나타낸다
inherit 지정 요소의 유형을 부모(상위) 요소로부터 상속받음

예제

버그 및 이슈

  • none, block, inline, inline-block 외에 나머지 값들이 하위 버전의 브라우저에서 지원하지 않는 것이 많으므로 사용에 주의해야 한다.
  • { visibility:hidden; } 은 보여지지 않지만 공간은 차지하고 있으며, { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다. 두 속성의 차이점을 주의해야 한다.

소제목

목록 으로

  • 우연적필연

    2014년 6월 26일, 9:02 오전

    [답변]

    흠… 도재체 none은 홈페이지 디자인 제작 과정중에 어떤기능이 있을까요??

    • HYLA

      2014년 7월 2일, 1:43 오후

      [답변]

      display:none은 콘텐츠를 숨김처리할때 사용합니다.
      예를 들어서 초기에는 숨기고 버튼을 클릭했을때 보여지는 콘텐츠의 경우 스크립트로 none/block 처리를 하게 됩니다.

댓글