visibility:hidden 과 display:none 구별.(공간여부)

화면에서 HTML 요소를 숨기거나, 다시 보여주기 위해서 display 또는 visibility 프로퍼티를 사용합니다. 이러한 작업을 하기 위해서 display 프로퍼티는 none과 block 또는 inline 값을 사용하고, visibility 프로퍼티에서는 hidden과  visible  값을 사용합니다.

 

화면에서 HTML 요소를 숨기는 작업을 함에 있어 이 두 가지 프로퍼티에는 큰 차이가 존재합니다.

 

visibility:hidden 을 사용하면 그 요소가 차지하던 공간은 그대로 유지되고, 화면에 보이지만 않게 됩니다. display:none 을 사용하면 그 요소가 아예 없었던것 처럼 처리됩니다. 레이아웃에 변화가 오게 되는 것입니다.

출처: https://offbyone.tistory.com/219

CSS - display 와 visibility 프로퍼티 사용하기