본문으로 바로가기

CSS Display와 Visibility 속성

category 웹코딩/CSS 2015.06.04 15:00

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부터 정상 지원한다.



댓글을 달아 주세요

  1. BlogIcon G.J. 제이 2015.08.01 19:06 신고

    블럭은 뭐고 인라인은 뭐죠? 차이점을 잘 모르겠어요. 스킨 한 번 만들어보려고 노력중인데 어렵네요 ^^;

    • BlogIcon 흉내쟁이 2015.08.02 02:22 신고

      블럭은 콘텐츠의 크기에 상관없이 한 행 가득 채우는 요소입니다.

      인라인은 콘텐츠의 크기만큼만 너비를 차지하는 요소입니다.

      자세한 설명은 http://webdir.tistory.com/412 에서 확인하실 수 있습니다.

  2. 어나니 2015.11.19 10:51 신고

    굿

티스토리 툴바