HTML

• <kbd> 태그

: 키보드 입력 요소 - HTML: Hypertext Markup Language | MDN

• data-key 속성

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

JS

• DOM 키 이벤트 등록
  • window.addEventListener("keydown", function(event){ })

이벤트 참조 | MDN

• 키보드 눌림 이벤트
  • 눌린 키보드 key 정보 얻기
  • keydown 이벤트

KeyboardEvent.code - Web APIs | MDN

• 플레이 된 오디오, 다시 클릭시, 처음부터 다시 시작되도록 제어
  • audio.paused ( true OR false )
  • audio.currentTime = 0

- HTML: Hypertext Markup Language | MDN

javascript - 오디오를 재생하고 클릭시 다시 시작

[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

• 작성된, 눌린 키 박스 CSS 적용 후, 취소를 위해, className 삽입 후, 취소
  • document.요소찾기방식**.className** += '추가할 문자열';
  • setTimeout 사용