'공부'에 해당되는 글 11건

  1. 2012.12.18 CSS 3장 } 선택자 예시 : 상태선택자 . 보이고 사라지기

CSS 3장 } 선택자 예시 : 상태선택자 . 보이고 사라지기

상태선택자와 동위선택자등을 사용하여 또다른 예를 만들어보겠습니다.

input태그를 checked 상태로 변경하면 div태그가 서서히 사라집니다. 


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS3 Selector Basic</title>
  5.     <style>
  6.         /* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,
  7. 바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */
  8.         input[type=checkbox]:checked + .cont_txt {height: 0px;}
  9.         .cont_txt {overflow: hidden; width: 650px; height: 300px;
  10.         /* 변환 효과를 적용합니다. */
  11.             -ms-transition-duration: 1s;
  12.             -webkit-transition-duration: 1s;
  13.             -moz-transition-duration: 1s;
  14.             -o-transition-duration: 1s;
  15.             transition-duration: 1s; }
  16.     </style>
  17. </head>
  18. <body>
  19.     <input type="checkbox"/>
  20.     <div class="cont_txt">
  21.         <h3>Lorem ipsum</h3>
  22.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  23.     </div>
  24. </body>
  25. </html>

저작자표시

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

CSS 2장 } 선택자 예시 : 상태선택자 . 로그인폼  (0) 2012.12.18
CSS 1장 } 선택자종류  (0) 2012.12.04
HTML5  (0) 2012.12.04
Posted by uuulike :

티스토리툴바