visibility: hidden과 display:none의 차이

html의 요소를 나타나게 하고 사라지게 하는 속성으로는 visibility와 display 두 가지가 있다. 비슷한 역할을 하는 것처럼 보이지만 두 속성에는 다른 차이가 존재한다. 이에 대해 기억하기 위하여 정리한다.

visibility: hidden	해당 요소가 보이지 않으며 layout에 영향을 미친다.	다시 말해, 보이지 않지만 width와 height가 설정되어있다면 공간은 그대로 유지된다.
display: none	해당 요소가 보이지 않으며 layout에 영향을 주지 않는다.	다시 말해, 보이지 않으면서 동시에 width와 height로 구분된 공간도 사라진다.

간단하게 visibility는 hidden이므로 해당 공간을 숨기는 것이지만,

display는 none, 즉 없다는 의미이므로 공간 자체를 없애는 것이라고 해석이 가능하다.

 

출처:

1. https://blog.naver.com/eroicaplus/90036328974

[HTML] div display, visibility 속성

2. https://cocobi.tistory.com/126