States
📌 States
① active : 마우스가 클릭할 때.
② focus : 선택되었을 때.
③ focus-within : focused인 자식을 가진 부모 엘리먼트에 적용됨.
④ hover : 마우스가 대상 위에 있을 때.
⑤ visited : 방문한 상태인 경우.(링크에만 적용.)
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
body {
height: 100vh;
margin: 20px;
}
button:active {
background-color: tomato;
}
button:hover {
background-color: lightskyblue;
}
button:focus {
background-color: orange;
}
a:visited {
color: brown;
}
form {
border: 3px solid black;
display: flex;
flex-direction: column;
padding: 20px;
}
form:focus-within {
border-color: red;
}
form:hover input {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>
<button>button1</button>
<button>button2</button>
</div>
<a href="https://naver.com">Go Naver</a>
<form>
<input type="text" name="" id="" />
</form>
</body>
</html>
+ 추가 설명
button:active {
background-color: tomato; → button 클릭하면 배경색 변함.
}
button:hover {
background-color: lightskyblue; → button 위에 마우스 커서가 올라가면 배경색 변함.
}
button:focus {
background-color: orange; → button이 선택되면 배경색 변함.
}
a:visited {
color: brown; → 링크를 클릭해 사이트에 방문하면 글자색이 변함.
}
form {
border: 3px solid black;
display: flex;
flex-direction: column;
padding: 20px;
}
form:focus-within {
border-color: red; → form의 자식 요소인 input이 선택되면 form의 경계선 색이 변함.
}
form:hover input {
background-color: lightskyblue; → form 위에 마우스 커서가 올라가면 input 배경색이 변함.
}
'CSS' 카테고리의 다른 글
| [CSS] custom property (0) | 2022.09.15 |
|---|---|
| [CSS] Pseudo Element (0) | 2022.09.15 |
| [CSS] Pseudo Selectors (0) | 2022.09.14 |
| [CSS] position (0) | 2022.09.14 |
| [CSS] Flexbox (0) | 2022.09.14 |
댓글