CSS를 하다보면 흔히 볼 수 있는 한 가지 display 값은 none이다. 일부 특별한 엘리먼트에서는 none을 기본값으로 사용하기도 하는데, 이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하거나 재생성하지 않고도 엘리먼트를 보이고 감추는 데 흔히 사용된다.
그런데 이것은 visibility: hidden; 과는 다르다 😵
display: none;으로 설정하면 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링된다. 그러나visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지한다는 차이점이 있다.
?