AI 웹개발반/HTML & CSS
[CSS] display:none; 과 visibility:hidden;
째깍단
2023. 6. 26. 21:43
display: none;
공간을 차지하지 않고 해당 div내 모든 요소를 보이지 않게 설정한다
= 다른 html에 영향 없음. 빈 공간 없음
visibility: hidden;
공간을 차지하며, 해당 div내 모든 요소를 보이지 않게 설정한다.
= 다른 html에 영향, 빈 공간이 보임
토글하여 나타내고 지울 때의
display: none; 과 visibility:hidden; 의 차이:
visibility
display: none;에는
부드럽게 내용을 띄울 수 있는 transition을 적용할 수 없다!
display는 transition-property 값으로 사용할 수 없는 속성이기 때문
대신 display는 keyframes로 애니메이션을 적용할 수 있다.