display:none 과 visibility:hidden 의 차이

 display:none 과 visibility:hidden 의 차이

 

이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있습니다. 하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 큰 차이점이 있습니다. visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그립니다. 요소를 완전히 없애고 싶은지, 혹은 차지하는 공간은 놔둔채로 사용자 눈에서만 보이지 않고 싶은지에 따라 구분에서 사용하면 됩니다. 아래 예시에서, 버튼을 눌러 차이점을 확인해 보세요.

 

 

 

 

 

 

 

 

 정리

 

display:none 은 렌더 트리에서 없어짐 vs visibility:hidden은 렌더 트리에 남아있으며, 사용자 눈에만 안보이게 됨.