Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML

HTML의 <button> 요소에서 autofocus 속성은 웹 페이지가 로드되는 순간 해당 버튼에 자동으로 초점(focus)을 설정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 마우스로 클릭하지 않아도 키보드 입력을 곧바로 받을 수 있어, 접근성과 사용자 편의성을 동시에 높일 수 있습니다.

autofocus 속성 문법

autofocus는 불리언(Boolean) 속성이므로 별도의 값을 지정할 필요 없이 속성 이름만 작성하면 됩니다. 기본 문법은 다음과 같습니다.

<button type="button" autofocus>

위처럼 버튼에 autofocus를 설정하면, 페이지가 열리는 즉시 해당 버튼이 포커스된 상태가 됩니다.

예제

이제 <button> 요소의 autofocus 속성을 실제로 구현한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
    <h2>데모 제목</h2>
    <p>이것은 데모 문장입니다.</p>
    <button type="button" autofocus>데모</button>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같이 버튼에 초점이 맞춰진 상태로 화면에 표시됩니다.

HTML button 태그의 autofocus 속성 – 페이지 로드 시 버튼에 자동 포커스 설정하기

위 예제에서는 버튼 요소에 autofocus 속성을 다음과 같이 지정했습니다.

<button type="button" autofocus>
    데모
</button>

이렇게 설정하면 페이지가 로드되는 순간 버튼 자체에 초점이 부여되며, 방문자는 웹 페이지에서 해당 버튼이 포커스된 상태임을 바로 확인할 수 있습니다.

참고 사항

autofocus 속성은 하나의 문서에서 한 번만 사용하는 것이 권장됩니다. 여러 요소에 중복 지정할 경우 브라우저마다 동작이 달라질 수 있습니다. 또한 대부분의 최신 브라우저(Chrome, Firefox, Edge, Safari 등)에서 안정적으로 지원되므로, 검색 폼이나 주요 액션 버튼에 활용하면 좋습니다.