Keyboard Key Code Viewer
아무 키나 눌러서 JavaScript 키코드를 확인하세요
이벤트 속성
최근 기록
추천 도구
유용할 수 있는 엄선된 도구
아무 키의 JavaScript 키 코드 찾기
소개
웹에서 키보드 상호작용을 만들 때, 키 입력이 어떤 값을 내는지 — `key`, `code`, 그리고 옛 `keyCode` — 를 정확히 알아야 합니다. 키 코드 뷰어는 이를 실시간으로 보여줍니다: 아무 키나 누르면 JavaScript가 볼 식별자를 표시합니다. 이 도구는 브라우저에서 키 이벤트를 포착해, 추측 없이 단축키와 핸들러를 연결하게 해줍니다.
사용 방법 (단계별)
- 1
도구에 포커스하고 키 누르기
뷰어를 클릭한 뒤 검사할 아무 키나 조합을 누릅니다.
- 2
식별자 읽기
`key`, `code`, `keyCode`, 그리고 어떤 수정자가 눌렸는지 봅니다.
- 3
올바른 속성 사용
핸들러에 맞는 값을 복사합니다 — 문자엔 보통 `key`, 물리 키 위치엔 `code`.
작동 원리
도구는 키보드 이벤트를 듣고, 키를 누르면 이벤트 속성을 읽습니다: `key`('a'나 'Enter' 같은 문자·이름), `code`('KeyA' 같은 물리 키), 숫자 `keyCode`(폐기됐지만 여전히 보임), 수정자 상태(Shift·Ctrl·Alt·Meta). 이를 즉시 표시합니다. 모든 것이 브라우저에서 로컬로 실행되며 어떤 키 입력도 기록·전송되지 않습니다.
이럴 때 쓰세요
키보드 단축키를 만들며 매칭할 정확한 `key`나 `code`가 필요할 때. 특정 키에 핸들러가 안 걸리는 이유를 디버깅할 때. 레이아웃마다 같은 문자를 공유하는 키를 구별할 때. 단축키용 수정자 조합을 감지할 때. `key`, `code`, `keyCode`의 차이를 배울 때. 특수·미디어 키가 무엇을 보고하는지 확인할 때.
자주 묻는 질문
`key`는 만들어진 값으로 레이아웃과 수정자의 영향을 받습니다(Shift+a는 'A'). `code`는 물리 키 위치로 레이아웃에 영향받지 않습니다(그 키는 항상 'KeyA'). 문자엔 `key`, WASD 같은 물리 위치 단축키엔 `code`를 쓰세요.
주의사항
일부 키는 브라우저·운영체제·키보드 레이아웃마다 다르게 동작합니다 — 특히 데드 키, IME 입력, 미디어 키. 한 기기의 값이 어디서나 적용된다 가정하지 말고 대상 플랫폼에서 테스트하세요.