본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

display와 visibility

최초 작성일
최종 수정일
이번 시간에는...
DHTML(동적인 HTML)에서 자주 사용하는 display과 visibility을 살펴 보며, 비교 해봅니다. display의 none, inline, block과 인라인 블록(inline-block)에 대해 알아보며, visibility의 visible, hidden, 그리고 collapse에 대해서도 알아봅니다.

이제 이론적인 얘기는 그만하고, 스타일 속성에 대해서 좀 더 알아보도록 하겠습니다.

display 속성

우리가 HTML에서 마크 업을 할 때에는 외형적인 것들 보다는 의미에 맞게 작성하도록 배웠습니다. (물론 외형적인 표현을 위해 divspan을 더 사용할 수는 있습니다.) 그리고 HTML 요소들에는 크게 '블록 요소''인라인 요소'가 있었습니다. 이 두 가지 요소는 사실 스타일에서도 다르게 나타나기 때문에, 아무리 외형적인 것을 고려하지 않더라도 분명 요소 만의 외형적인 한계가 있었을 것 입니다.

이번 시간에 다룰 'display' 속성은 이를 보안해줄 수 있는 속성입니다. 이 속성은 어떻게 보여줄지를(display) 지정하는 속성입니다. 해당 요소를 '블록' 또는 '인라인'으로 바꿔 보여줄 수 있도록 만들어 줍니다. 또한, 요소를 아예 보이지 않게 만듦으로써, 동적인 웹 페이지를 제작하는 데에도 많이 사용되는 속성입니다.

block
요소를 블록요소로 보여줍니다.
inline
요소를 인라인 요소로 보여줍니다.
inline-block
요소를 인라인-블록(두 가지 특징을 동시에 가진 형태)로 보여줍니다.
none
요소를 아예 보여주지 않습니다.
inherit
부모의 속성 값을 상속 받습니다.

방금 살펴 본 속성 값 외에도 table 같은 속성 값이 있고, CSS3 에서 더 추가된 속성들이 있습니다. 일단 CSS3에서 추가되는 속성들은 다루지 않고요, table 속성 값도 추후 table 스타일에서 다루도록 하겠습니다.

inline-block

'인라인-블록'이라는 형태는 인라인의 특성과 블록 요소의 특성을 같이 가지고 있는 형태입니다. 일단은 '인라인 요소'처럼 요소 자체로 줄 바꿈이 일어나지 않습니다. 하지만, 인라인 형태와는 달리 높이(height)나 너비(width)값을 가질 수 있습니다. 하나의 블록 형태를 가진 글자라고 생각하셔도 될 것 같습니다. 이러한 형태 덕분에, 보통 버튼 같은 형태를 만들 때 유용하게 사용됩니다.

inline-block 형태는 인라인 이면서
블록 형태를 가진
독특하고 유용한 형태입니다.

이 유용한 속성 값은 아쉽게도 IE8 이상부터 지원합니다. 하지만 IE7 이하에서도 이를 어느 정도 구현 할 수 있습니다.

앞의 소스를 보면 보기 쉽도록 IE7 이하용 '*' 핵을 사용했습니다만, 핵이 아닌 IE용 주석으로 처리하셔도 상관없습니다. 여기서 보면 display: inline;을 이용해서, 일단은 인라인 형태로 보여줍니다. 그런 다음 zoom: 1;이라는 생소한 속성을 넣는데요, 이 속성은 IE7 이하에서만 지원하던 속성입니다. (IE에만 있던 비표준 속성입니다.) 속성 이름대로 요소를 줌 인 또는 줌 아웃 하여, 확대하고 축소하는 속성입니다. 여기서 값을 '1'을 넣었다는 것은 그 어떤 줌 인 또는 아웃을 안한 기본 크기로 보여준다는 뜻이고요. 그 말은 결국 아무런 변화가 없다는 뜻이지만, IE7 이하에서는 이 zoom 속성이 들어간 요소는 조금 특이하게 보여줍니다. 거의 'inline-block' 형태와 비슷하게 높이나 너비도 줄 수 있습니다. (하지만 그럼에도 실질적으로 inline 형태이기 때문에 inline-block과는 차이점이 약간 있습니다.) 이 속성은 이런 용도 말고도 다른 IE7 이하에서 지원하지 않는 부분들을 구현하는데 이용할 수 있으므로, 앞으로도 종종 보게 될 것입니다. (IE7 이하에서는 이 zoom 속성이 들어간 요소는 레이아웃 요소로 판단합니다. 이에 대해선 'IE haslayout'을 검색해 보시면 더 자세히 아실 수 있습니다.)

display: none

