HTML5 autofocus 속성의 올바른 사용법
HTML5에서 요소에 자동으로 포커스를 지정하는 autofocus 속성은 불리언(boolean) 속성입니다. 그렇다면 autofocus="autofocus"처럼 값을 명시해야 할까요, 아니면 autofocus만 쓰면 될까요? w3.org 명세에 따르면 그 답은 다음과 같습니다.
The autofocus attribute is a boolean attribute. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
즉, autofocus 속성은 불리언 속성으로, 요소에 이 속성이 존재하면 true 값을 나타내고, 속성이 존재하지 않으면 false 값을 나타냅니다.
속성 값 작성 규칙
명세에 따르면 속성이 존재할 경우 그 값은 반드시 아래 두 가지 중 하나여야 합니다.
- 빈 문자열(empty string)
- 속성의 정규 이름(canonical name)과 ASCII 대소문자를 구분하지 않고 일치하는 값 (앞뒤 공백 제외)
autofocus의 세 가지 작성 방법
HTML에서는 불리언 속성을 값 없이 사용하거나, 값을 명시하여 사용할 수 있습니다. 따라서 W3C 표준 기준으로 autofocus는 다음과 같이 자유롭게 작성할 수 있습니다.
첫째, 값 없이 속성 이름만 작성:
autofocus
둘째, 속성 이름과 동일한 값을 지정:
autofocus = "autofocus"
셋째, 빈 값으로 지정:
autofocus = ""
실제 사용 예시
예를 들어 페이지가 로드될 때 입력 필드에 자동으로 커서가 위치하도록 하려면 다음과 같이 작성합니다.
<input type="text" autofocus>
세 가지 방식 모두 HTML5 표준에서 유효하며, 일반적으로는 간결성을 위해 값 없이 autofocus만 작성하는 것이 가장 권장됩니다.