1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> /* 자바스크립트 click이벤트 없이 CSS만으로 toggle 구현하기 */ input { /* 체크박스를 버튼으로 사용하기 위해 숨긴다. */ position:fixed; left:-9999px; } #box { width: 20px; height: 100px; background: skyblue; } :checked ~ #box { /* 일반 형제 선택 */ width:250px !important; } .transition { /* 크기 애니메이션 적용 */ transition: width 0.1s ease-in-out; } </style> </head> <body> <div id="wrapper"> <input type="checkbox" id="toggleBtn" /> <label for="toggleBtn"> toggleBtn </label> <div id="box" class="transition"></div> </div> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] animation (0) | 2016.08.31 |
|---|---|
| [CSS] 테이블 상단 고정 스크롤 - fixed table header (2) | 2016.08.12 |
| [CSS] nth-child (n번째 부터 n번째 까지 css적용) (3) | 2016.07.05 |
| [CSS] 2단 레이아웃 화면 100% 유지 (0) | 2016.07.04 |
| [CSS] block 요소의 width값을 미리 알 수 없을 때 가운데 정렬 (0) | 2016.06.30 |
