주요 태그_6
주요 태그 6
오랫동안 사용돼온 태그나 사용빈도가 높은 태그들을 정리한다.
텍스트 역할
<html>
<head>
</head>
<body>
<p>아이디 <input type="text" name="id" value="default value"></p>
<p>비밀번호 <input type="password" name="pwd" value="default value"></p>
</body>
<html>
아이디
비밀번호
이렇게 만들어진 ‘아이디 :’ 라는 텍스트는 사람이 볼 때는 옆의 필드가 무엇인지를 나타내는 역할을 할 수 도 있지만 컴퓨터가 볼 때는 역할이 불분명한 상태의 텍스트이다.
label은 이름표를 만들어주는 태그로 위의 역할이 불분명한 텍스트의 역할을 명시적으로 지정해준다. html에서도 이렇게 label로 지정하는걸 권장한다.
label
<html>
<head>
</head>
<body>
<p>
<label for="id_txt">아이디 </label>
<input id="id_txt" type="text" name="id" value="default value"></p>
<p>
<label>비밀번호 </label>
<input type="password" name="pwd" value="default value"></p>
</body>
<html>
표시상으로는 차이가 없어보이지만 label을 지정한 아이디 텍스트를 눌렀을 때는 입력 필드가 활성화 된다.
하지만 label을 지정하지 않은 비밀번호 텍스트를 눌렀을 때는 반응하지 않는 차이가 있다는걸 알 수 있다.
<label> ~ </label>
이름표를 지정할 텍스트 영역을 정하는 태그이다.
태그 단독으로 존재할 때는 의미가 없고 어떤것의 이름표인지 명시적으로 지정해 주어야한다.
-
for 속성
label태그의 for 속성으로 이름표의 대상 id 값을 가져와서 지정해주면된다.
따라서 대상에서 id 속성의 값을 먼저 할당한 다음 그 id를 가져와서 사용한다.
<label for="id_txt" ~> <input id="id_txt" ~>
따로 id를 할당하지 않고 전체를 label 태그로 감싸도 동일하게 동작하므로 상황에 맞춰서 사용하면된다.
<p>
<label>아이디
<input id="id_txt" type="text" name="id" value="default value">
</label>
</p>
활용
label은 다양한 활용법 중에서 앞에서 했던 체크박스에 적용시켜본다.
<html>
<head>
</head>
<body>
<p>
<label>
<input type="checkbox" name="color" value="red">붉은색
</label>
<br>
<label>
<input type="checkbox" name="color" value="black">검은색
</label>
<br>
<label>
<input type="checkbox" name="color" value="blue">파란색
</label>
<br>
</p>
</body>
</html>
체크박스는 크기가 작아서 클릭하기가 어려운데 label을 사용해서 텍스트와 묶어주면 텍스트를 클릭해도 체크가 되도록 만들 수 있다.