HTML의 autofocus 속성은 여러 폼 요소에서 사용할 수 있는 속성으로, 페이지가 로드되는 순간 특정 요소에 자동으로 커서(포커스)를 위치시키는 기능을 합니다. 사용자가 마우스나 탭 키로 직접 클릭하지 않아도 원하는 입력 필드에 바로 입력을 시작할 수 있어, 검색창이나 로그인 폼처럼 빠른 입력이 필요한 화면에서 매우 유용합니다.
autofocus 속성을 지원하는 HTML 요소
autofocus 속성은 다음 네 가지 요소에 적용할 수 있습니다.
<button>, <input>, <select>, <textarea>
- <button> – 버튼에 포커스를 설정하여 Enter 키로 바로 실행 가능
- <input> – 텍스트·숫자 등 입력 필드에 커서 자동 위치
- <select> – 드롭다운 목록에 포커스 설정
- <textarea> – 여러 줄 텍스트 입력 영역에 포커스 설정
autofocus 속성 구현 예제
이제 HTML에서 autofocus 속성을 실제로 구현한 예제를 살펴보겠습니다. 아래 코드는 학생 정보를 입력하는 간단한 폼으로, 'Subject(과목)' 입력란에 autofocus 속성을 지정했습니다.
코드
<!DOCTYPE html> <html> <body> <h2>Result</h2> <form action="" accept-charset="ISO-8859-1"> <label for="stinfo">Student:</label> <input type="text" name ="stinfo"><br> <label for="sub">Subject:</label> <input type="text" name ="sub" autofocus><br> <label for="rank">Rank:</label> <input type="number" name ="rank"><br> <label for="marks">Marks:</label> <input type="number" name ="marks"><br><br> <input type="submit"> </form> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 두 번째 입력란(Subject)에 autofocus 속성을 설정했기 때문에, 페이지가 열리는 즉시 두 번째 텍스트 박스에 포커스가 자동으로 맞춰지는 것을 확인할 수 있습니다.
정리 및 활용 팁
- autofocus 속성은 하나의 문서에서 하나의 요소에만 적용하는 것이 권장됩니다. 여러 요소에 중복 지정하면 브라우저마다 동작이 달라질 수 있습니다.
- 모바일 환경에서는 autofocus가 작동하면 화면이 열리자마자 가상 키보드가 올라오므로, 입력이 필수적인 화면에만 신중하게 사용하는 것이 좋습니다.
- 접근성 측면에서도 포커스가 갑자기 이동하면 스크린 리더 사용자에게 혼란을 줄 수 있으므로, 필요한 경우에만 적절히 활용해야 합니다.