[html/css] 의사클래스 ( a:link, a:visited, a:active, a:hover) 사용법

오늘 한 번 의사 클래스 ( pseudo class )에 대해 한 번 알아 봅시다.!!

 

<a> 태그는 보통 링크를 걸때, 사용하는 태그 인데요 ㅎㅎ

링크에 마우스가 올라갈때,

링크에 마우스가 클릭될때,

링크에 한 번 이상 방문될때,

에 따라서 다르게 스타일을 적용 할 수 있습니다. ( 오늘 배울 것이 바로 이것!! )

 

<a> 태그에 의사 클래스 설명

A) a:link          : 방문 하기 전의 링크의 상태

B) a:visited      : 방문 한 후에 링크의 상태

C) a:hover       : 마우스가 덮었을때 (마우스 위치가 링크 위에 있을때)

D) a:active       :  마우스로 한 번 클릭 했을 때

 

이렇게 위 상태에 따라 나뉘어 집니다.

 

 

 

<a> 태그 활용하는 방법

 a:link, a:visited {
			background-color: #FFA500;
			color: maroon;
			padding: 15px 25px;
			text-align: center;	
			text-decoration: none;
			display: inline-block;
		}
 a:hover, a:active { background-color: #FF4500; }

일반적으로 위와 같이 사용될 수 있습니다.

a:link, a:visited 상태 일때는 배경색을 #FFA500으로 한다는 것입니다.

( background-color:  #FFA500; )

a:hover, a:active 상태 일때는 배경색을 #FF4500으로 한다는 것입니다.

( background-color:  #FF4500; )

 

 

<a> 태그에 a:hover를 사용한 것!! 

 

이런 식으로 사용 할 수 있습니다.!! ㅎㅎ

참고로 ,

text-decoration: none 속성 값을 넣어 주어야만 밑줄이 사라진답니다.!!

text-decoration: underline   : 아래 밑줄이 생김 ( 기본값 )

text-decoration: overline     : 위에 밑줄이 생김