HTML에서는 autofocus 속성을 사용하면 페이지가 로드되는 순간 특정 요소가 자동으로 포커스(커서)를 받도록 지정할 수 있습니다. 이 속성은 불리언(Boolean) 속성으로, 별도의 값을 입력할 필요 없이 태그에 추가하기만 하면 됩니다.
autofocus 속성의 기본 개념
autofocus 속성은 <input>, <button>, <textarea>, <select> 등 대부분의 폼 관련 요소에서 사용할 수 있습니다. 검색창이나 로그인 입력란처럼 사용자가 즉시 입력을 시작해야 하는 경우에 활용하면 편의성을 크게 높일 수 있습니다.
단, 하나의 문서에서 여러 요소에 이 속성을 지정하면 첫 번째 요소만 포커스를 받으므로, 한 페이지에는 하나의 핵심 요소에만 적용하는 것이 바람직합니다.
예제 코드
아래 코드를 실행하면 autofocus 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 페이지가 열리자마자 버튼이 자동으로 포커스를 받기 때문에, 마우스를 클릭하지 않고 Enter 키만 눌러도 클릭 이벤트가 발생합니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 알림 창이 나타납니다.</p>
<button type="button" autofocus onclick="alert('환영합니다!')">결과 확인</button>
</body>
</html>
사용 시 주의사항
autofocus 속성은 HTML5부터 공식적으로 지원됩니다. 다만 접근성(Accessibility) 측면에서 주의가 필요합니다. 페이지 로드와 동시에 포커스가 강제로 이동하면 스크린 리더 사용자에게 혼란을 줄 수 있으므로, 정말 필요한 상황에서 신중하게 사용하는 것이 좋습니다.