input
은 웹에서 다양한 양식의 입력을 할 수 있도록 도와주는 태그로 정말 다양하고 많은 곳에서 사용하는 태그이다. label
은 input
과 빼놓을 수 없는 친구와 같은 존재로 입력 양식을 명시적으로 연결을 한다. 여기서 label
과 input
를 연결 하는 방법은 w3c에서 정의한 두 가지 방법이 있다.
가장 대표적이고 많이 사용 되는 방법으로 input
태그에 id
속성을 작성하고 label
태그에 for
속성을 통해 연결해주는 방법.
<label for="name">이름</label>
<input type="text" id="name">
<input type="text" id="age">
<label for="age">나이</label>
id
와 for
속성을 사용하지 않고 사용할 수 있는 방법으로 label
태그 안에 input
태그를 작성하는 방법.
하지만, 이 방식으로 작성할 경우 코드가 짧아진다는 이점은 있지만, 개인적으로 label
에 의미와는 맞지 않는 생각하며 이쁜? 느낌이 없다. 하지만, w3c에서 친절하게 예제를 적어 줬기 때문에 비표준은 아니라고 생각한다.
<label>
이름
<input type="text">
</label>
그럼 여기서 한 가지 생각이 들 수 있다. 도대체 왜? label
과 input
을 명시적으로 연결을 해주어야 하는 부분인가? 사실 대부분이 알고 있는 부분이라 생각하고 바쁘다 보니 신경을 쓰지 못하는 작은 디테일 부분이라 생각한다. label
과 input
을 명시적 연결을 하게 되면 label
에 해당하는 input
영역이 선택되는 기능이 있기 때문이다.
라벨의 커서는 default 설정이 되어있다. 하지만, 우리가 흔하게 겪어 왔던 label
의 커서를 위해서는 cursor: pointer
를 적용시켜 주면 된다.
하지만, 이는 w3c
에서 보면 웹 표준에 어긋나는 비표준이라 볼 수 있다. w3c에서 작성한 문서를 확인 해보면
pointer :
The cursor is a pointer that indicates a link.
포인터 커서의 경우 link
를 뜻하는 스타일이라고 너무 딱 정해놨다. (말꼬리를 잡을 여지라도 남겨주지...)
그래서 이 문제를 어떻게 해결해야 하며 왜 그러한 정의를 내렸을까 잠깐 생각을 했지만, 아직 나는 결론이 나지 않았다.