클릭을 좀더 편하게 - label

Post infomation : Web standards/Tip | 2006/12/05 23:13
Tag :
일반적으로 체크박스에 체크(?)를 하기 위해서는 체크박스를 클릭해야 합니다. 하지만 그 영역이 너무 작고, 성질급한 저같은 사람에겐 속터지는 일이지요... 체크박스와 연관되어 있는 텍스트에까지 클릭의 영역을 지정하고 싶을 경우를 위한 태그가 있습니다. 바로 <label>이라는 것인데... 아는 사람은 다 알지만 필요성을 느끼지 못해 사용하지 않는 경우가 있습니다. 그런데 예를 들어서
 


이럴경우는... 일일이 체크하려면 눈이 빠지고, 손가락 후달립니다... 게다가 글작성시마다... 카테고리를 분류하기 위해 빈번하게 체크가 일어날 경우라면 여간 짜증나는 일이 아닐 수가 없겠죠..
이럴때 작은 배려가 큰 감동이 될수 있다나요.. ㅋㅋㅋ 방법은 간단합니다. 체크박스와 텍스트를 연결 시켜주는 label을 사용하면 됩니다.


<input type="checkbox" name="check" id="email_save" />
<label for="email_save">
이메일 저장</label>

여기서 중요한것은 체크박스의 id값입니다. 모 굳이 얘기 하자면 email_save라는 아이디값을 가진 체크박스를 위한 레이블!.. 정도로 해석이 되겠지요.. 영작문 해석하는것 같군요.. ^^;;

이것은 클릭할 수 있는 영역이 넓어져 사용자 편의를 위한것도 있지만, 레이블과 폼의ID 관계를 정의해 주어 스크린리더가 각 폼에 해당하는 레이블을 올바르게 읽어주게 하는 아주 중요한 태그입니다. 게다가 마크업에 한발 다가서는 태그기도 하구요..

이렇게 하면 코드가 한결 깔끔해 지겠지요.. ^ ^v
2006/12/05 23:13 2006/12/05 23:13

트랙백을 보내세요

Trackback address :: http://www.plyfly.net/trackback/2630041
  1. 리체님. 폰트 색깔 변경은 어디서 합니까?

    Tracked from 산, Trekking 2006/12/14 12:36

    기본스킨을 사용하고 있습니다.스킨이 변경가능하니 좋습니다.그런데 사용하면서 의문 사항이 있서질문드릴께요.여기 보면 글씨 색깔 디폴트 값이 검정이 아닌 것 같습니다.지금 보시는 폰트

Comments

  1. 겐도 2006/12/06 00:53

    html 4.01 문서에서 explicit association 케이스가 위에 해당하죠. 여러개의 label이 한 control과 바인딩 될 수 있습니다. 더불어 implicit association case도 볼만하죠. label이 input태그를 감싸는 경우입니다.
    이런 작업은 비단 클릭 뿐 아니라 HTML 스펙 문서의 예제에 따르면 AccessKey 장난을 할때도 사용될 수 있죠.

  2. 樂天主意 2006/12/06 10:52

    라벨테크 ASP.NET으로 개발하면 저절로 되는 부분이죠ㅋㅋ

  3. 2006/12/07 17:09

    님 안녕 하세요.
    님의 스킨을 사용하고 있는 사람인데요.
    여기좀 클릭해줘 보시면 제질문이 무엇인지 알수있으실거에요.답변좀해주세요.
    http://blogfile.paran.com/BLOG_341049/200612/1165478504_206.jpg

    제가 캡쳐해서 올린 TAGE 에 텍스트 크기가 너무커구 텍스트 색깔이 파란색여서 다른칼라로 바꿔주고싶은데...style.css .....어디 어느부분에서 만져줘야 합니까?

    여비 보여지는것은 굴림체 같은데..본문 게시물에 사용되는 반듯한 모양의 폰트가 저는 참 이쁜데...돋움체입니까? 아님 무슨체입니까?


    답변좀 부탁 드립니다.^^

    style.css

    • leezche 2006/12/08 11:09

      style.css의 cloud라는 클래스명을 검색하시면됩니다.
      cloud1~cloud5까지 설정해 주시면 됩니다.. ^^;;; 폰트명도 함께 바꿔주시면 됩니다.

  4. 함장 2006/12/11 16:05

    호호호, 영작문 해석하는 방법이 그래도 저 같은 일반인이 알아듣기엔 가장 편해요 -0-)v

비밀글 (Secret)
댓글 달기 (Submit)