Programming/HTML|CSS
[Programming/HTML|CSS] 동위 선택자의 활용 예시
scii
2020. 8. 10. 18:51
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* input태그의 타입인 체크박스가 체크되었을 때, 바로 뒤에 존재하는
div의 높이 값을 0으로 적용하라.
*/
input[type=checkbox]:checked + div {
height: 0;
}
div {
overflow: hidden;
width: 650px;
height: 300px;
border: 1px solid red;
transition-duration: 1s;
}
</style>
</head>
<body>
<input type="checkbox"/>
<div>
<h1>Lorem ipsum</h1>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
lorem ipsum
lorem ipsum dolor sit amet, consectetur adipiscing elit.