javaScript를 이용 하지 않고, 위 처럼 만들고자 한다면 어떤것들이 필요 할까? 1. 초침을 움직이는 애니메이션 2. 초침을 멈출 수 있는 변수. 3. 초침을 초기화 할 수 있는 함수. 위 세가지를 어떻게 구현 할 것인가? 1. 초침을 움직이는 애니메이션 => 간단하게 transform: rotate, animation을 이용하면 0deg -> 360deg로 변경 됨에 있어서 몇초 동안 걸리게 할 지 처리가 가능 하다. 2. 초침을 멈출 수 있는 변수 => 멈출 수 있는 변수 여기서 문제다. html, css에는 변수가 존재 하지 않는다. html에서 true, false의 값을 가질 수 있는 것을 생각 해보면 checkbox를 이용하는 것으로 해결 할 수 있다. 애니메이션을 도중에 멈추기 위해서는 animation-play-state를 사용 할 수 있다. 즉 checkbox를 체크 되어있으면 animation-play-state: running; 체크 되어있지 않으면, animation-play-state: paused;를 이용 하면 된다. 3. 초침을 초기화 할 수 있는 함수. => 초기화를 하기위해서는 무엇이 필요한가? 초기화 버트을 눌렀다는 이벤트가 필요하다. 의사 클래스인 :active를 이용해보자! :active는 mdn에서는 아래와 같이 설명 되어있다. :active CSS 의사 클래스 는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. :active는 버튼을 누른 순간에 활성화 되는 클래스이며, 해당 시점에 애니메이션을 잠시 제거하는 것만으로 초기화를 할 수 있다. 코드와 만드는 영상은 아래에 첨부하였으니, 여기까지 읽었다면 한번 코드는 확인 해보는 것을 추천 한다.