HTML에서 링크에 기본적으로 표시되는 밑줄을 제거하려면 CSS의 text-decoration 속성을 사용하면 됩니다. 이 속성을 style 속성과 함께 사용하는데, style 속성은 특정 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 합니다.
즉, <a> 태그에 style 속성을 추가하고 그 안에 text-decoration: none; 값을 넣어주면 링크의 밑줄이 사라집니다. 다만 한 가지 주의할 점이 있습니다. style 속성으로 지정한 스타일은 전역(global)으로 설정된 스타일보다 항상 우선 적용됩니다. 따라서 HTML 내부의 <style> 태그나 외부 스타일시트에서 정의한 스타일까지 모두 덮어쓰게 되므로, 인라인 스타일 사용 시에는 이 점을 염두에 두어야 합니다.
기본 예제 코드
아래 코드를 실행하면 링크의 밑줄이 제거되는 결과를 바로 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Text Decoration</title> </head> <body> <h2>About</h2> <p> Our <a href="/about/about_team.htm" style="text-decoration: none;">Team</a> comprises of programmers, writers, and analysts. </p> </body> </html>
추가 팁: 여러 링크에 일괄 적용하기
페이지 내의 모든 링크에서 밑줄을 제거하고 싶다면, 매번 style 속성을 작성하는 대신 CSS 선택자를 활용하는 것이 더 효율적입니다.
<style>
a {
text-decoration: none;
}
</style>이렇게 하면 문서 전체의 <a> 태그에 한 번에 적용됩니다. 또한 마우스를 올렸을 때(hover)만 밑줄을 표시하고 싶다면 아래와 같이 작성할 수 있습니다.
a:hover {
text-decoration: underline;
}이처럼 text-decoration 속성은 none, underline 외에도 overline(윗줄), line-through(취소선) 등 다양한 값을 지원하므로, 상황에 맞게 활용하면 됩니다.