CSS visibility: hidden, display: none, pointer-events: none의 차이

 

CSS를 사용할 때, 특정 영역을 보이지 않게 하거나 숨길 때

visibility: hidden;, display: none;, pointer-events: none;을 많이 사용한다.

 

display: none;은 해당 요소가 화면에 보이지 않을 뿐만 아니라, 페이지의 레이아웃에서도 완전히 사라지게 한다.

이로 인해 다른 요소들이 그 공간을 채운다.

 

반면, visibility: hidden;은 요소를 보이지 않게 하지만, 해당 요소가 여전히 페이지에서 공간을 차지하고 있다.

마치 투명한 요소가 존재하는 것처럼, 그 자리에 빈 공간이 남아 있게 된다.

 

pointer-events: none;은 요소를 화면에 그대로 보이게 하면서도, 해당 요소를 비활성화시킨다.

이 설정을 적용하면 마우스 클릭, 터치와 같은 사용자 상호작용이 무시된다.