[CSS] 체크박스 누르면 사라지는 효과

<style>

        /* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,

            바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */

        input[type=checkbox]:checked + div {

            height: 0px;

        }

 

        div {

            overflow: hidden;

            width: 650px; height: 300px;

 

            /* 변환 효과를 적용합니다. */

            -ms-transition-duration: 1s;

            -webkit-transition-duration: 1s;

            -moz-transition-duration: 1s;

            -o-transition-duration: 1s;

            transition-duration: 1s;

        }

    </style>