[css3] 가상 클래스 - :link , :visited , :hover , :active , :focus

1. 개념

가상 클래스 - :link , :visited , :hover , :active , :focus

어떠한 요소를 클릭하거나 마우스 커서를 올리거나 내리기와 같이 특정한 동작이 이루어질 때 스타일이 바뀌도록 만들어 주는 것을 가상 클래스라고 함
그 중에서 자주 사용되는 가상 클래스는 :link , :visited , :hover , :active , :focus 이러한 것들이 있음

2. 태그

가상 클래스

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > 1 a:link { background : yellow ; } 2 a:visited { background : red ; color : white ; } 3 a:hover, a:focus { background : blue ; color : white ; } 4 a:active { background : green ; color : white ; } < /style > < /head > < body > < div > < a href = "test1.html" > 첫번째 a 링크 < /a > < a href = "test.html" > 두번째 a 링크 < /a > < a href = "test2.html" > 세번째 a 링크 < /a > < a href = "test3.html" > 네번째 a 링크 < /a > < a href = "test4.html" > 다섯번째 a 링크 < /a > < /div > < /body > < /html >

결과 화면

가상 클래스 - 사용 예제

코드 설명

1

a:link

:link는 아직 방문하지 않은 링크에다가 스타일을 적용할 때 사용합니다.
문서 안에 있는 하이퍼링크에서 두번째 링크와 네번째 링크는 아무것도 하지 않았을 때 배경색이 노란색으로 나오는 것을 확인할 수 있습니다.

2

a:visited

:visited는 링크를 클릭해서 한 번 이상 방문 했을 때 스타일을 적용해 줍니다.
이 스타일을 적용해 주지 않으면 기본적으로 자주색으로 표시되게 됩니다.
여기서는 세번째 링크를 클릭해서 한번 이상 방문하였으므로 visited로 설정한 스타일로 배경색을 빨간색으로 글씨는 하얀색으로 적용하였음을 알 수 잇습니다.

3

a:hover

:hover는 요소 위에 마우스 커서를 올려놓았을 때 스타일을 적용해 줍니다.
만약에 이미지 위에 마우스를 올려 놓으면 자신이 원하는 이미지를 나오게 하였다가 다시 마우스 커서를 다른 곳으로 옮겨서 치웠을 때는 원래 처음으로 지정한 이미지로 나오는 하는 효과를 나타낼 수 있습니다.

3

a:focus

:focus도 hover과 비슷해 보이지만 focus는 해당하는 요소에 초점이 맞춰졌을 때 스타일을 적용해 줍니다.
즉 마우스 커서가 올라가거나 tab을 이용해 포커스를 옮겨 해당하는 요소에 도착했을 때 스타일이 적용이 되는 것입니다.

4

a:active

:active는 해당하는 요소를 마우스로 누르고 있을 때(활성화) 스타일을 적용해 줍니다.
다섯번째 링크는 마우스를 누르고 있을 때 스타일이 적용되는 것으로 배경색은 녹색으로 글자색은 흰색으로 적용된 것 입니다.