Please Enable JavaScript!
Gon[ Enable JavaScript ]

HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기

웹 프로그래밍/HTML
반응형

HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기

 

환경: Eclipse Mars

 

하이퍼링크에 텍스트는 이벤트의 종류에 따라 색상을 바꿀 수 있습니다. 이 때 적용되는 CSS 클래스를 가상 클래스(pseudoclass)라고 합니다. 모조클래스, 의사클래스 라고도 하는데, 가상 클래스가 가장 와 닿더군요. 말 그대로 CSS 에서 쓰는 일반 클래스와 다르게 마침표(.) 가 아닌 콜론(:) 을 사용합니다.

 

하이퍼링크에는 4가지 가상 클래스가 있습니다. <a> 태그의 이벤트에 따라 다르게 적용할 수 있는 클래스입니다. 보통 색상을 다르게 표현해서 간접적으로 링크에 대한 정보를 알려 주는 것이죠. 예를 들어 방문했던 적이 있는 사이트라면 a:visited 속성을 통해 a:link 와 색상을 다르게 하면 사용자가 색깔만 봐도 구분 할 수 있는 것입니다.

 

l  a:link 방문한 적이 없을 때 적용 됩니다.

l  a:visited 방문했던 사이트에 적용 됩니다.

l  a:hover 마우스를 올리면 적용됩니다.

l  a:active 마우스를 클릭했을 때 색깔이 변하고 손 띠면 다시 돌아옵니다.

 

아래 샘플은 4가지 가상 클래스를 표현한 것입니다. 방문했던 사이트와 없는 사이트를 구분했습니다. 그리고 샘플 화면에는 안 나오지만 링크에 마우스를 꾹 누르면 a:active 가 적용되어서 노란색으로 보일 겁니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	a:link {color:green; text-decoration:none;}
	a:visited {color:pink; text-decoration:none;}
	a:hover {color:red;	text-decoration:underline;}
	a:active {color:yellow;	text-decoration:underline;}
</style>
</head>
<body>
	
	<a href="http://www.abc.com">
		방문했던 적 없음 : link 
	</a><br/><br/>
	<a href="http://www.naver.com">
		방문했던 적 있음 : visited 
	</a><br/><br/>
	<a href="http://mainia.tistory.com">
		녹두장군 블로그  
	</a>
</body>
</html>

 

HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기

 

반응형
Posted by 녹두장군1
,