a 태그 텍스트 밑줄 없애기 (text-decoration 사용법)

HTML 세계에서 사용하는 수 많은 태그 중 <a> 요소라는것이 있습니다. 많이들 보셨을지도 모르겠습니다. 주로 링크를 넣을 때 사용하죠. a는 Anchor의 약자로 닻이라는 뜻입니다. 맞습니다. 배에 있는 그 닻을 의미합니다. 배가 정박하거나 출항할 때 바닷 속 바닥에 내린 거대한 쇳덩이가 바로 닻입니다. 닻을 올려라! 하면 출항을 의미하죠. 즉 이 앵커라는 개념은 뭔가를 단단히 고정하며 든든히 그 자리에 위치하는 우직함의 대명사로도 쓰입니다. 아무래도 HTML 세계에서는 하이퍼링크 문서답게 클릭 시 다른 웹사이트로의 이동에 있어서 마치 닻을 올리고 출항하는 기분을 주고 싶었던 모양입니다. 그래서 a 태그를 사용하게 된 것이 아닐까라는 생각을 해봅니다. a태그의 기본 형태는 다음과 같습니다.

 

<a href="URL주소">텍스트 입력</a>

a태그를 사용하고 그 안에 href를 입력합니다. 그리고 큰 따옴표 안에 URL 주소를 입력하죠. 마무리로 a태그 사이에 텍스트를 입력하여 해당 글씨를 클릭하면 href에 입력한 URL로 이동하게 됩니다. a태그의 기본 형태는 텍스트에 밑줄이 그어져있고 파란색 글씨입니다. 또한 한 번 클릭하여 이동된 링크 글씨는 보라색으로 바뀝니다. 본문에서는 a태그의 밑줄을 없애는 방법에 대해 알아볼 것입니다. CSS에서 텍스트의 밑줄을 제거하는 명령문은 다음과 같습니다.

 

text-decoration

a {
    text-decoration: none;
}

이렇게 입력하면 밑줄은 사라집니다. 그럼 text-decoration의 다양한 추가 옵션들을 살펴봅시다.

 

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

 

 

위의 예제에 있는 CSS 코드들을 살펴보시면 쉽게 파악이 가능합니다. 플랫폼 오류로 코드가 보이지 않을 경우를 대비해 아래에 한번 더 핵심 내용을 적어두겠습니다.

 

text-decoration: none; ▶ 텍스트만 출력

text-decoration : line-through ▶ 텍스트 가운데 줄

text-decoration : overline ▶ 텍스트 위에 줄

text-decoration : underline ▶ 텍스트 아래 줄 (a태그 기본값)

text-decoration : inherit ▶ 부모 요소의 text-decoration 옵션을 이어받음

 

마지막 inherit 경우, 부모 요소에 text-decoration에 대한 별도의 옵션이 없는 경우 a태그에 사용하면 none처럼 표현되어 밑줄이 사라집니다. 하이퍼링크 a태그의 각 상황에 대한 색상 변경은 아래의 글을 참고하시기 바랍니다.

 

text-decoration-color

그리고 텍스트의 밑줄에 대한 색상 변경도 가능합니다. 다음의 CSS 코드를 사용하면 됩니다.

 

text-decoration-color: 색상입력;

색상 고유명을 사용해도 되며 16진수 핵사코드 또는 rgba값을 입력해도 됩니다. 편한 방법을 편하게 사용하도록 합니다. 끝.