2025.7.16 수요일의 공부기록
<label> 태그란?
HTML의 <label> 태그는 입력 필드(<input>)와 연결되는 라벨을 정의할 때 사용한다. 이는 사용자 경험(UX)을 개선하고 접근성을 높이는 데 매우 중요한 역할을 한다.
<label> 태그는 왜 쓰는가?
클릭 가능한 영역 확대
<label> 태그는 클릭 가능한 영역을 확장시킨다. 입력 필드가 작아도, 라벨을 클릭하면 자동으로 입력 필드에 포커스가 이동하여 사용자가 편하게 입력할 수 있다.
특히 모바일 환경에서는 터치 가능한 영역(hit area)이 넓어져 사용성이 크게 개선된다.
<label> 태그의 올바른 사용법
1) for 속성을 사용한 방법 (명시적)
입력 필드의 id와 <label>의 for 속성을 연결해 사용한다.
<label for="username">사용자 이름</label>
<input id="username" type="text" name="username" />2) input을 label 안에 중첩하는 방법 (암시적)
for 속성 없이 라벨 내부에 입력 필드를 직접 넣어주는 방법이다.
<label>
사용자 이름:
<input type="text" name="username" />
</label>두 가지 방법 모두 올바른 접근성 지원을 제공하지만, 보통 for 속성을 사용하는 방식을 권장한다.
단, React에서는 약간 다르다.
React에서 label을 사용할 때는 HTML의 for 대신 htmlFor 속성을 사용해야 한다.
이유는 React에서 for가 자바스크립트의 예약어로 쓰이기 때문이다.
React 예시 코드:
<label htmlFor="username">사용자 이름</label>
<input id="username" type="text" name="username" />- HTML의 기본적인 기능은 동일하지만 React에서는 반드시
htmlFor를 사용해야만 한다.
