[HTML+CSS] 반응 선택자 , 상태 선택자

▶ 반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자임

 

마우스를 올리면 hover가 적용, 클릭하면 active가 적용됨.

선택자 형태	설명
:active	사용자가 마우스로 클릭한 태그를 선택
:hover	사용자가 마우스를 올린 태그 선택

 

ex_반응 선택자

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

▶ 상태 선택자

 

▶ 상태 선택자는 입력 양식 상태를 선택할 때 사용하는 선택자.

 

선택자	설명
:checked	체크 상태의 input 태그를 선택
:focus	초점이 맞추어진 input 태그를 선택
:enabled	사용 가능한 input태그를 선택
:disabled	사용 불가능한 input 태그를 선택

 

ex_상태 선택자

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

ex) 상태 선택자 그리고 동위 선택자의 활용

 

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

체크박스를 체크하면 글자가 사라졌다 생겼다 함