<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
position:relatvie;
width:400px;
height:400px;
background:yellow; overflow:hidden;
}
/*체크를 하면 바로 형제div태그는 보드랍게 2초동안 높이가 0이 되고
따라서 div태그가 차지하고 있었던 부분은 사라진다.
그리고 img태그는 position:static;의 위치를 찾아간다.
*/
input:checked+div{
/*display:none;
visibility:hidden;*/
height:0px;
/*변환속도 설정*/
transition-duration:2s;
}
</style>
</head>
<body>
<input type="checkbox" />
<div>
<img src="../img/swisda.jpg" />
<img src="../img/SeoulLogo.jpg" />
</div>
<img src="../img/jeju.png" />
</body>
</html>
체크 전
체크 후
풀스택eDot