제목 그대로 시간의 변화를 실시간으로 화면에 나타내는 것을 다뤄 보겠다. 아날로그는 아니고 숫자만 변하는 단순 디지털 시계를 만들어 보겠다. 준비할 건 html, 자바스크립트 파일이고 사용할 js 함수는 new Date, padStart, setInterval이다. 00:00 우선 간단히 html 을 구성했다. clock.js 파일을 만들어 h1 태그 내부에 시간을 출력할 것이다. const clock = document.querySelector("h1#clock"); function showTime() { const date = new Date() const hour = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getM..

toggle toggle(토글) 의미 더보기 토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다. 토글 스위치는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치가 토글 스위치이다. 컴퓨터 키보드에서, Caps Lock 키도 일종의 토글 스위치인데, 왜냐하면 그 스위치를 누르는 것은 현재의 설정 값이 무엇이냐에 따라 두 가지 의미로 동작할 수 있기 때문이다. 만약 Caps Lock이 이미 설정된 상태라면, 그 키를 눌렀을 때 Caps Lock이 해제된다. 그러나, 반대로 Caps Lo..

innerHTML 작성한 문자열 중에 HTML 속성의 문자가 있다면, HTML 형식으로 적용된다. (태그 등) const context = document.querySelector('.hello') function mouseEnter() { context.innerHTML = "mouse is hear!"; head.style.color = 'red'; } head.addEventListener('mouseenter', mouseEnter) 위 코드에서 해당 문자 위에 마우스를 갖다 놓으면 아래와 같이 HTML 태그가 적용되어 나타난다. innerText innerHTML과 반대다. 입력한 문자열에 HTML 속성이 적용되지 않고 문자 그대로 나타난다. const context = document.quer..