html5 visibility 의 hidden 과 display 의 none 차이점

HTMl5 로 코딩을 하는경우, 동적으로 화면의 요소들을 컨트롤 해야하는 경우가 많습니다. 팝업형태의 DIV 태그를 사황에 따라 보여준다거나 많은 리스트를 보여주지만, 사용자의 선택에 따라 일부분만 보여주어야 하는 경우 동적으로 HTMl 요소들을 컨트롤 해야합니다.

이럴때 흔히 사용하는 Style Property 가 바로 display와 visibility 입니다.

display 는 none 이나 block, inline 등의 값을 사요할 수 있고 visibility 는 hidden, visible 값을 사용하게됩니다.

하지만, 이 두가지 property는 중요한 차이점이 있습니다.

위 그림에서 보는바와 같이, display 를 사용하는 경우 B 를 display:none 으로 처리했다면, B 가 안보이는 것은 물론이고, B가 있던 자리까지 사라지게 됩니다. 하지만, visibility 를 사용했다면 화면에서 가려지기는 하지만, B 가 있던  자리는 그대로 남아있게 됩니다. 

아래 링크는 w3school 에서 제공하는 display 와 visibility 에 대한 설명입니다.

https://www.w3schools.com/css/css_display_visibility.asp