[miniProjects] 19_Theme Clock

19_Theme Clock

💻 주제 : 현재시각을 보여주고 시계바늘이 움직이는 시계 + 다크모드

• x축으로 -50%, y축으로-100% 까지 이동시키고 회전 시킬거임.

  transform: translate(-50%, -100%) rotate(0deg);

❗transform

• Element를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 )
• transform 내 사용 : translate , scale , rotate 등

❗translate

• Element를 이동시킬 때 사용
• X축이나 Y축 기준으로 한 값만 적용시키고 싶을 때는 translateY , translateY를 사용하던가 translate에서 원하지 않는 값에 0을 사용해도 된다.

❗transition

• Element의 CSS 속성을 변경할 때 부드럽게 움직이거나 원하는 대로 적용되도록 애니메이션 속도, 반복 횟수, 조절 등을 할 수 있다.
• dark 클래스를 만들어 add, remove로 다크모드와 라이트모드로 변경할 수 있음.
• 시계는 360도 회전하기 때문에 0~360까지 매핑(시는 12, 분은 60, 초는 60)

hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`;
  minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`;
  secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`;