CSS Display와 Visibility 속성

CSS 속성중에 요소를 표시하는 방법을 지정하는 display 속성과 요소를 보여주거나 숨기는 visibility 속성에 대하여 알아봅니다.

display

요소를 표시하는 방법을 지정한다.

p.inline {display: inline;}

속성값

• inline : 인라인 요소처럼 표현한다.
• block : 블럭 요소처럼 표현한다.
• inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다.
• flex : CSS3에 새로 생긴 값으로 블록-레벨의 flex 컨테이너처럼 요소를 표현한다.
• inline-flex : CSS3에 새로 생긴 값으로 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다.
• list-item : 박스를 블록 처리하고 그 안의 아이템들을 인라인 박스 형태로 처리한다.
• run-in : 문맥에 따라 블록 또는 인라인 박스로 처리된다.
• table, inline-table, , table-caption, table-cell, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-row-group : 이 속성값들은 테이블 스타일의 요소의 동작을 정의한다.
• none : 블록이 생성되지 않는다. 이 경우 화면에서 완전히 사라져 어떠한 공간도 차지하지 않는다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.display="block"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

visibility

요소에 의해 생성된 박스를 렌더링할 것인지를 결정한다. 기본적으로 이 값은 상속된다. 보이지 않는 박스는 display 속성이 none으로 지정되지 않는 한 레이아웃에 영향을 미친다.

h2 {visibility: hidden;}

속성값

• visible : 박스가 보여진다.
• hidden : 박스가 보이지 않지만 공간을 확보하기 때문에 여전히 레이아웃에 영향을 미친다.
• collapse : 내부 테이블 객체(행, 행 그룹, 열 및 열 그룹)에 적용된다. hidden과 유사하다.
• inherit : 부모 요소로부터 값을 상속 받는다.

visibillity 데모 보기

자바스크립트 문법

object.style.visibility="hidden"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.