[JS 30일 프로젝트]시계 만들기

- new Date()는 현재 날짜와 시간을 가지는 객체를 리턴한다. new Date();

- 현재 연도/월/일/요일 구하기 

let today=new Date();

let year=today.getFullYear();	//년도
let month=today.getMonth();		//월	(1월은 0으로 표현된다.)
let date=today.getDate();		//날짜
let day=today.getDay();			//요일 (일요일이 0, 토욜일이 6으로 표현된다.)

let hours=today.getHours();	//시
let minutes=today.getMinutes();	//분
let seconds=today.getSeconds();	//초
let milliseconds=today.getMilliseconds(); //밀리초

- transform-origin 은 css transform 속성과 함께 사용되는 속성으로 회전 중심(원점, 기준점)을 지정한다. 

rotate() 회전 속성을 사용하기 전에 기준점을 지정해둔다. 초기 값은 50% 50%으로 요소의 중심점이 된다. 

 

- transition : 이 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다. 

 

transition: trnasition-property | transition-duration | transition-timing-function | transition-delay

• transition-property : css 속성을 지정함(트랜지션 효과를 적용하고 싶은 css 속성 - 하나 이상의 속성을 나열할 때 쉼표로 분리)
• transition-duration : 트랜지션 실행 시간. 이 속성은 항상 지정해줘야 한다. 그렇지 않을 경우 기본값 0s가 적용되는데 아무런 효과가 나타나지 않는다. 
• transition-timing-function : 트랜지션이 실행되는 동안 속도 설정
• transition-delay : 언제 트랜지션을 시작할지 지정

- transition-timing-function : 전환 효과의 시간당 속도를 설정한다. 

다음과 같은 값을 설정할 수 있다. 

1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.

2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.

3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.

4. ease-out : 전환(transition) 효과가 천천히 끝납니다.

5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.

6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.

 

- cubic- bezier : 베지어 곡선을 정의하는 것이다. 베지어 곡선이란 우리가 곡선을 매끄럽게 잘 그릴 수 있게끔 해주는 곡선 알고리즘이다.