css display visibility 차이 정리

HTML에서 CSS 사용 중

display 와 visibility를 사용해서

컴포넌트 숨김 / 노출 처리를 할 수 있는데

 

중간 컬러에 visibility : hidden 처리를 하고

하단 컬러에 display : none 처리를 했을 경우

 

위와 같이 적용이 되는 것이 보이는데

visibility의 경우에는 hidden 처리를 하면

공간은 그대로 유지하고

안의 요소들만 숨김 처리하지만

 

display의 경우에는 none 처리 시

공간까지 없었던 것 처럼 처리하게 된다