Selectors (4) - 동적 가상 클래스 선택자 (User Action Psuedo-classes)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

📝 메모

---

User Action Pseudo-classes

: 사용자의 action에 따라 style을 바꾸고 싶을 때

:hover, :active, :focus

 

 

:hover

마우스 커서를 element위에 가져다 댔을 때, 

그 element 위에서 마우스 커서가 왔다 갔다 할 때

 

 

:active

마우스로 클릭하는 그 찰나의 순간에 style을 변화시키고 싶을 때

 

 

:focus

마우스가 그 element를 클릭해서

그 element가 focus되어있는 상태일 때 style을 주고 싶으면 :focus

 

 

 

 

button, a, input이 사용자와의 interaction이 많아서 저 가상 클래스들을 많이 사용했었다.