CSS. display:none과 visibility:hidden의 차이

display:none 과 visibility:hidden 의 차이

이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있음.
하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 차이점.
visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그림.

 1. display:none  <-> block
아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
렌더 트리에서 없어짐
2. visibility:hidden <-> visible
보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
렌더 트리에 남아있으며, 사용자 눈에만 안보이게 됨.