웹 페이지를 작성하면서 웹 요소에 스타일을 지정할 수 있습니다. 이 중에 visibility: hidden 와 display: none 은 둘 다 요소를 화면에 보이지 않게 한다는 공통점이 있습니다만, 차이점이 있습니다.

그것은 바로!!!

visibility: hidden 은 요소가 보여질 경우, 차지하고 있는 영역을 그대로 유지하게 됩니다. 요소의 틀은 그대로인데 속이 보이지 않는 것 같은 거죠. hidden! 그냥 안 보이게만 해!

이와 다르게!!!

display: none 은 요소가 공간도 차지하지 않고 사라집니다. 원래 차지하고 있던 공간도 다른 요소들이 사용할 수 있게 내어주고 웹페이지에서 사라집니다.

원래 요소의 공간을 유지하는가? -> visibility: hidden

공간 유지하지 않고 멀리 사라지는가? -> display: none