1. label 태그란?
<label> 태그는 폼 요소에 이름표를 붙이기 위한 것입니다:)
이 이름표를 레이블이라고 하는데요. 쉽게 말하면 인풋 입력 창 앞에 있는 텍스트를 생각하시면 됩니다. 아래 그림에서는 '이름', '나이'가 되겠네요. <input> 태그를 사용하다보면 <label>태그를 쓸 일이 많은데요, 아주 쉬우니 간단하게 보겠습니다.
예시를 볼까요?
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<div>
<input type="text" id="name_id" name="name" value="김코딩">
</div>
<div>
<input type="number" id="age_id" name="age" value="25">
</div>
<br>
<span>
<input type="checkbox" name="css" value="CSS"> css
</span>
<span>
<input type="checkbox" name="html" value="HTML"> html
</span>
</form>
</body>
</html>
아래 사진처럼 label을 사용하지 않았을 때는 input태그를 정확히 클릭해줘야만 입력이 가능합니다.
1) 이번엔 이름, 나이 input태그에 <label>태그를 적용시켜보겠습니다.
짜짠~ 이름표만 클릭해도 input태그에 입력이 가능합니다.
2) 이번엔 체크박스에 <label>태그를 적용시켜보겠습니다.
짜잔~ 역시나 이름표를 클릭하기만해도 체크박스 선택/해제가 가능하네요
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<div>
<label for="name_id">이름: </label>
<input type="text" id="name_id" name="name" value="김코딩">
</div>
<div>
<label for="age_id">나이: </label>
<input type="number" id="age_id" name="age" value="25">
</div>
<br>
<label>
<span><input type="checkbox" name="css" value="CSS"> css </span>
</label>
<label>
<span><input type="checkbox" name="html" value="HTML"> html </span>
</label>
</form>
</body>
</html>
2. label 태그 사용법?
<label>태그는 다음의 두 가지 방법으로 사용할 수 있습니다.
1) 명시적 작성 방식
명시적 작성 방식은 <label>태그와 <input>태그를를 따로 사용하고 <label>태그의 for속성을 사용하여 연결해주는 방식입니다. for속성에 input태그의 id값을 넣어줍니다.
2) 암시적 작성 방식
암시적 작성 방식은 <label>태그 안에 폼 <input>태글를 넣는 방법으로 for 속성을 명시하지않아도 암시적으로 라벨태그를 연결해주는 방법입니다.
대부분은 명시적 방식을 선호하는데요, 그 이유는 좀 오래된 기기들이 암시적 방식을 지원하지 않는다고 하네요 ~ 왠만하면 for 속성을 사용해주는게 좋겠죠?
'지금, 개발하기 > CSS' 카테고리의 다른 글
| HTML/CSS] before, after 가상요소 (0) | 2023.08.08 |
|---|---|
| HTML/CSS] flex- box로 요소 배치하기2 (0) | 2021.08.22 |
| HTML/CSS] flex- box로 요소 배치하기 (0) | 2021.08.21 |
| HTML/CSS] float을 이용하여 왼쪽/오른쪽 정렬하기 (0) | 2021.08.20 |
| HTML/CSS] Position으로 요소 배치하기 (0) | 2021.08.18 |
