image.png

개요

현재 시간에 대응하여 움직이는 아날로그 시계를 만들어보자.

배운 점

  1. CSS property 사용

    • transition: 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다.

      transition: all 0.05s;
    • transform-origin: 변화의 중심을 지정합니다. (X축, Y축)

      transform-origin: 100% 100%; // 변화의 중심을 우측 하단으로 지정합니다. 
  2. javascript 를 통한 CSS property 조작
    & 백쿼터(`) 를 이용한 템플릿 리터럴의 사용

    hands[0].style.transform = "rotate(" + clockDeg[0] + "deg)";
    hands[0].style.transform = 'rotate(${clockDeg[0]}deg');
  3. setInterval 메서드를 통한 반복 실행

    • 일정한 시간 간격으로 작업을 반복 수행하기 위해서 사용합니다.

추가적으로 찾아볼 것 & 후기

  • CSS property 에 대한 추가 확인

참고자료