Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

가상 클래스는 태그 이벤트에 사용할 수 있는 클래스 입니다. 가장 많이 이용하는 것이 마우스가 올려 졌을 때 색상이 변하거나 에디터 박스에 지시어가 사라지게 하는 등의 기능을 구현합니다. 주로 <a> 4가지 이벤트에 많이 쓰이죠. 아래 샘플은 a 태그를 이용해서 가상 클래스를 구현해 보도록 하겠습니다.

 

a 태그에는 총 4가지의 이벤트가 있습니다. 그리고 가상 클래스는 콜론 “:” 과 이벤트 명을 같이 써 주면 됩니다. 그러니까 a :hover 형태가 되는 것이죠. a 태그의 4가지 이벤트에 대한 설명입니다.

 

¤ a:link : 한번도 방문하지 않은 링크 상태

¤ a:visited : 방문 후 링크 상태

¤ a:hover : 마우스를 올려 놓았을 때

¤ a:active : 마우스를 클릭한 후 놓지 않고 있을 때

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	a:link{color: black;}
	a:visited{color: green;}
	a:hover{color: blue;}
	a:active{color: red;}
</style>
</head>
<body>
	<p><a href="http://mainia.tistory.com"> 녹두장군 블로그</a></p>
	<p><a href="http://www.naver.com"> 네이버 바로가기 </a></p>
	<p><a href="http://www.aaa.com"> a:link 방문한적 없는 링크 </a></p>
</body>
</html>

 

네이버와 저의 블로그는 익스플로러 로그에 방문 기록이 있기 때문에 visited 가 적용되어서 녹색으로 표현이 되었습니다. 그리고 방문한 기록이 없는 마지막 링크는 검은색이 되었죠.

 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법

 

링크에 마우스를 가져가게 되면 hover 이벤트가 발생하게 됩니다. 그럼 CSS 에서 설정한 색상 값 blue 가 적용됩니다.

스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법

 

마지막으로 마우스를 클릭한 상태에서 놓지 않으면 active 이벤트가 발생합니다. 그래서 빨간색이 적용되었습니다. 이렇게 가상 클래스는 태그의 여러 이벤트 마다 별도의 CSS 설정이 가능합니다.

스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법

반응형
Posted by 녹두장군1
,