HTML Input Label

소개

HTML <label> 태그는 웹 페이지의 모든 HTML 요소에 캡션 또는 레이블 텍스트를 추가하는 데 사용됩니다. 이 랩에서는 HTML 에서 <label> 태그를 사용하는 방법을 배우겠습니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

Input 요소에 Label 추가하기

1. 선호하는 텍스트 편집기에서 index.html 파일을 엽니다.
2. 레이블이 있는 입력 요소를 생성하기 위해 다음 코드를 추가합니다.

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

3. label 요소의 for 속성은 연결된 입력 요소의 id 속성과 일치해야 합니다.

Label 요소를 사용하여 클릭 가능한 영역 만들기

1. 선호하는 텍스트 편집기에서 index.html 파일을 엽니다.
2. 입력 주변에 클릭 가능한 영역을 생성하기 위해 다음 코드를 추가합니다.

<label>
  <input type="checkbox" />
  여기를 클릭하여 선택하세요
</label>

3. 이제 "여기를 클릭하여 선택하세요" 텍스트를 클릭하면 체크박스가 선택됩니다.

Label 을 Form 요소와 연결하기

1. 선호하는 텍스트 편집기에서 index.html 파일을 엽니다.
2. 레이블이 있는 폼 요소를 생성하기 위해 다음 코드를 추가합니다.

<form action="/" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="제출" />
</form>

3. label 요소의 for 속성은 연결된 폼 요소의 id 속성과 일치해야 합니다.

Label 스타일 지정하기

1. 선호하는 텍스트 편집기에서 index.html 파일을 엽니다.
2. CSS 클래스가 있는 label 요소를 생성하기 위해 다음 코드를 추가합니다.

<label class="large-label" for="name">이름:</label>
<input type="text" id="name" name="name" />

3. label 의 스타일을 지정하기 위해 스타일시트에 다음 CSS 를 추가합니다.

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Label 요소를 사용하여 접근성 향상시키기

1. 선호하는 텍스트 편집기에서 index.html 파일을 엽니다.
2. 스크린 리더 접근성을 위해 label 이 있는 input 요소를 생성하기 위해 다음 코드를 추가합니다.

<label for="name">이름:</label>
<input type="text" id="name" name="name" aria-label="이름을 입력하세요" />

3. aria-label 속성은 스크린 리더에서 접근 가능한 input 요소에 대한 텍스트 레이블을 제공합니다.

요약

이 랩에서는 HTML <label> 태그를 사용하여 웹 페이지의 HTML 요소에 캡션 또는 레이블 텍스트를 추가하는 방법을 배웠습니다. <label> 태그는 접근성을 향상시키고 요소의 클릭 가능한 영역을 늘리는 데 유용합니다. 또한 레이블을 폼 요소와 연결하고 CSS 를 사용하여 레이블의 스타일을 지정하는 방법도 배웠습니다.