[HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기

 

HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면

기본적으로 아래에 밑줄이 표시됩니다.

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

 

CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다.

 

밑줄 없애기 (text-decoration-line)

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

a {
  text-decoration-line: none;
/*   text-decoration-line: underline; */
/*   text-decoration-line: overline; */
/*   text-decoration-line: line-through; */
/*   text-decoration-line: underline line-through overline; */
}

 

밑줄을 없애기 위해서 'text-decoration-line' 속성을 none으로 지정하였습니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

• none : 선 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

예제의 주석을 하나씩 해제 하면서 테스트 해보세요.

 

 

밑줄 색깔 바꾸기 (text-decoration-color)

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

a {
  text-decoration-color : red;
}

 

text-decoration-color 속성을 이용하여 색깔을 변경할 수 있습니다.

 

 

밑줄 모양 점선으로 바꾸기(text-decoration-style)

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

a {
/*   text-decoration-style : solid; */
/*   text-decoration-style : double; */
  text-decoration-style : dotted;
/*   text-decoration-style : dashed; */
/*   text-decoration-style : wavy; */
}

 

'text-decoration-style' 속성을 'dotted'로 변경해서, 밑줄 모양을 점선으로 바꾸었습니다.

'text-decoration-style' 속성은 다음 5가지 값을 가질 수 있습니다.

• solid
• double
• dotted
• dashed
• wavy

예제의 CSS 주석을 해제 하면서 스타일을 테스트 해보세요.

 

 

밑줄 모양 굵기 바꾸기 (text-decoration-thickness)

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

a {
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

 

'text-decoration-thickness' 속성을 설정하여 밑줄의 굵기를 변경할 수 있습니다.

크롬으로 위 코드를 실행할 경우 'text-decoration-color'를 설정하지 않으면 밑줄 굵기가 변하지 않는데,

이것은 브라우저 버그입니다.

 

 

선 위치, 색깔, 모양, 굵기 한번에 바꾸기 (text-decoration)

<a href='https://hianna.tistory.com'
   target='_blank'>
  블로그 메인으로 가기
</a>

a {
  text-decoration: underline red dotted 5px ;
}

 

text-decoration 속성을 사용하면 선위치, 색깔, 모양, 굵기를 한번에 설정할 수 있습니다.

각 속성의 값들은 스페이스로 구분하여 입력하면 됩니다.

 

---

 

정리하면,

링크의 밑줄을 없애기 위해서는 아래 2개의 속성 중하나를 정의하면 됩니다.

• text-decoration-line : none;
• text-decoration : none;