코딩 자율학습 HTML + CSS + 자바스크립트: 5.4.2 동적 가상 클래스 선택자

동적 가상 클래스 선택자는 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법입니다. 대표적으로 두 가지 동적 상태가 있습니다.

표 5-4 동적 가상 클래스 선택자

종류	설명
:hover	요소에 마우스를 올리면 해당 태그가 선택자로 지정됩니다.
:active	요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정됩니다.

:hover 선택자는 요소에 마우스를 올리면 해당 요소가 선택자로 지정되므로 다음 코드는 p 태그로 작성한 요소에 마우스를 올렸을 때 콘텐츠의 텍스트가 빨간색이 됩니다.

05/04/hover.html

<style>
  p:hover{
    color:red;
  }
</style>

:active 선택자는 태그를 마우스로 클릭하면 해당 태그가 선택자로 지정됩니다. 따라서 button 태그를 클릭할 때마다 button 태그의 텍스트 색상에 빨간색이 적용됩니다.

05/04/active.html

<style>
  button:active{
    color:red;
  }
</style>

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.