MR 홈페이지를 만들다가, 로그인이 안 되는 문제가 발생하여 선배들과 잠시 홈페이지 테스트를 한 적이 있다. 그때, 어느 분이, 암호 입력창 아래에 "auto" 글자와 체크박스가 있는데도, 자동 로그인 기능을 어떻게 쓰는 것이냐라고 물어봤었다.

이 문제를 해결하기 위해, 체크박스의 조그마한 영역을 누르지 않아도 되는 label 태그를 사용했는데, 겉보기에는 아무런 티가 나지 않고 마우스를 가져다 대어도 손모양 표시가 안 되기 때문에 클릭할 수 있는지 알기가 어려웠다. 그리고 단순히 auto라고만 써 있어서 이게 정확이 무엇을 자동으로 하는 건지 딱 와닿지 않았다. (로그인 창에 있긴 하지만)

그래서, label 태그에 cursor:pointer 스타일을 적용하고(cursor:hand로 쓰는 경우가 많은데, 이름은 더 직관적이긴 해도 이것은 IE에서만 되는 잘못된 방법이다), title 속성을 넣어서 마우스를 가져가면 손모양으로 변하고 툴팁으로 "자동 로그인"이라는 메시지가 뜨게 했다.

그런데, IE와 Firefox가 다르게 동작했다. 마우스 포인터는 똑같이 동작하는데, 툴팁 뜨는 내용이 달랐다. 왜 그런가 했더니, Firefox는 label 속에 img 태그가 있고 거기에 alt 속성이 있더라도 label 태그의 title 속성을 보여주지만, IE는 label 태그의 title 속성 대신 img 태그의 alt 속성을 보여주었던 것이다.

이런 경우 alt 속성이 없으면(표준 때문에 alt 속성을 넣더라도, 단순히 글자를 표시하기 위한 이미지인 경우 해당 글자 내용만 넣거나 null로 두는 경우가 있다) 툴팁이 안 뜬다는 게 문제다. 하지만 IE가 좋았던 점은, label 태그의 영역에 마우스를 가져가면, 체크박스에 mouse hover 처리가 되어서 테두리가 표시된다. (XP 테마를 쓰는 분들은 알 것이다) 정말 일반 윈도우의 체크박스를 사용할 때처럼 말이다. 반면 Firefox는 클릭하면 기능은 동작하지만 mouse hover는 인식하지 못한다.

Firefox처럼 title 속성을 띄워 주고, IE처럼 mouse hover를 인식하도록 label 태그가 동작한다면 더할 나위 없을 것이다.

테스트 :