html 상태 선택자

2023.12.13

스타일에서 요소를 지정하여 상태에 따라 작동을 달리 할 수 있도록 한다!

🍓 active

클릭이 유지되는 동안 작동한다.
스타일에서 해당 요소에 :active를 적어준다.

ex)

input.active:active {
    background-color: salmon;
}
<!-- 해당input 요소를 클릭하는 동안 배경색이 바뀐다. -->

🍓 focus

커서가 위치하는 동안 작동한다.
스타일에서 해당 요소에 :focus를 적어준다.

input.active:focus {
    background-color: salmon;
}
<!-- 해당input 요소에 커서가 위치하는 동안 배경색이 바뀐다. -->

🍓 hover

해당 요소에 마우스를 올리는 동안 작동한다.
스타일에서 해당 요소에 :hover를 적어준다.

input.active:hover {
    background-color: salmon;
}
<!-- 해당input 요소에 마우스가 올라가는 동안 배경색이 바뀐다. -->

🔥 한줄평
마우스나 커서를 어떻게 하냐에 따라 작동을 다르게 설정할 수 있다는게 매우 재미있다!