Javascript30 [02]

02. JS and CSS Clock

현재 시간에 대해 시,분,초침으로 나타내는 시계를 표현한다.

목표

1.transform, transition 속성 등을 이용해서 시,분,초침의 위치를 설정한다.

2.현재의 시,분,초에 대해 각도를 계산하여 변형을 적용시키는 함수 생성.

3.1초에 한 번씩 2번의 함수가 호출되도록 한다.

CSS transform-origin / transform 속성

• [ transform-origin ] : 원점의 위치를 지정

  • left 0% / center 50% / right 100% / top 0% / bottom 100%

• [ transform ] : 요소에 적용할 변형을 지정 (ex. rotate(90deg) )

CSS transition / transition-timing-function 속성

• [ transition ] : 속성을 서서히 변화시키는 속성

• [ transition-timing-function ] : transition의 진행 속도를 조절할 수 있습니다.

  • cubic-bezier( n, n, n, n ) : 점을 움직여서 원하는 커브를 만들고, 상단에 있는 수를 사용합니다.

setInterval 메소드 (주기적인 실행)

• 일정한 시간 간격으로 작업을 수행하기 위해서 사용

• setInterval(setDate, 1000); // 1000ms(1초) 간격으로 setDate() 함수를 호출