[css] 링크 가상 클래스(:link, :visited,:hover, :active)

 

 

[css] 링크 가상 클래스(:link, :visited,:hover, :active)

 

지난 시간엔 CSS 속성 선택자를 배웠습니다.

 

[css2/3] 속성 선택자

 

 

오늘은 가상 클래스 선택자 중에 링크와 연관된 가상 클래스를 정리해 보았습니다.

 

 

 

링크 관련 가상 클래스 요약표

 

 

 

:link 가상 클래스

 

방문 전 링크 상태

 

링크를 가진 a 요소에 적용 (href="" 가 없는 a는 적용되지 않음)

 

 

사용 예:

a:link{color: red;}

 

 

 

:visited 가상 클래스

 

방문 후 링크 상태

 

 

:hover 가상 클래스

 

마우스 오버 했을 때 상태

 

:hover 선택자는 링크뿐 아니라 모든 요소에 적용할 수 있습니다.

 

 

ie는 a 요소 외에 다른 요소에 적용할 때 doctype 선언해야 합니다.

 

사용 예:

 

a:hover{background-color:red;}

 

 

div, h1:hover{background-color: gray;}

 

:active 가상 클래스

 

마우스를 클릭했을 때 상태

 

:active 선택자도 링크 외에 모든 요소에 적용 가능합니다.

 

사용 예:

h1, h2, p:active {font-size:11px;}

 

 

★ 스타일 적용 순서는?

 

link -> visited -> hover -> active 순입니다.

 

순서대로 하지 않을 경우 제대로 스타일 적용되지 않을 수 있어요

 

 

★ 링크 가상 클래스 브라우저 지원 상세

 

ie7+, chrome 4.0+m firefox2.0+,safari3.1+, opera 9.6+

 

 

▶ 예제

 

방문전 링크: 파란색, 밑줄 없음

방문후 링크: 보라색

a 에 마우스 오버했을 떄: 위에 선이 생김

div에 마우스 오버했을 때: 노란 바탕

 

html

<h2>지구별안내서 오픈캐스트 구독하기</h2> <p><a href="http://opencast.naver.com/IT741">지구별 안내서 오픈캐스트</a> 구독하시면<br>  html/css를 좀 더 체계적으로 공부하실 수 있어요 </p>   <div> <h3>홈페이지 기초 HTML배우기</h3> HTML 기초<br> HTML 태그 작성법<br> HEAD에 들어가는 태그<br> <h3>HTML, CSS, 자바스크립트 주석 처리 방법</h3> 주석 처리 방법<br> css란?<br> <h3>스타일 적용 우선 순위와 important! </h3> css 스타일 적용 우선순위<br> class, id 선택자<br> </div>

 

 

css

a:link{color: blue;text-decoration:none;} a:visited{color: purple;} a:hover{text-decoration:overline;} a:active{background-color:yellow;}   div{border:1px dashed green;width:400px;padding: 5px;} div:hover{background-color:yellow;}

 

 

▶  실행 화면입니다.

link pseudo-class.htm

 

<처음 링크와 div 상태>

<방문 후 링크와, div에 마우스 오버했을 때>

 

 

http://www.w3schools.com/cssref/sel_active.asp

 

http://css-tricks.com/pseudo-class-selectors/