본문 바로가기

[CSS] a 태그 스타일 적용 및 밑줄 제거

728x90

 

 

 

 

 

<a> 태그는 4가지 상태를 가지고 있습니다.

 

a:link       사용자가 링크를 방문하지 않은 기본 상태
a:visited  사용자가 링크를 방문한 후의 상태
a:hover    사용자가 링크에 마우스를 올릴 때의 상태
a:active   사용자가 링크를 클릭하는 순간의 상태

 

 

 

 

각 상태별로  text-decoration ,  background ,  color ,  font-size  등 이외의 다양한 스타일 속성을 각각 적용할 수 있습니다.

스타일을 적용할 경우 상태의 순서는 반드시 아래와 같이 작성해주세요.

 

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }

 

위 예시의  text-decoration  속성은 주로 <a> 태그의 밑줄을 제거할 때 사용합니다.

<a> 태그는 기본적으로 밑줄 처리되므로, 밑줄을 제거하고 싶다면 속성에  none  값을 지정해주면 됩니다.

반대로 밑줄을 사용하고자 한다면  underline  값을 지정하면 됩니다.

 

 

 

 

 

728x90