label 태그

Tags

HTML

Study Date

Nov 23, 2023

Status

Done

생성 일시

Nov 23, 2023 05:16 AM

Day

<label> 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용

[특징]

for 속성을 사용하여 다른 요소와 결합

<label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합 가능

일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높임

<label> 요소를 사용할 수 있는 요소

<button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>

[속성]

for : 레이블 가능한 요소의 id

user-select : 텍스트 선택 종류

[값]

auto == text : 더블클릭이나 드래그 하면 해당 텍스트 영역만 선택
none : 더블클릭, 드래그 모든게 허용x
all : 한번 클릭으로 모든 텍스트 영역이 선택

[주의사항]

label 안에 anchors 또는 buttons와 같은 인터랙티브 요소를 배치하지 않는걸 권장

<label> 내에 제목 요소(h1 등)를 배치하지 않는 것을 권장.

label의 텍스트를 시각적으로 조정해야하는 경우, <label> 요소에 CSS를 적용

[input 참고]

value 속성 : 기본값

name 속성 : id 같은 것


<label class="large-label" for="your-name">
  Your name //h3대신에 일반 텍스트, css에서 h3느낌을 내자
  <input id="your-name" name="your-name" type="text" />
</label>