100일 CSS 챌린지 #10 : 시계

문제

https://100dayscss.com/days/10/

 

Watch: Classic, noble, modern or playful? What do you want your favorite watch to look like?
시계: 클래식, 고귀함, 모던함, 아니면 유쾌함? 당신이 가장 좋아하는 시계는 어떤 모습이길 바라나요?

 

내 풀이

See the Pen 010 - Watch by dobbyjang0 (@dobbyjang0) on CodePen.

원형으로 모여 있는 점 찍기

 요소를 많이 만들기 싫어서 원래 점에서 before, after를 이용, 앞뒤로 각도 다르게 점을 찍은 후 추가시켰다. 그래서 한 요소당 점 3개를 찍을 수 있게 하였다. 그 후 scss 반복문을 이용하여 회전 각도를 조금씩 바꿨다.

 

빨간색 돌아가는 시간 바

모범 답안에서는 svg와 애니메이션에서 stroke-dashoffset을 이용한 부분. 난 이용하지 않고 border에서 두 쪽을 transparent해서 만든 반원 2개를 이용하였다. 그리고 애니메이션으로 회전시킴과 동시에  z-index를 바꿔주며 서로가 서로를 가리게 해주었다.

 

현재 시간

자바스크립트로 1분마다 현재시간을 불러오도록 함

 

예시 모범답안

See the Pen 010 - Watch by Matthias Martin (@roydigerhund) on CodePen.