[HTML] label 태그 사용하기

안녕하세요 냥장판 입니다 

아주 오랜만에 포스팅하네요 😥(그동안 너무 바빠서 포스팅을 게을리했네요..)

이번 게시글에서는 label 태그에 대해서 알아보려고 합니다.

By 냥장판

1. label 태그란

label 태그는 인터페이스 요소에 이름을 명시하고 싶을때 사용해요.

이름을 명시하고 싶다는 말이 label을 단다는 말과 동일하다고 보면됩니다.

 

By 냥장판

textarea, button, checkbox 인터페이스에 사용할 수 있어요!

 

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

2. label 사용방법

label은 input 태그와 주로 같이 사용해요.

type에는 사용할 인터페이스를 넣어주면 되요

By 냥장판

 

label을 input 태그와 연관시키려면, input 에 id 속성을 넣어야합니다.

그런 다음 label에 id 와 같은 값의  for 속성을 넣어야합니다. 

 

By 냥장판

아래 처럼 만들어 보죠.

 

인터페이스는 체크박스이고,

label 에 for와 input에 id를 맞춰요.

 

결과는 아래와 같죠.

각 라벨에 텍스트를 클릭해도 checkbox가 선택되는 것을 확인할 수 있어요

 

 

그럼 이만!