HTML에서 모든 링크(<a> 태그)는 브라우저의 기본 스타일에 따라 자동으로 밑줄이 표시됩니다. 하지만 디자인 의도에 따라서는 이 밑줄이 오히려 거슬리는 경우가 많습니다. 이럴 때 CSS의 text-decoration 속성을 사용하면 링크의 밑줄을 아주 간단하게 제거할 수 있습니다.
text-decoration 속성이란?
text-decoration 속성은 텍스트에 밑줄(underline), 윗줄(overline), 취소선(line-through) 같은 장식 선을 추가하거나 제거하는 데 사용되는 CSS 속성입니다. 이 값을 none으로 지정하면 링크에 적용된 기본 밑줄이 사라집니다.
구문(Syntax)
CSS text-decoration 속성의 기본 구문은 다음과 같습니다.
Selector {
text-decoration: /*값*/;
}주요 값으로는 none(장식 없음), underline(밑줄), overline(윗줄), line-through(취소선) 등이 있으며, 링크의 밑줄을 없애려면 none을 사용하면 됩니다.
예제 1
다음 예제는 text-decoration 속성을 활용해 링크의 밑줄을 제거하는 기본적인 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 5px;
box-shadow: inset 0 0 5px violet;
}
a {
font-style: italic;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Demo</a>
<p>
<a href="https://example.com/">Example domain</a>
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
이번에는 :last-child 선택자와 함께 text-decoration 속성을 조합하여, 여러 링크 중 특정 링크만 다르게 스타일링하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
width: 50%;
text-align: right;
color: green;
border: thin dashed red;
}
a {
text-decoration: none;
}
a:last-child {
color: inherit;
background-color: moccasin;
}
</style>
</head>
<body>
<div>
<a href="#">Link Demo</a>
<p>
Watch this: <a href="https://example.com/">Example site</a>
</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
실무 활용 팁
밑줄을 제거하면 링크임을 한눈에 알아보기 어려울 수 있습니다. 따라서 실무에서는 링크 색상을 일반 텍스트와 차별화하거나, :hover 가상 클래스를 사용해 마우스를 올렸을 때만 밑줄을 표시하는 방식을 함께 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.