상태 선택자와 동위 선택자의 복합 활용

imjingu·2023년 7월 4일

개발공부

목록 보기

30/481

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>태그</title>
    <style>
        /* 상태 선택자와 동위 선택자의 복합 활용 */
        /* input 태그의 type 속성값이 checkbox인 태그가 체크 되었을 때
        바로 뒤에 위치하는 div 태그의 height 속성에 0픽셀을 적용 */
        input[type=checkbox]:checked + div {
            height : 0px
        }

        div {
            overflow: hidden; /* 박스의 높이만큼만 보이도록 함 */
            width: 650px;
            height: 300px;
            background-color: yellow;
        }
        /* 화면로딩시에는 약관에 동의하셨습니다. 가 나오지 않고
        체크박스 클릭시에 나오도록 할 것. */

        span {
            display: none;
        }

        input[type=checkbox]:checked ~ span { /* 체크되었을 때 span태그를 찾아서 화면을 나타냄 */
            display: inline;
        }

    </style>
</head>
<body>
    <input type="checkbox" />
    <div>
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates itaque temporibus, consectetur minima nihil quam, maiores repellat illum facilis quae incidunt quis ab, nulla possimus eligendi! Alias nam error voluptas!
        </p>
    </div>
    <span>약관에 동의 하셨습니다.</span>
</body>
</html>

imjingu

이전 포스트

형태구조 선택자 - a:nth-of-type(n)

다음 포스트

상태 선택자와 동위 선택자의 복합 활용

개발공부

형태구조 선택자 - a:nth-of-type(n)

가상 요소 선택자

0개의 댓글