반응 선택자
사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자
사용자가 마우스를 특정 태그에 올리거나 클랙했을때의 상태
형태 : active : 사용자가 마우스로 클릭한 태그를 선택
형태 : hover : 사용자의 마우스가 위치한 태그를 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그</title>
<style>
h1:hover {
/* h1태그에 마우스를 올렸을 때 글자 색상을 변경 */
color: red;
cursor: pointer; /* h1태그에 마우스를 올리면 커서가 포인터로 변경 */
}
h2:active {
/* h2 태그에서 마우스로 클릭했을 때 글자 색상을 변경하고 배경 색상을 나타냄 */
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>제목1(hover)</h1>
<h2>제목2(active)</h2>
<h2>제목2(active)</h2>
<h2>제목2(active)</h2>
</body>
</html>
