[HTML/CSS] label 태그

1️⃣ label 태그란 ?

: <label> 태그는 폼 요소에 이름을 붙일 때 사용하는 태그이다.

• 이 이름표를 label이라고 한다.
• <input> 태그와 자주 사용된다.

---

<label> 을 사용하면 어떤 점이 좋은가 ?

<div>
  <label htmlFor = 'name'> 이름 : </label>
  <input type = "text" id = 'name'>
</div>

위와 같이 태그를 적용하면 이름 : 영역을 클릭하면 input의 입력 영역이 포커싱 된다.
➡️ 추가적으로 웹접근석 측면으로도 해당 input 태그가 name을 입력하는 input임을 알려주는 역할을 할 수 있다.

위 사진과 같이 이름: 라벨을 클릭하면 자동으로 input창이 활성화 된다.

2️⃣ label 태그 사용법

: label 태그는 다음 두가지 방법으로 사용할 수 있다.

1. 명시적 작성방식

명시적 작성 방식이란 <label> 태그와 <input> 태그를 따로 사용하여 <label> 태그의 for 속성을 사용하여 연결해주는 방법이다.

<label for = 'name'> 이름 : </label>
<input id = 'name' type = 'text'>

2. 암시적 작성방식

암시적 작성 방식이란 <label> 태그 안에 <input> 태그를 넣는 방식으로 for 속성을 직접 명시하지 않아도 암시적으로 라벨 태그를 연결해준다.

<label> 이름 : 
  <input id = 'name' type='text'> 
</label>