✅ input, label의 이모저모

sjOwOw·2020년 5월 28일
0

이모저모

목록 보기
2/3

input은 웹에서 다양한 양식의 입력을 할 수 있도록 도와주는 태그로 정말 다양하고 많은 곳에서 사용하는 태그이다. labelinput과 빼놓을 수 없는 친구와 같은 존재로 입력 양식을 명시적으로 연결을 한다. 여기서 labelinput를 연결 하는 방법은 w3c에서 정의한 두 가지 방법이 있다.

  1. id, for attribute
  2. input inside label

# id, for attribute


가장 대표적이고 많이 사용 되는 방법으로 input 태그에 id 속성을 작성하고 label 태그에 for 속성을 통해 연결해주는 방법.

<label for="name">이름</label>
<input type="text" id="name">

<input type="text" id="age">
<label for="age">나이</label>

# input inside label


idfor 속성을 사용하지 않고 사용할 수 있는 방법으로 label 태그 안에 input 태그를 작성하는 방법.

하지만, 이 방식으로 작성할 경우 코드가 짧아진다는 이점은 있지만, 개인적으로 label에 의미와는 맞지 않는 생각하며 이쁜? 느낌이 없다. 하지만, w3c에서 친절하게 예제를 적어 줬기 때문에 비표준은 아니라고 생각한다.

<label>
	이름
	<input type="text">
</label>

# 왜?


그럼 여기서 한 가지 생각이 들 수 있다. 도대체 왜? labelinput을 명시적으로 연결을 해주어야 하는 부분인가? 사실 대부분이 알고 있는 부분이라 생각하고 바쁘다 보니 신경을 쓰지 못하는 작은 디테일 부분이라 생각한다. labelinput을 명시적 연결을 하게 되면 label에 해당하는 input 영역이 선택되는 기능이 있기 때문이다.

# 커서 모양


라벨의 커서는 default 설정이 되어있다. 하지만, 우리가 흔하게 겪어 왔던 label의 커서를 위해서는 cursor: pointer를 적용시켜 주면 된다.

하지만, 이는 w3c에서 보면 웹 표준에 어긋나는 비표준이라 볼 수 있다. w3c에서 작성한 문서를 확인 해보면

pointer :
The cursor is a pointer that indicates a link.

포인터 커서의 경우 link를 뜻하는 스타일이라고 너무 딱 정해놨다. (말꼬리를 잡을 여지라도 남겨주지...)

그래서 이 문제를 어떻게 해결해야 하며 왜 그러한 정의를 내렸을까 잠깐 생각을 했지만, 아직 나는 결론이 나지 않았다.

profile
소-개

0개의 댓글