display:none 은 화면에서 엘리먼트를 없애는 것이다.

브라우저가 렌더링 하지 않는다. 따라서 이 속성을 적절히 활용하면 로딩속도를 빠르게 할 수 있다.

css 는 아래와 같다.

결과는 다음과 같다.

빨강색 사각형이 없어진 것을 볼 수 있다. 그리고 그 자리를 파랑색 사각형이 메꾸고 있다. 아예 없어져 버리기 때문에 사각형이 올라오는 것이다.

이와 비교해 visibility: hidden 을 비교해보자

display:none 을 visibility: hidden 으로 아래와 같이 바꾸자

파랑색 사각형이 내려간 것을 볼 수 있다.

즉, 빨강색 사각형은 시야에서만 안보일 뿐, 그 자리에 존재하긴 하는 것이다.

레이아웃에 영향을 미치고 완전히 없어지는 것이 아니다.

두 차이를 알고 상황에 맞게 잘 활용하도록 하자