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>
반응선택자
ㄴ.상태선택자
(: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>
사용가능
사용불가능
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [HTML5] 09. 가시속성 display (none,block,inline,inline-block) (0) | 2022.10.17 |
|---|---|
| [HTML5] 08. 박스속성 (margin, padding) (0) | 2022.10.17 |
| [HTML5] 06. div, span, 시맨틱태그 (0) | 2022.10.17 |
| [HTML5] 05. 입력 양식 태그 (input,label,select,multiple,optgroup) (0) | 2022.10.14 |
| [HTML5] 04.미디어 태그 (img,src,audio,video) (0) | 2022.10.13 |
