키보드로 쥐 움직이기
중요도: 4
쥐에 포커스를 준 다음 화살표 키를 이용해서 쥐를 움직여봅시다.
참고1: #mouse 요소 이외의 어느 곳에도 이벤트 핸들러를 달지 마세요.
참고2: HTML과 CSS를 수정하지 마세요. 작성할 자바스크립트는 어떤 요소에서도 동작할 수 있는 범용성이 있어야 합니다.
mouse.onclick으로 클릭 이벤트를 핸들링하고 position:fixed로 쥐가 이동할 수 있도록 준비합니다. 이 상태에서 mouse.onkeydown로 화살표 키를 핸들링합니다.
문제의 핵심은 keydown은 오직 포커스된 요소에서만 트리거 된다는 점입니다. 따라서 원하는 요구사항을 구현하려면 요소에 tabindex를 추가해줘야 합니다. 그런데 문제에서 HTML을 수정하지 말라고 했으므로 속성값 추가 말고 mouse.tabIndex 프로퍼티를 사용해야 합니다.
참고: 해답에서 mouse.onclick을 mouse.onfocus로 바꿔도 잘 동작합니다.