반응형
|
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' 카테고리의 다른 글
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
|---|---|
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
