CSS를 활용한 링크 기본 밑줄 제거 방법

웹 페이지에서 하이퍼링크는 기본적으로 파란색 텍스트에 밑줄이 그어진 형태로 표시됩니다. 이러한 기본 스타일은 때때로 디자인 의도와 맞지 않을 수 있는데, CSS의 text-decoration 속성을 none으로 설정하면 손쉽게 밑줄을 제거할 수 있습니다.

기본 예제

아래 코드는 a:link(방문하지 않은 링크)와 a:visited(방문한 링크) 상태에서 모두 밑줄을 제거하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: blue;
    text-decoration: none;
}
a:visited {
    color: blue;
    text-decoration: none;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is the <a href="https://tutorialspoint.com">reference</a></p>
</div>
</body>
</html>

실행 결과

CSS를 활용한 링크 기본 밑줄 제거 방법

위 결과를 보면 링크는 여전히 파란색으로 표시되지만, 기본 밑줄은 사라진 것을 확인할 수 있습니다.

마우스 오버 및 클릭 상태까지 처리하는 예제

사용자가 마우스를 올리거나(hover), 클릭하는(active) 순간에도 밑줄이 나타나지 않도록 하려면 해당 가상 클래스(pseudo-class)에도 동일하게 text-decoration: none;을 적용해야 합니다.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: none;
}
a:active {
    color: blue;
    text-decoration: none;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is the <a href="https://tutorialspoint.com">reference</a></p>
</div>
</body>
</html>

실행 결과

CSS를 활용한 링크 기본 밑줄 제거 방법

핵심 정리

text-decoration: none; — 링크의 밑줄을 제거하는 핵심 속성입니다.
a:link — 아직 방문하지 않은 일반 링크 상태를 지정합니다.
a:visited — 사용자가 이미 방문한 링크 상태를 지정합니다.
a:hover — 마우스 포인터가 링크 위에 있을 때의 상태를 지정합니다.
a:active — 링크가 클릭되는 순간의 상태를 지정합니다.

모든 링크에 한 번에 적용하고 싶다면 다음과 같이 간결하게 작성할 수도 있습니다.

a {
    text-decoration: none;
}

이처럼 CSS를 활용하면 링크의 시각적 스타일을 자유롭게 제어하여 웹사이트의 디자인 일관성을 높일 수 있습니다.