선택자_가상 클래스(1)

가상클래스 선택자 (Pseudo-Classes)

가상클래스 선택자: 사용자가 어떠한 행동을 했을 때 요소가 동작하게 하는 선택자

•  가상 클래스 선택자 기호는 : (콜론)

:hover

:hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 

 

코드펜 예제 

 

See the Pen 선택자_가상클래스1 by 김선미 (@tjsalsun) on CodePen.

 

:active

:active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택 

 

코드펜 예제 

 

See the Pen 선택자_가상클래스2 by 김선미 (@tjsalsun) on CodePen.

 

:focus

 

:focus : 선택 요소가 포커스 되면 선택 

• focus가 될 수 있는 요소는 html 대화형 콘텐츠에 해당(input, a, button, label, select) 아니더라도 적용되게 하는 속성 tabindex를 사용하면  focus 적용가능 (tabindex는 대화형 콘텐츠에 따로 줄필요 없음)

코드펜 예시

 

See the Pen 선택자_가상클래스3 by 김선미 (@tjsalsun) on CodePen.

---

TIL

keypoint

가상 클래스는 사용자가 어떠한 행동을 했을때 선택 된 요소가 동작하는 것이다

tabindex는 대화형 콘텐츠에 주지말자

 

느낀 점

js에서만 아니라 css에서도 동작을 줄수 있다 

 

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