HTML DOM 체크박스 autofocus 속성 완벽 가이드

HTML DOM의 autofocus 속성은 type="checkbox"로 지정된 입력 요소의 autofocus 특성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 페이지가 로드될 때 해당 체크박스에 자동으로 포커스를 설정할 수 있습니다.

문법(Syntax)

autofocus 속성의 기본 문법은 다음과 같습니다.

1. autofocus 값 가져오기

object.autofocus

2. autofocus 값 설정하기

object.autofocus = true|false

true로 설정하면 요소가 자동 포커스를 받고, false로 설정하면 포커스가 해제됩니다.

예제(Example)

다음은 autofocus 속성을 실제로 활용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
    body{
        text-align:center;
    }
    p{
        font-size:1.5rem;
        color:#ff8741;
    }
    input{
        width:30px;
        height:30px;
        outline:2px solid #db133a;
    }
    button{
        background-color:#db133a;
        color:#fff;
        padding:8px;
        border:none;
        width:120px;
        margin:0.5rem;
        border-radius:50px;
        outline:none;
    }
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Do you need help?</p>
<input type="checkbox" autofocus>
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
    function yes() {
        document.querySelector("input").checked = true;
    }
    function no() {
        document.querySelector("input").checked = false;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 체크박스 autofocus 속성 완벽 가이드

페이지가 로드되는 순간 체크박스에 빨간색 테두리(outline)가 표시된 것을 확인할 수 있습니다. 이는 autofocus 속성이 적용되어 해당 요소가 자동으로 포커스를 받았음을 의미합니다.

이제 "Yes" 또는 "No" 버튼을 클릭해 보세요. Yes 버튼을 누르면 체크박스가 선택되고, No 버튼을 누르면 선택이 해제됩니다.

HTML DOM 체크박스 autofocus 속성 완벽 가이드

정리

autofocus 속성은 불리언(Boolean) 타입의 값으로 동작하며, JavaScript를 통해 런타임 중에도 동적으로 변경할 수 있습니다. 사용자 입력이 필요한 폼에서 특정 항목에 즉시 주목하도록 유도하고 싶을 때 유용하게 활용할 수 있습니다. 다만 하나의 페이지에서 여러 요소에 autofocus를 적용할 경우 첫 번째 요소만 포커스를 받으므로 주의해서 사용하는 것이 좋습니다.