CSS fade in, fade out 효과 구현하기
1. 분석 fade in, fade out 효과를 구현할 때 CSS 속성인 `opacity`와 `transition`을 활용해서 쉽게 구현할 수 있다. 이번 포스팅에선 CSS만 활용해서 효과를 구현할 것이기 때문에 마우스를 오버했을 때 효과가 나타나는 것을 구현한다. .fade-in { width: 100px; height: 100px; background-color: brown; opacity: 0; transition: 0.3s; } .tip1:hover + .fade-in { opacity: 1; } .fade-out { width: 100px; height: 100px; background-color: darkcyan; opacity: 1; transition: 0.3s; } .tip2:hover..
2022. 5. 25.
