728x90
반응형
show/hide
기본적으로 요소를 숨김/표시할 때, display를 사용
다만 display는 transition 속성에 영향을 받지 않기 때문에 자연스러운 애니메이션 구현이 안됨..!
fade in/fade out
자연스러운 fade in/fade out 애니메이션을 구현하려면 display 대신 visibility 사용
visibility는 transition 속성에 영향을 받음
opacity 속성만을 사용하여 요소를 숨기게 되면, 요소는 여전히 DOM에서 차지하는 공간을 유지하고, 마우스 클릭 등의 이벤트도 발생할 수 있음. opacity를 0으로 설정하면 요소가 완전히 투명해지지만, 요소의 공간과 이벤트는 그대로 유지 됨.
728x90
반응형
'HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] Flexbox: 헷갈리기 쉬운 justify-content와 align-items 속성 정리 (1) | 2024.07.23 |
|---|---|
| [HTML/CSS] CSS Vendor Prefixes 란? (3) | 2024.07.21 |
| [HTML/CSS]Flexbox: 헷갈리기 쉬운 flex-basis, flex-grow, flex-shrink 속성 정리 (0) | 2024.07.20 |
| [HTML/CSS]스크롤 시 상단에 고정하고 싶다면? position: sticky 사용하기! (0) | 2024.07.19 |
| [CSS] 선택자 정리 (0) | 2024.07.16 |