중앙 상단에 위치시킬 시계를 만들어 보자.
html에 시계가 들어갈 태그를 만들어준다.
클래스는 css 때문에 만든 거라 시계를 만드는 것과 상관없다.
js로 시계를 만드는 건 의외로(?) 쉽다.
clock 변수로 시계를 넣을 위치를 지정해준다.
시계는 시, 분, 초로 이루어져 있기 때문에 시계라는 함수를 만들어, 시, 분, 초를 안에 넣는다.
date의 많은 메서드 중 시간과 분, 초를 나타내는 getHours, getMiuntes, getSeconds를 사용한다.
추출한 시간들을 innerText로 시계가 위치 html 태그에 넣는다.
시, 분, 초의 자리가 한 자릿수일 때는 01처럼 표시되는 게 아니라 1만 표시되기 때문에 우리가 자주 보는 디지털시계와는 차이가 있다.
그래서 padStart라는 걸 사용해서 두 자릿수가 아닐 경우 앞에 0을 추가한다.
getClock을 호출하는데, 여기서 끝나면 시계는 한 번만 보여주고 움직이지 않는다.
그래서 setInterval을 사용해서 어떤 함수를 몇 초에 한 번씩 실행되게 할 건지 정해줘야 한다.
1000이 1초다. 2000은 2초가 되겠다.
