반응형
마우스올리면요소움직이기
-
<HTML/CSS> Animation 2 : 마우스 이벤트실행시 요소 움직이기컴퓨터 알아가기/HTML CSS 2022. 9. 20. 19:30
CSS Animation 기초는 Rock's EasyWeb을 기본으로 공부하고 있습니다. Animation 기초 동작으로 시계방향으로 사각형을 색을 변화시키면서 작업을 해 보았습니다. 이럴 경우 브라우저가 작동이 되면 바로 실행이 되기 때문에 실질적으로 활용 가치가 떨어집니다. 하지만 Animation의 기본을 이해하는데 있어 충분하다고 보여집니다. 이제는 마우스를 올리거나 클릭할 경우 (이 모든것을 이벤트라고 함) 움직이는 Animation을 이해하고자 합니다. 간단히 생각해서 마우스를 올린다는 것은 hover 기능이고 그만큼 어떤 틀속에서 움직여야 하기때문에 태그 안에 태그를 적용하면 될 듯 합니다. 여기서 Animation 속성을 사용하면 되는데 Transition과 마찬가지로 속성값을 축약해서 쓸..