[css] display:block과 visibility:none의 차이

css의 기능을 사용하여 화면의 어떤 요소를 화면상에 보이지 않게 할 때 보통 display:none를 사용한다. 비슷한 기능으로 visibility:hidden이 있는데 종종 이 두개의 차이점을 묻는 질문을 면접에서 물어볼 때가 있다.

이 두개의 차이는 무엇일까?

 

먼저 display:inline나 display:block속성을 사용해 보았다면 알겠지만 display는 어떤 요소의 속성 자체를 변화시킨다.

다음은 div{width:200px;height:200px;}를 준 <div>이다. div는 디폴트로 display:block 속성이기 때문에 너비와 높이를 줄 수 있다.

 

 

다음과 같은 div 세 개가 나란히 있다고 했을 때 가운데 div에만 display:none을 줘보자.

 

 

여기에 display:inline을 주면 이렇게 된다. Inline 속성은 가지고 있는 콘텐츠 만큼의 영역만을 차지하기 때문에 이렇게 변하는 것이다.

 

이제 display:none을 예상할 수 있다. 이 속성을 사용하면 콘텐츠가 마치 화면상에서 없는 것처럼 어떤 영역도 차지하지 않는다. (사라진 건 아니지만 안보인다.)

 

<div>어쩌구1</div>
<div style="display:none">어쩌구2</div>
<div>어쩌구3</div>

 

그럼 이렇게 된다.

그러면 중간 div에 visibility:hidden을 주면 어떻게 될까?

 

 

display:block속성은 여전히 가지고 있기 때문에 영역을 차지하면서, 사라진다.
참고로 visibility:visible을 쓰면 다시 보인다.