코드 조각-Android, Java, Spring, JavaScript, C#, C, C++, PHP, HTML, CSS, Delphi

CSS에서 가상 클래스(pseudo class)를 이용하여 링크에 마우스 동작 감지하는 법

웹 사이트의 링크에 마우스를 올리면 링크에 밑줄이 그어지면서 링크의 색상이 바뀌거나 혹은 이미 방문했던 링크는 다른 색상으로 변경되어 있어 사용자로 하여금 방문했던 곳인줄 인지하게 하는 기능이 있다. 이러한 기능은 아래의 가상 클래스(pseudo class)들을 이용해서 기능을 구현할 수 있다.

아래 가상 클래스들은 링크 뿐만아니라 버튼, input 컨트롤 등에도 적용이 가능하다.

:link

⇒ 아직 방문하지 않은 링크에 대해 스타일(색상, 글자 모양, 밑줄 등)을 지정하는 기능

:visited

⇒ 이미 방문했던 링크에 대해 스타일을 지정하는 기능

:hover

⇒ 사용자가 링크에 마우스를 올릴 때 다른 형태의 스타일을 갖도록 지정하는 기능

:activity

⇒ 링크가 현재 시점에서 활성화(activated)되고 있는 상태일때 스타일 지정하는 기능.

예를 들어서 버튼의 경우 눌려져 있는 시점, 링크의 경우는 마우스가 클릭되어 있는 시점을 의미한다. 짧은 순간 마우스를 눌렀다 떼기 때문에 스타일의 변화가 순간적으로 나타나지만 마우스를 롱 클릭해 보면 알수 있다.

:focus

⇒ element가 focus을 얻었을 때 스타일을 지정할수 있다.

focus란 입력 박스(input box)에 내용을 입력하기 위해 커서가 위치해 있을 때 입력 박스가 focus를 가진 상태이다. 혹은 키보드의 탭 키를 누를 때 focus가 이동하는데 이러한 방식으로도 element들이 focus를 가질수 있다. 

이렇게 focus를 가졌을 때 스타일을 지정할 수 있다.

가상 클래스를 사용할 때는 반드시 다음과 같은 순서로 CSS를 작성해야 한다.

:link → :visited → :hover → :focus → :active

아래는 CSS 코드 조각이다.

a:link {

color: deeppink;

text-decoration: none;}

a:visited {

color: black;}

a:hover {

color: deeppink;

text-decoration: underline;}

a:active {

color: darkcyan;}