[47-8 HTML] 수도 클래스, 의사 클래스, pseudo class, :hover

의사클래스 pseudo class에 대해 알아보자.

 

HTML CSS reference에서 keyword 모음을 보면, 

어떤 키워드는 앞에 ' : '  쌍점이 있다. 

이것이 바로 의사 클래스이다.

의사 클래스는  마우스를 가져다 놓은 상태와 아닌 상태에 따라

CSS가 변하는데,

이는 HTML 요소의 '다른 상태'를 보여준다.

 

 

 

 

예시로서

어떤 HTML 요소에 대해 :hover 의사 클래스를 선택하여, 

그 요소의 스타일이 변경되도록 만들어보자.

 

css파일에서 img 태그에 hover 의사 클래스를 적용한다. 

img:hover {
  background-color: red;
}

원래는 아래처럼 배경색깔이 검정색이었지만,

마우스를 가져다대면, 배경색깔이 빨강색으로 바뀌는 것을 알 수 있다.