display: none은 아까 말씀 드렸듯이, 요소를 보여주지 않습니다. 여기서 참고하실 부분은 단지 보여주지 않을 뿐 아니라, 스크린 리더에서도 읽지 못 합니다. 또한 검색 엔진에서 조차 읽지 않는다는 의견도 있습니다. (사실 이 부분은 정확히 알지 못합니다. 혹시 아시는 분은 의견을 주시기 바랍니다.) 마치, 페이지 내에서 그냥 없는 요소가 됩니다.

이 속성 값은 주로 JavaScript와 함께 동적인 페이지를 구현하는데 활용됩니다. 탭이나 메뉴 등에서 내용을 보이거나 감추거나 할 때, 유용하게 사용됩니다.

visibility

이 속성은 요소가 보여질 지에 대해 결정하는 속성입니다. 언뜻 보면, display: none과 비슷하지만, 조금 다릅니다.

visible
기본 값으로, 요소를 보여줍니다.
hidden
요소를 보여주지 않습니다.
collapse
table 요소들에서만 줄 수 있는 값으로, hidden과 비슷하지만, 필요에 따라 공백을 없애서 테이블 레이아웃을 자연스럽게 유지합니다.

'display: none' vs 'visibility: hidden'

언뜻 보면, 이 두 가지 속성은 거의 같아 보입니다. 둘 다 요소를 숨기는 것이죠.

하지만, 이 둘은 약간의 차이가 있습니다. 가장 큰 차이는 'display:none'은 해당 요소가 흔적도 없이 사라지는 반면, 'visibility:hidden'은 해당 요소의 영역을 남겨 놓습니다. 그러니까 보이지는 않지만, 해당 요소의 영역 만큼 빈 공간을 그대로 보여줍니다.

B가 쓰여있는 div에 각각 display와 visibility를 이용해서 숨겼습니다.
display:none;
A
B
C
visibility:hidden;
A
B
C

또한 보통의 스크린 리더의 경우 display:none의 경우 아예 읽지 않습니다만, visibility:hidden은 기기에 따라서 읽기도 합니다. (스크린 리더에서의 동작은 기기마다 다를 수 있기 때문에, 확실한 답은 드리기 어렵습니다. 다만, 국내 웹 접근성 연구소 지침에서는 스크린 리더를 위해 display:none보다는 visibility:hidden를 권장하고 있습니다.)

visibility: collapse

이 속성 값은 table 요소들(table, tr, th, td 등)에만 사용 가능하며, 이 collapse 속성은 테이블의 레이아웃에 따라 hidden이나 display:none으로 처리 된 것처럼 보여줍니다.

예를 들어 tr 요소에 visibility:hidden을 줄 경우, 빈 영역이 남게 됩니다. 이럴 경우 이 속성 값은 display:none처럼 처리하여 공백을 없애버립니다.

반면 테이블 요소들 중 th, td 등을 숨길 때 display:none을 사용할 경우, 테이블이 깨져 보일 수 있습니다. (아예 선언이 안된 것처럼 보이기 때문에) 하지만, 이 속성 값을 이용하면 visibility:hidden처럼 처리가 되어, 테이블 레이아웃은 유지한 채, 내용만 가려집니다.

이 유용한 속성 값은 아쉽게도 IE7 이하의 브라우저에서는 지원하지 않습니다. (IE8 이상의 브라우저에서 지원합니다.)

A와 C 사이의 B를 적은 th 요소에 각각 display와 visibility를 적용했습니다. collapse의 경우, 표의 레이아웃이 깨지지 않는 것을 확인할 수 있습니다. (브라우저에 따라, 선이 안보일 수 있습니다.)
display:none;
A B C
1 2 3
visibility:collapse;
A B C
1 2 3
요점 정리
  • display 속성을 통해서, 요소의 형태를 block/inline 형태로 바꿔줄 수 있음.
  • none 속성 값은 요소를 아예 없는 듯 만들어 주며, 자바스크립트와 함께 동적인 페이지(DHTML)에 유용하게 사용됨.
  • inline-block 값은 요소를 인라인과 블럭 형태를 동시에 지닌 형태로 만들어 줌.
  • inline-block은 IE7 이하는 지원을 하지 않기 때문에, 이를 지원하기 위해선 'zoom:1' 속성을 이용해야 함.
  • visibility 속성을 이용해서 요소를 보여주거나, 안 보여줄 수 있음.
  • visible은 보여주고, hidden은 숨김.
  • display:none;은 요소를 아예 없는 것처럼 만들지만, visibility:hidden;은 요소가 보이진 않지만, 요소의 영역만큼은 차지함.
  • visiblity:collapse는 테이블 요소(또는 테이블 형태의 요소)에서만 사용 가능. IE8 이상만 지원.
  • 테이블의 전체적인 레이아웃이 깨지지 않도록, display:none 또는 visibility:hidden을 자동으로 적용.

이 글이 유용하셨다면 친구들에게 공유 해주세요.