HTML label
■ label 태그는 폼 요소에 캡션을 붙이는 역할을 하는데요. 폼 요소는 텍스트와 짝을 이루어서 사용하는 경우가 대부분이잖아요. 예를 들어 아래와 같은 경우입니다.
■ 이름을 입력하라는 텍스트와 input 태그를 사용하고 있는 형태인데요. 이 둘을 하나로 묶어주는 역할을 하는 게 label이라고 생각하면 됩니다. label 태그를 사용한다고 해서 시작적으로 바뀌는 건 없습니다. 그런데 왜 사용할까요? 가장 큰 이유는 시작장애인들의 웹 접근성을 위해서 인데요. lable 태그를 이용하면 tab 키를 이용해서 이 입력란으로 이동하면 이곳이 "이름을 입력하세요"라는 텍스트와 함께 묶여있는 걸 알려주고, 이곳이 이름 입력하는 곳이구나 라는걸 알 수 있게 됩니다.
■ 그리고 라디오 버튼이나 체크박스 등의 요소와 텍스트가 함께 사용되는 경우 이렇게 label로 묶어주면 텍스트 부분을 클릭해서 라디오나 체크박스가 선택돼서 편리하기 때문에 사용하는 게 좋습니다.
이 label 태그를 사용하는 방법은 두 가지가 있는데요.
■ 첫 번째 방법은 묶어줄 텍스트와 input 요소를 label 태그로 묶어주는 방법이고요. 두 번째 방법은 for속성과 id 속성을 이용해서 연결하는 방법인데요. label의 for 속성값에 가리킬 id의 값을 넣어주면 됩니다. 이 방법은 id를 가리키기만 되기 때문에 두 요소가 멀리 떨어져 있어도 label로 묶을 수 있습니다.
■ 이렇게 해서 lable 태그를 사용하는 방법을 알아봤는데요. 브라우저에서 보여지는 건 똑같지만, 시각장애인의 웹 접근성을 위해서도 꼭 필요하고 '라디오버튼'이나 '체크박스'를 선택하기 위해서는 작은 선택란을 클릭해야 하는 불편함이 있잖아요. 이렇게 label로 묶으면 박스 버튼이나 박스 옆에 있는 텍스트를 대충 클릭해도 선택되기 때문에 정말 유용하게 사용할 수 있는 기능입니다. 꼭 사용해보세요.수고하셨어요.
