<HTML5+CSS3>가상 클래스

가상클래스는 슈도 클래스라고도 하는데 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정해 사용하는 것을 말한다.

링크와 관련된 가상 클래스 선택자

-링크는 사용자에게 보일 때는 링크가 걸린 텍스트나 이미지일 뿐이지만, 실제로 링크에는 링크위로 마우스를 올려놓았을 때 or 클릭할 때 여러 상황이 존재한다. (눈에 보이지는 않음)

 

:link 선택자

-문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.

기본으로 파란색 글자와 밑줄로 표시. 이런것들을 없애거나 색상을 바꾸려고 할 때 이 선택자를 사용한다

ex) a : link { color:black ; text-decoration:none; }

-><a>태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 검은색으로 표시 정의

 

:visited 선택자

-문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일 적용.

방문한 텍스트 링크는 기본으로 자주색. 달라지지 않게하려면 이 선택자를 사용해서 조절한다.

ex) a :visited {color : black ; }

->방문했던 링크는 검은색으로 표시 정의.

 

:active 선택자

-해당 요소가 활성화되었을 때의 스타일을 지정. 예로 , 링크를 클릭했을 때의 스타일을 지정할 경우 사용

ex) a:active {color:black;}

->링크를 건 부분을 클릭하는 순간 검은색 글자로 표시하는 스타일을 정의

 

:hover 선택자

-해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정. 흔히 롤오버(rollover)를 만드는 선택자이다.

ex) a:hover { color:red ; text-decoration:underline;}

->링크를 건 부분 중 텍스트 링크 위로 마우스 포인터를 올려 놓으면 밑줄과 함께 빨간색으로 표시

 

:focus 선택자

-해당 요소에 초점이 맞춰졌을 때의 스타일 지정 예로, 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tab을 눌러 초점을 이동했을 때 초점이 맞춰진다.

ex) p : focus {backgrond-color;yellow;}

-> <p>태그로 지정한 텍스트 단락 위로 초점이 맞춰지면 텍스트 단락의 배경색 바꿈

 

 %즉,

 : visted = 방문했던 링크의 스타일 클릭하고 돌아왔을때 스타일 설정

 : hover , :focus = 링크위로 마우스를 올려놓거나 초점을 맞췄을때 스타일 지정 

 : active = 링크를 클릭하고 유지할때의 색 지정