Front-End/CSS

[CSS] Ex09_none.html

이뮨01 2023. 6. 11. 23:42

display 속성의 값 중 하나인 none을 배우다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #answer{
            display: none;
            
        }
        /* 
        1. id가 question인 요소 위에 마우스를 올리면
            => #question:hover
        2. 옆에 있는 id가 answer인 요소가 보이도록
            => +#answer
        */
        #question:hover+#answer{
            display:inline;
        }
    </style>
</head>
<body>
    <h3>Quiz!</h3>
    <span id="question">Q. 여러분은 비오는 거 좋아하시나요?</span>
    <span id="answer">A. 아뇨.</span>
</body>
</html>

결과

요소를 안 보이게 하는 none.

저작자표시