본문 바로가기

[HTML] 링크 색상 변경 및 밑줄 없애기

HTML 코드 추가

  • HTML의 <HEAD> </HEAD>태그 사이에 <style type="text/css"> .... </style> 코드를 추가하면 됩니다
<HEAD>

<style type="text/css">
 /* link - 아직 클릭하지 않은 경우 red 색상 설정 */
 a:link { color: green; text-decoration: none;}	
 /* visited - 한번 클릭하거나 전에 클릭한적 있을 경우 #c71d44 설정 */
 a:visited { color: #c71d44; text-decoration: none;}	
 /* hover - 마우스를 해당 링크에 위치했을 경우 #006DD7 설정 */
 a:hover { color: #006DD7; text-decoration: underline;}
</style>

</HEAD>

 

아래 설정한 링크 예시 

[ 설정한 링크 ]

 

 

  • 코드 해석
     
    • style 소스의 type = text를 제어하는 css로 설정
    • a:link - 아직 클릭하지 않은 링크
    • a:visited - 한번 클릭했던 혹은 다녀갔던 링크
    • a:hover - 링크를 클릭하려고 마우스를 가져갔을 때 상태
    • decoration - 링크 밑줄 설정
    • none - 밑줄 없는 상태
    • underline - 밑줄 있는 상태
    • a:active - 링크부분에서 마우스를 누르고 있는 동안의 상태

    • 색상은 red, green, black 형태도 가능하고 #006DD7 형태도 가능