HTML에서 단축키(바로 가기 키)를 만들려면 accesskey 속성을 사용하면 됩니다. 이 속성은 링크, 버튼 등 다양한 요소에 키보드 단축키를 지정하여 마우스 없이도 해당 요소를 빠르게 활성화할 수 있게 해줍니다.
예를 들어, 아래와 같은 링크에 단축키를 추가해야 한다고 가정해 보겠습니다.
Hadoop Tutorial
브라우저별 단축키 조합
단축키는 브라우저와 운영체제에 따라 조합 방식이 다릅니다. 특히 Windows 환경의 Firefox 웹 브라우저에서 단축키가 정상적으로 작동하도록 하려면 다음과 같은 조합을 사용해야 합니다.
[Alt] + [Shift] + accesskey
반면 Chrome이나 Edge에서는 일반적으로 [Alt] + accesskey만으로도 동작합니다. 따라서 주요 브라우저에서 모두 호환되도록 하려면 Alt와 Shift를 함께 사용하는 것이 안전합니다.
예제 코드
아래 코드를 실행하면 HTML에서 요소를 활성화하는 단축키를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <a href="https://www.tutorialspoint.com/hadoop/index.htm" accesskey="h">Hadoop Tutorial</a> <p>ALT+SHIFT+H 키를 누르면 Hadoop Tutorial 페이지로 이동합니다.</p> </body> </html>
위 예제에서는 accesskey="h"로 설정했기 때문에, Firefox에서는 Alt + Shift + H를 눌러 해당 링크를 활성화할 수 있습니다.
참고 사항
accesskey 값은 사용자가 쉽게 인지할 수 있도록 화면에 명시적으로 안내해 주는 것이 좋습니다. 또한 동일한 페이지에서 같은 accesskey 값을 중복해서 사용하면 의도하지 않은 요소가 활성화될 수 있으므로 각 값은 고유하게 지정하는 것이 바람직합니다.