[CSS]display:none과 visibility:hidden 차이

display와 visibility의 공통점은 '안보이게'한다는 것인데,

차이점으로는

1. display: none

레이아웃에 영향을 주지 않도록 요소의 표시를 제거합니다.(요소가 없는 것처럼 문서가 렌더링됨). 모든 하위 요소도 표시를 제거합니다.

display로 요소를 숨길 경우, dom에서 제거된 것처럼 레이아웃이 제거된다.


2. visibility: hidden

visibility CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.

visibility: hidden을 사용했을 때는 개발자 도구에서도 확인할 수 있고, 레이아웃도 유지된다.

🐸예제

여기서 BOX2를 display와 visibility로 숨겨보자

-display: none 일 때

-visibility: hidden 일 때