'기술,예술,사람'에 해당되는 글 11건

  1. 2012.12.18 CSS 2장 } 선택자 예시 : 상태선택자 . 로그인폼

CSS 2장 } 선택자 예시 : 상태선택자 . 로그인폼

앞서서, 많은 선택자에 대해서 알아보았습니다. 

이러한 선택자를 어떻게 사용하는지 예시를 살펴보도록 하겠습니다


반응 선택자

반응 선택자에는 :active와 :hover가 있습니니다. :hover는 마우스 롤오버시, :active는 클릭시 반응합니다

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS3 Selector Basic</title>
  5.     <style>
  6.         /* h1 태그에 마우스를 올릴 경우에 color 속성에 red 키워드를 적용합니다. */
  7.          h1:hover { background-color: red; color:#fff}        
  8.         /* h1 태그를 마우스로 클릭할 때에  color 속성에 blue 키워드를 적용합니다. */
  9.           h1:active { background-color: #fff;  color: blue; }     
  10.     </style>
  11. </head>
  12. <body>
  13.     <h1>User Action Selector</h1>
  14.     <h1>User Action Selector</h1>
  15. </body>
  16. </html>

확인해 보시면, 마우스를 올릴 경우 바탕이 빨간색이고 하얀 글씨가 보이는 것을 알 수 있습니다. 



상태선택자

상태선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자 입니다

 선택자 형태

  설명

 :checked

  체크 상태의 input  태그를 선택합니다

 :focus

 초점이 맞춰진 input 태그를 선택합니다

 :enabled

 사용 가능한 input태그를 선택합니다
 :disabled

 사용 불가능한 input태그를 선택합니다


아래와 같은 입력 폼을 만들어 보겠습니다. 

자료는 daum사이트를 참조하였고, 선택자 사용을 응용해 보기 위한 실험으로 마크업은 다소 다를 수 있습니다. 


먼저 사이트에서는 스프라이트 기법을사용하였고, 이미지는 아래와 같이 첨부되어있습니다.

이중에서 마크업에 사용된 이미지들만 따로 표기를 하였습니다. 

스프라이트 이미지는 이미지를 여러개 뭉쳐놓은 것으로 이미지를 한개의 파일에 뭉쳐놓으면 웹 페이지 요청시간을 줄일 수 있습니다

수작업으로 만들수도 있고, 프로그램을 사용할 수도 있습니다. http://csssprites.com을 참조하시면 프로그램을 구할 수 있습니다



  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. /*reset*/
  8. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,p,button{margin:0;padding:0}
  9. body,h1,h2,h3,h4,th,td,input{color:#333;font-family:"돋움",dotum,sans-serif;
  10.         font-size:12px;font-weight:normal}
  11. body{background:#eee;direction:ltr;text-align:center}
  12. hr{display:none}
  13. img,fieldset{border:0}
  14. ul,ol,li{list-style:none}
  15. img,input,select,textarea{vertical-align:middle}
  16. .hide{display:block;position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;line-height:0;
  17.        overflow:hidden;font-size:0;text-indent:-9999px}
  19. /*login form*/
  20.         /* 아이디라는 글자이미지를 배경에 깔고, focus 했을때는 하얀색 배경으로 나오도록 :focus 선택자를 사용하였습니다* /
  21. #loginForm {position:absolute;top:10px;left:10px;width:280px;height:105px;
  22.          background:url(http://i1.daumcdn.net/deco/top/2012/bg_v07.png) no-repeat 0 -200px} → ① 
  23. #id {position:absolute;top:16px;left:17px;width:140px;height:22px;line-height:25px;padding-left:5px;
  24.          border:none;background:#fff url(http://i1.daumcdn.net/deco/top/2012/dec_v06.png) no-repeat -90px 8px}→② 
  25. #id:focus {background:#fff}
  26. #inputPwd {position:absolute;top:43px;left:17px;width:140px;height:22px;line-height:24px;
  27.          padding-left:5px;border:none;
  28.          background:#fff url(http://i1.daumcdn.net/deco/top/2012/dec_v06.png) no-repeat -90px -43px} → ③
  29. #inputPwd:focus {background:#fff}
  30. #loginSubmit{float:right;width:51px;height:55px;margin:15px 57px 0 0;border:none;
  31.         background:#fff url(http://i1.daumcdn.net/deco/top/2012/dec_v06.png) no-repeat 0 -50px;cursor:pointer}
  32. #sid {position:absolute;bottom:12px;left:15px;width:13px;height:13px;line-height:13px;margin:0;padding:0}
  33. #loginForm .lbSid{position:absolute;bottom:13px;left:33px;height:11px;line-height:13px;
  34.         color:#6d7078;font-size:11px;letter-spacing:-1px}
  35. #loginForm .user{position:absolute;bottom:10px;left:79px}
  36. #loginForm .user_li{float:left;line-height:15px}
  37. #loginForm .join {font-weight:bold}
  38. #loginForm .find {padding-left:16px}
  39. #loginForm .join_a {color:#434a55;font-size:11px;letter-spacing:-1px}
  40. #loginForm .find_a {color:#74787f;font-size:11px;letter-spacing:-1px}
  41. #loginForm .setting{position:absolute;top:15px;right:19px;width:23px;height:60px}
  42. #currentLevel{display:block;width:23px;height:14px;
  43.          background:url(http://i1.daumcdn.net/deco/top/2012/dec_v06.png) no-repeat -200px -100px;
  44.         font-size:0;text-indent:-9999px}
  45. #radios {position:absolute;top:14px;left:0;width:23px;height:43px}
  46. #radios label{float:left;width:23px;height:13px;
  47.         background:url(http://i1.daumcdn.net/deco/top/2012/dec_v06.png) no-repeat -123px -350px;
  48.         font-size:0;text-indent:-9999px;cursor:pointer}
  49.         /* 라디오버튼 을 체크했을때 라벨 값의 배경이 바뀌게 :checked 선택자를 사용하고 
  50.             동위선택자 ~을 사용하여 check되었을때 이미지가 변하게 됩니다* /
  51. #radios #lbSecurityLevel1{background-position:-100px -350px}
  52. #radios #securityLevel1:checked ~ label:nth-of-type(1){height:14px;background-position:-123px -350px}
  53. #radios #lbSecurityLevel2{background-position:-100px -363px}
  54. #radios #securityLevel2:checked ~ label:nth-of-type(2) {height:14px;background-position:-123px -363px}
  55. #radios #lbSecurityLevel3{height:14px;background-position:-100px -376px}
  56. #radios #securityLevel3:checked ~ label:nth-of-type(3){height:14px;background-position:-123px -376px}
  57. </style>
  58. </head>
  59. <body>

  61. <h2 class="hide">로그인</h2>
  62. <form autocomplete="off" action="" method="post" name="loginform" id="loginForm">
  63. <legend class="hide">로그인 폼</legend>
  64.         <label for="id" class="hide">아이디</label>
  65. <input type="text" id="id" title="아이디 입력" maxlength="50" name="id">
  66. <label for="inputPwd" class="hide">비밀번호</label>
  67. <input type="password" id="inputPwd" title="비밀번호 입력" maxlength="32" name="pw" >
  68. <input id="sid" type="checkbox" title="아이디 저장" name="saved_id">
  69.          <label class="lbSid" for="sid">ID저장</label>
  70. <button type="submit" title="로그인" id="loginSubmit"><span class="hide">로그인</span></button>
  71. <ul class="user">
  72. <li class="user_li join"><a href="" class="join_a">회원가입</a></li>
  73. <li class="user_li find"><a href="" class="join_a">아이디</a> 
  74.                 <a href="" class="find_a">비밀번호 찾기</a></li>
  75. </ul>
  76. <p class="setting">
  77. <a class="currentLevel2" href="" id="currentLevel" title="로그인 보안설정 자세히보기">보안2단계</a>
  78. <span id="radios">
  79. <input value="1" name="securityLevel" id="securityLevel1" class="hide" type="radio"> 
  80.         <label id="lbSecurityLevel1" for="securityLevel1">보안1단계</label>
  81. <input value="2" name="securityLevel" id="securityLevel2" class="hide" type="radio" checked="checked"> 
  82.         <label id="lbSecurityLevel2" for="securityLevel2">보안2단계</label>
  83. <input value="3" name="securityLevel" id="securityLevel3" class="hide" type="radio"> 
  84.         <label id="lbSecurityLevel3" for="securityLevel3">보안3단계</label>
  85. </span>
  86. </p>
  87. </fieldset>
  88. </form>
  90. </body>
  91. </html>



 

저작자표시

'공부 > CSS' 카테고리의 다른 글

CSS 3장 } 선택자 예시 : 상태선택자 . 보이고 사라지기  (0) 2012.12.18
CSS 1장 } 선택자종류  (0) 2012.12.04
HTML5  (0) 2012.12.04
Posted by uuulike :

티스토리툴바