[Javascript] 02. CSS + JS Clock

Experience/[Javascript] JS 30

by winCow 2021. 4. 12. 23:54

1. 배경

역시 클론 코딩 학습의 일환이다. HTML, CSS가 작성된 상태에서 CSS를 수정하고 Javascript를 작성하여 시계가 작동하게 할 것이다.

2. HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>
<body>


    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>


</body>
</html>

3. CSS

    html {
      background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
      background-size: cover;
      font-family: 'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      margin: 0;
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
    }

위와 같은 상태에서, .hand 부분만 수정하여 시침, 분침, 초침의 움직임을 나타내도록 할 것이다.

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

CSS의 transform 속성은 요소에 회전, 크기 조절, 기울기, 이동 효과를 부여할 수 있다. 먼저 0시 0분 0초를 기준으로 만들기 위하여 가로 직선 모양의 침들을 transform: rotate(90deg)를 사용해 세로로 세운다. transform: rotate는 대상을 지정한 만큼 회전시킬 수 있다. transform-origin은, 회전, 확대, 비틀기 등, 하나의 점을 기준으로 하는 경우 사용하며, 원점의 위치를 지정한다. 100%를 적용하여 시계 표면의 중심에 원점을 위치하도록 한다. 트랜지션으로 각 침이 회전하는 속도를 0.05초로 지정한다. transition-timing-function은, 애니메이션의 중간값을 계산하는 방법을 정의하는 함수를 명시하며, 개발자 도구에서 직접 설정할 수 있다.

위와 같이, 개발자 도구에서 transition-timing-function을 작성하면 그래프를 직접 조절하여 애니메이션의 가속도를 조절할 수 있다.

4. Javascript

    const secondHand = document.querySelector('.second-hand');
    const minHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    function setDate() {
      const now = new Date();

      const seconds = now.getSeconds();
      const secondsDegrees = ((seconds / 60) * 360) + 90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

      const mins = now.getMinutes();
      const minsDegrees = ((mins / 60) * 360) + 90;
      minHand.style.transform = `rotate(${minsDegrees}deg)`;

      const hours = now.getHours();
      const hoursDegrees = ((hours / 12) * 360) + 90;
      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
    }

    setInterval(setDate, 1000);

시침, 분침, 초침의 원리는 기본적으로 같다. new Date()는 시간의 특정 지점을 나타내는 Date 객체를 생성한다. Date 객체의 매소드인 getSeconds, getMinutes, getHours를 이용해 현재의 초, 분, 시를 확인하고, 이를 시계에 반영할 수 있도록 변수를 설정한다. 이 변수를 이용해 HTML의 요소를 선택하여 transform의 각도 부분을 바꿔 준다.

이렇게 설정한 setDate 함수를 setInterval 함수를 이용해 1000ms(1초)마다 주기적으로 실행한다.

JS에서 CSS 스타일을 변경할 때는, HTML 요소를 선택한 뒤, .style을 통해 변경할 수 있다.

'Experience > [Javascript] JS 30' 카테고리의 다른 글

[Javascript] 06. Ajax Type Ahead (0)	2021.04.17
[Javascript] 05. Flex Panel Gallery (0)	2021.04.16
[Javascript] 04. Array Cardio Day 1 (0)	2021.04.15
[Javascript] 03. Update CSS Variables with JS (0)	2021.04.14
[Javascript] 01. Drum Kit (0)	2021.04.12