CSS 하이퍼링크 색상 바꾸기, 밑줄 없애기

정말 간단한 태그에 관해서 알려드리겠습니다. <a href="#">링크</a> 이런식으로 링크를 사용하실때 링크의 글자가 파란색으로 나오며, 클릭을 했을 경우 갈색으로 나오는 경우를 보셨을 겁니다. 이런건 하이퍼링크 기본색상이 그렇게 지정이 되어 있고, 이걸 입맛에 맞게 수정을 해주어야 웹페이지에서 깨끗하고 깔끔하게 볼 수가 있습니다.

 

하이퍼링크색상은 총 4가지로 구분이 되는데요. 하이퍼링크 색상 바꾸기를 위해서는 해당되는 액션의 색상을 지정을 해주어야 합니다.

 

일단 하나씩 살펴보도록 하겠습니다.

 

아래소스는 하이퍼링크 밑줄과 색상을 변경해주는 코드입니다. 테스트용이며 아무 의미 없습니다^^

 

<style type="text/css">
a:link {text-decoration: none; color: blue;}
a:visited {text-decoration: none; color: green;}
a:active {text-decoration: none; color: grey;}
a:hover {text-decoration: underline; color: red;}
</style>

 

이런식으로 예졔를 한번 만들어 보았습니다. 어떻게 나오는지 살펴보도록 하겠습니다. 하이러링크 밑줄이 어떻게 할때 생기는지 유심히 보시기 바랍니다.

 

 

 

첫번째는 일반적인 링크상태의 하이퍼링크이며, 두번째는 클릭을 해서 이미 방문을 하였을때 저렇게 색상이 바뀌어서 나타납니다.

 

 

 

 

 

 

a:active 의경우 누르는 순간에 색상이나 텍스트의 상태를 정의하는데 이것보다는 아래 a:hover로 많이 쓰고 있습니다. 이것은 마우스를 링크 위로 올렸을때 나타나는 액션입니다.

 

text-decoration:none 으로 하이퍼링크 밑줄을 제거해줄 수 있는데요. 링크의 액션부분에는 먹지가 않아서 의미가 없게 되었습니다. 하이퍼링크 밑줄 없애기는 a태그에 직접 사용을 하셔야 합니다. 아래와 같이 사용하세요.

 

a {text-decoration: none;}

 

이렇게 간단하게 CSS 하이퍼링크 색상 바꾸기, 하이퍼링크 밑줄 없애기를 하실 수 있습니다. 수고하셨어요.