Front-End/CSS

[CSS] Ex05_반응선택자.html

이뮨01 2023. 6. 11. 16:58

클라이언트의 행동에 반응하는 반응 선택자를 배우다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  반응 선택자: 나의 반응에 따라 생성되는 특정한 상태
            - 기호 (:)
            - 사용방법 -> 대상선택자:반응선택자
            :active -마우스로 클릭할 때 선택
            :hover -마우스를 올린 태그를 선택 */
        h2:hover{
            color: blue;
        }
        h2:active{
            color: yellow;
        }

        /*  그룹 선택자(,) */
        h2, h3{
            background-color: gray;
        }
    </style>
</head>
<body>
    <h2>이 좌석은 노약자, 임산부, 어린이만 이용가능합니다!</h2>
    <h3>입실 시, 꼭 엘리스 출석체크 해주세요.</h3>
</body>
</html>

 

결과

주의사항: 띄어쓰기 금지

저작자표시