새롭게 알게 된 문법정리

Event

eventTarget.addEventlistner("keydown",eventHandler)

사용자가 키보드 버튼을 눌렸을 때 발생하는 이벤트 !
window.addEventListener("keydown",(event) => console.log(event));
라고 해주면 키보드를 누를 때의 정보들을 콘솔로그를 통해 얻을 수 있다. (반대는 "keyup" )
특히, keyCode를 이용해주면 키들마다 가지고 있는 값이 전부 다르기때문에 응용할 수 있고 event.target.value 를 입력해서 value값을 얻는 것처럼 event.keyCode 를 변수에 넣어준다거나 값으로 활용해주면서 사용하면 된다.

document.querySelector(element [속성 = "${event.keyCode}"])

위의 코드를 보면 audio라는 변수 안에 querySelector를 이용해 css 선택자처럼 이용해주는데, 이때 html의 요소 이름(audio , .key) 외에도 [속성값] 까지 넣어 선택해줄 수 있다.
이럴때는 "" 가 아닌 전체 querySelector 뒤의 괄호 안 전체를 `` 백틱으로 묶어서 사용해주면 된다.

eventTarget.addEventListner("transitionend",eventHandler)

transitionend – CSS 애니메이션이 종료되었을 때 발생한다!