[CSS] display:none; 과 visibility:hidden;

display: none;

 

공간을 차지하지 않고 해당 div내 모든 요소를 보이지 않게 설정한다

= 다른 html에 영향 없음. 빈 공간 없음

 

visibility: hidden;

공간을 차지하며, 해당 div내 모든 요소를 보이지 않게 설정한다.

= 다른 html에 영향, 빈 공간이 보임

 

 

 

 

 

토글하여 나타내고 지울 때의 

display: none; 과 visibility:hidden; 의 차이:

 

visibility

 

 

display: none;에는 

부드럽게 내용을 띄울 수 있는 transition을 적용할 수 없다!

display는 transition-property 값으로 사용할 수 없는 속성이기 때문

 

대신 display는 keyframes로 애니메이션을 적용할 수 있다.

 

 

 

[참고]: 

https://velog.io/@jhsung23/CSS-%EC%9A%94%EC%86%8C%EB%A5%BC-%EC%88%A8%EA%B2%A8%EB%92%80%EB%8B%A4%EA%B0%80-%EB%B2%84%ED%8A%BC%EC%9D%84-%ED%81%B4%EB%A6%AD%ED%95%98%EB%A9%B4-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0