메뉴 건너뛰기

HEUKMYO

Html/css

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


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

 

css 는 아래와 같다.


css_display.png


결과는 다음과 같다.

 

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


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


display_none.png


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


css_visibility.png


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


visibility_hidden.png


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

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

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

위로