|
2 | 2 |
|
3 | 3 | 키보드 이야기를 시작하기 전에 먼저 알아 둘 점이 있습니다. 모던 디바이스에선 키보드 말고도 '무언가를 입력'하는 다양한 수단이 있습니다. 음성 인식(특히 모바일 기기)이나 마우스를 사용한 복사·붙여넣기가 그 예입니다. |
4 | 4 |
|
5 | | -따라서 `<input>` 필드에 들어오는 입력 전부를 추적하려면 키보드 이벤트만으론 부족합니다. 입력 수단과 관계없이 `<input>` 필드의 변경을 추적하는 `input`이라는 이벤트가 따로 존재합니다. 입력 추적이 목적이라면 `input` 이벤트가 더 나은 선택일 수 있습니다. `input` 이벤트는 <info:events-change-input> 챕터에서 다루겠습니다. |
| 5 | +따라서 `<input>` 필드에 들어오는 입력 전부를 추적하려면 키보드 이벤트만으론 부족합니다. 이를 보완하는 수단으론 입력 수단과 관계없이 `<input>` 필드의 변경을 추적하는 `input`이라는 이벤트가 따로 존재합니다. 입력 추적이 목적이라면 `input` 이벤트가 더 나은 선택일 수 있습니다. `input` 이벤트는 <info:events-change-input> 챕터에서 다루겠습니다. |
6 | 6 |
|
7 | 7 | 키보드 이벤트는 키보드 동작 자체를 다루고 싶을 때 사용해야 합니다(가상 키보드 포함). 방향키 `key:Up`·`key:Down` 입력이나 단축키(키 조합 포함)에 반응하는 경우가 그 예입니다. |
8 | 8 |
|
9 | 9 |
|
10 | | -## 테스트 스탠드 [#keyboard-test-stand] |
| 10 | +## 실험용 미니 데모 [#keyboard-test-stand] |
11 | 11 |
|
12 | 12 | ```offline |
13 | | -키보드 이벤트를 더 잘 이해하고 싶다면 [테스트 스탠드](sandbox:keyboard-dump)를 사용해 보세요. |
| 13 | +[실험용 미니 데모](sandbox:keyboard-dump)를 돌려보면 키보드 이벤트를 더 잘 이해할 수 있습니다. |
14 | 14 | ``` |
15 | 15 |
|
16 | 16 | ```online |
17 | | -키보드 이벤트를 더 잘 이해하고 싶다면 아래 테스트 스탠드를 사용해 보세요. |
| 17 | +실험용 미니 데모를 돌려보면 키보드 이벤트를 더 잘 이해할 수 있습니다. |
18 | 18 |
|
19 | 19 | 텍스트 필드에 다양한 키 조합을 입력해 봅시다. |
20 | 20 |
|
|
24 | 24 |
|
25 | 25 | ## keydown과 keyup |
26 | 26 |
|
27 | | -키를 누르면 `keydown` 이벤트가 발생합니다. 눌렀던 키에서 손을 떼면 그때 `keyup` 이벤트가 발생합니다. |
| 27 | +키를 누르면 `keydown` 이벤트가 발생합니다. 눌렀던 키에서 손을 떼면 `keyup` 이벤트가 발생합니다. |
28 | 28 |
|
29 | 29 | ### event.code와 event.key |
30 | 30 |
|
31 | 31 | 이벤트 객체의 `key` 프로퍼티로는 입력된 글자를, `code` 프로퍼티로는 '물리적인 키 코드'를 알아낼 수 있습니다. |
32 | 32 |
|
33 | | -예를 들어 같은 키 `key:Z`라도 `key:Shift`와 함께 누르는지에 따라 소문자 `z`와 대문자 `Z`라는 서로 다른 두 글자가 입력됩니다. |
| 33 | +같은 키 `key:Z`를 눌러도 `key:Shift`와 함께 누르는지에 따라 소문자 `z`와 대문자 `Z`라는 서로 다른 두 글자가 입력됩니다. |
34 | 34 |
|
35 | | -`event.key`는 입력된 글자 그 자체라서 두 경우에 값이 다릅니다. 반면 `event.code`는 같습니다. |
| 35 | +`event.key`는 입력된 글자 그 자체를 파악하기 때문에 두 경우에 값이 다릅니다. 반면 `event.code`는 같습니다. |
36 | 36 |
|
37 | 37 | | 키 | `event.key` | `event.code` | |
38 | 38 | |--------------|-------------|--------------| |
|
52 | 52 |
|
53 | 53 | 널리 쓰이는 키보드 자판 배열이 여러 종류 있는데 명세는 배열별 키 코드를 제공합니다. |
54 | 54 |
|
55 | | -더 많은 코드가 궁금하다면 [명세의 알파벳·숫자 절](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section)을 읽거나 위 [테스트 스탠드](#keyboard-test-stand)에서 직접 키를 눌러 보세요. |
| 55 | +더 많은 코드가 궁금하다면 [명세의 알파벳·숫자 절](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section)을 읽거나 위 [실험용 미니 데모](#keyboard-test-stand)에서 직접 키를 눌러 보세요. |
56 | 56 | ``` |
57 | 57 |
|
58 | 58 | ```warn header="대·소문자 구분: `\"keyZ\"`가 아니라 `\"KeyZ\"`" |
|
0 commit comments