[HTML] div 영역 숨기기 할때..visibility 와 display 의 차이

div 영역 숨기기 시에..

style="display:none"  과 visibilit:hidden 의 차이를 알아 볼 것.. 화면에서 그려지는것이 약간 틀린것을 발견함..

웹 검색 결과 이런 내용이 떠서 펌..

CSS 속성 중 visibility:hidden 과 display:none 의 속성은 태그를 숨길 때 사용한다.

태그를 숨기는 속성은 같지만 태그가 위치하는 공간은 틀려진다

display:none 은 여백을 남기지 않고 숨겨지지만, visibility:hidden의 경우에는 여백을 남긴 채 숨겨지게 된다.

 

<p><strong>Normal</strong></p>
< div style="border:5px #FF0000 solid;">DIV01</div>
< div style="border:5px #33FF66 solid;">DIV02</div>
< div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Display none</strong></p>
< div style="border:5px #FF0000 solid;">DIV01</div>
< div style="border:5px #33FF66 solid;display:none;">DIV02</div>
< div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Visibility hidden</strong></p>
< div style="border:5px #FF0000 solid;">DIV01</div>
< div style="border:5px #33FF66 solid;visibility:hidden;">DIV02</div>
< div style="border:5px #3366FF solid;">DIV03</div>

[출처] http://www.cyworld.com/themore