2. 시계 ⏱

목표

시, 분, 초를 표시하는 시계를 만들어 보자.

레이아웃 만들기

시계 틀과 바늘 세 개를 만들었다. 바늘은 공통 클래스와 ID를 하나씩 지정했다.

스크립트 작성

매초 시곗바늘이 움직이도록 하기 위해서 각 바늘에 애니메이션을 주는 함수를 1000ms 간격으로 반복했다.

시와 분은 각도만 조정하면 됐지만, 초침은 매초 움직이므로 자연스럽게 보이도록 약간의 transition을 주었다. 다만 354°에서 360°로 이동할 때 0°로 이동하는 것으로 간주되어 -354°를 돌아간다. 각도가 0이 되었을 때 일시적으로 transition을 해제하는 것으로 해결하였다. 이후 강의를 마저 들어보니 강의에서도 똑같은 문제가 발생했는데, 해결 방법을 간단하게 언급만 하고 넘어갔으며 답안 코드에도 해결되지 않아 있었다.

CSS 작성

요소들의 위치는 고정되어 특별히 신경쓸 부분이 없었다. 대신 바늘이 시계 중심에 고정되도록 위치를 조정했고, 시계 중심을 기준으로 돌아가게 하기 위해 transform-origin을 지정했다. 처음에는 position을 relative로 지정했는데, 원래 div의 크기 때문에 밀린 위치를 기준으로 이동하여 축에 일치되지 않아 absolute로 바꿨다.

새로 알게 된 점

transform-origin을 이용하여 애니메이션의 기준점을 정할 수 있다. 인자로는 x | y | z 좌표를 차례대로 줄 수도 있고, center, right 등의 예약어를 사용할 수도 있다.

과제 자체는 너무 단순해서 금방 끝날 줄 알았는데, 애니메이션 문제 해결이나 위치 지정에 애를 먹어서 생각보다 훨씬 오래 걸렸다. rotate 방향에 관한 문제는 내가 사용한 방법으로 해결할 수도 있고, CSS에서 지원하는 animation을 이용할 수도 있다. animation은 from과 to를 각각 지정하기 때문에 원하는 방향으로 회전하게 하는 것도 가능하고, iteration을 지정하여 같은 애니메이션을 반복할 수도 있다. 게다가 iteration 값을 infinite로 지정할 수도 있어서 시계처럼 무한히 반복되는 애니메이션을 구현하기도 용이하다. 다만 브라우저에 따라 호환되지 않는 애니메이션도 있어 주의해야 한다.

소스 코드

Visit Github Repository