[attribute] HTML - label 속성 - 요소에 대한 꼬리표 지정 (= label속성 = 레이블속성/라벨속성)

1. label 예제 - <option> 경우
2. label 정의
3. label 구문
4. label 예제 - <optgroup> 경우
5. label 예제 - <track> 경우

label 예제 - <option> 경우

 

<label for="langs">언어 선택:</label>

<select id="langs">

  <option label="HTML">HTML (구조)</option>

  <option label="CSS">CSS (디자인)</option>

  <option label="JS">JS (기능)</option>

</select>

결과보기

label 정의

 

요소에 대한 짧은 꼬리말 정보 지정.

• <option> 경우, 옵션 내용에 대한 더 짧은 문구 지정.
• <optgroup> 경우, 옵션 그룹에 대한 짧은 꼬리말 지정.
• <track> 경우, 텍스트 트랙의 제목을 지정하고 사용 가능한 텍스트 트랙을 나열할 때 브라우저에서 사용.

 

---

 

1. label 속성 사용 가능 태그 종류

<option>, <optgroup>, <track>

 

2.

주요 최신 브라우저 모두 지원.

 

label 구문

 

• <option label="text">
• <optgroup label="text">
• <track src="trackSource" kind="trackKind" srclang="langCode" label="text">

 

---

[속성값]

 

• <option> 경우, 옵션내용보다 더 짧은 옵션명 지정.
• <optgroup> 경우, 옵션그룹에 대한 꼬리말 지정.
• <label> 경우, 트랙 소스에 대한 꼬리말 지정.

 

label 예제 - <optgroup> 경우

 

<form action="/action_page.php">

  <label for="langs">언어선택:</label>

  <select name="langs" id="langs">

    <optgroup label="브라우저 언어">

      <option value="HTML">HTML</option>

      <option value="CSS">CSS</option>

      <option value="JS">JS</option>

    </optgroup>

    <optgroup label="서버 언어">

      <option value="PHP">PHP</option>

      <option value="SQL">SQL</option>

    </optgroup>

  </select>

  <br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

label 예제 - <track> 경우

 

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  <track src="movie_en.vtt" kind="subtitles" srclang="en" label="English">

  <track src="movie_ja.vtt" kind="subtitles" srclang="ja" label="Japanese">

</video>