[ CSS ] display:none 과 visibilit:hidden 차이점

 

css속성 중 영역을 숨기는 기능인 display:none와 visibilit:hidden를 사용한다.

2개의 속성에 대해서 차이점을 알아보자!

 display:none 

여백을 남기지 않고 숨겨진다.

 

 visibility:hidden 

여백을 남긴 채 숨겨진다.

 

 

 예제 

[ html ]

<p><strong>Normal</strong></p>
<div style="border:5px red solid;">DIV01</div>
<div style="border:5px blue  solid;">DIV02</div>
<div style="border:5px gold  solid;">DIV03</div>

<p><strong>Display none</strong></p>
<div style="border:5px red solid;">DIV01</div>
<div style="border:5px blue solid; display:none;">DIV02</div>
<div style="border:5px gold solid;">DIV03</div>

<p><strong>Visibility hidden</strong></p>
<div style="border:5px red solid;">DIV01</div>
<div style="border:5px blue solid; visibility:hidden;">DIV02</div>
<div style="border:5px gold solid;">DIV03</div>

 

[ 결과 ]

display none을 하면 여백 없이 지워진 걸 볼 수 있다.

visibility hidden을 하면 여백이 남겨져있는 걸 볼 수 있다