이번 포스트에서는 자바스크립트를 사용하여 시계 애니메이션을 만드는 방법을 알아보겠습니다.

1. HTML 구조 설정

먼저, HTML을 사용하여 시계를 표시할 구조를 설정해야 합니다. 예를 들어, 다음과 같은 구조를 사용할 수 있습니다.

<div id="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
</div>

위 코드에서 clock라는 id를 가진 div를 시계 애니메이션을 표시할 컨테이너로 사용합니다. 시침, 분침, 초침은 각각 hour-hand, minute-hand, second-hand라는 class를 가진 div로 표시됩니다.

2. CSS 스타일 적용

시계의 모양을 정의하기 위해 CSS를 사용합니다. 시계의 컨테이너와 각 침의 스타일을 설정해야합니다. 아래 예제는 간단한 스타일을 적용한 예시입니다.

#clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #000;
  position: relative;
  transform: rotate(90deg);
}

.hour-hand, .minute-hand, .second-hand {
    position: absolute;
    background-color: #000;
    border-radius: 3px;
    transform-origin: bottom center;
}

.hour-hand {
  width: 6px;
  height: 70px;
  bottom: 50%;
  left: calc(50% - 3px);
}

.minute-hand {
  width: 4px;
  height: 90px;
  bottom: 50%;
  left: calc(50% - 2px);
}

.second-hand {
  width: 2px;
  height: 100px;
  bottom: 50%;
  left: calc(50% - 1px);
}

위의 CSS 코드는 clock id를 가진 div의 크기와 모양을 설정합니다. 각각의 침의 스타일은 hour-hand, minute-hand, second-hand 클래스로 지정합니다.

3. JavaScript로 시계 애니메이션 구현

이제 시계를 움직이는 자바스크립트 애니메이션을 구현해 보겠습니다. JavaScript 코드에서 setInterval 함수를 사용하여 일정한 간격으로 시계를 업데이트합니다. 아래는 간단한 예제입니다.

function updateClock() {
  var currentDate = new Date();
  var hours = currentDate.getHours() % 12;
  var minutes = currentDate.getMinutes();
  var seconds = currentDate.getSeconds();

  var hourHand = document.querySelector('.hour-hand');
  var minuteHand = document.querySelector('.minute-hand');
  var secondHand = document.querySelector('.second-hand');

  var hourRotation = (30 * hours) + (0.5 * minutes);
  var minuteRotation = 6 * minutes;
  var secondRotation = 6 * seconds;

  hourHand.style.transform = `rotate(${hourRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  secondHand.style.transform = `rotate(${secondRotation}deg)`;
}

setInterval(updateClock, 1000);

위의 JavaScript 코드는 updateClock 함수를 정의하여 시계를 업데이트합니다. getHours, getMinutes, getSeconds 메서드를 사용하여 현재 시간을 가져옵니다. 그리고 querySelector 함수를 사용하여 각각의 침을 선택합니다. 시간별로 필요한 회전 값을 계산한 후, style.transform 속성을 사용하여 침을 회전시킵니다. 마지막으로 setInterval 함수를 사용하여 1초마다 updateClock 함수를 호출하여 시간을 업데이트합니다.

이제 웹 페이지에서 시계 애니메이션을 볼 수 있습니다!

결론

이번 포스트에서는 자바스크립트를 사용하여 시계 애니메이션을 만드는 방법을 알아보았습니다. HTML 구조를 설정하고 CSS 스타일을 적용한 후, JavaScript를 사용하여 시간을 업데이트하고 시계 애니메이션을 구현했습니다. 이제 여러분은 이 기본적인 예제를 기반으로 시계 애니메이션을 개선하고 다양한 기능을 추가할 수 있습니다.

#javascript #시계