HTML／CSS／JS

[HTML5] 07. 반응/상태 선택자 (:hover, :active, :focus, :enabled, :disabled)

DEV장화 2022. 10. 17. 11:02

728x90

ㄱ.반응선택자

(:hover, :active)

<!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>
        h1:hover {color: red;}
        h1:active {color: blue;}
    </style>
</head>
<body>
    <h1>반응선택자</h1>
</body>
</html>

Document

반응선택자

ㄴ.상태선택자

(:focus, :enabled, :disabled)

<!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>
        input:enabled {background-color: white;}
        input:disabled {background-color: gray;}
        input:focus {background-color: orange;}
    </style>
</head>
<body>
    <h2>사용가능</h2>
    <input>
    <h2>사용불가능</h2>
    <input disabled="disabled">
</body>
</html>

Document

사용가능

사용불가능

728x90