display / visibility

CSS를 사용해 특정 콘텐츠 및 요소를 사라지게 만들어야 하는 경우가 있다.

이때 사용이 가능한 속성이 바로 display 와 visibility이다. 

 

1. display와 visibility 차이점

가장 큰 차이점은 보엿을때의 공간이다. 즉, 기존의 영역을 빈공간으로 차지하고 사라지느냐 아니면 빈공간까지 사라지게 하느냐의 차이이다.

visibility: hidden;
display:none;

둘 다 css를 수행하면 보이지 않는 것은 동일하나 visibility 속성은 해당하는 요소의 영역이 보이지만 않을 뿐 화면에 그대로 빈공간으로 유지된다. 영역 자체는 사라지지 않는 것이다. ( 기능까지 숨김, 마우스 클릭 가능)

display 속성은 영역 자체까지 사라지기 때문에 인접한 요소의 레이아웃에 영향을 미칠 수 있다. ( 눈에 보이는 화면 없앰)

 

 

2. 예제

-display:none

-visibility:hidden;