2021-03-13 10:27:26

a 태그를 이용해서 링크를 달면 기본적으로 밑줄이 쳐집니다. 

 

 

그런데 만약 밑줄이 없는 링크를 보여주고 싶다면 어떻게 해야할까요? 

 

이때는 a 요소의 CSS에서 text-decoration 속성의 값을 none으로 해주면 됩니다. 

 

a {
    text-decoration: none;
}

 

그러면 링크에 밑줄이 쳐지지 않습니다. 어렵지 않죠? ㅎㅎ 

 

 

위 예제의 전체 코드는 다음과 같습니다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        a {
            text-decoration: none;
        }
    </style>
 
</head>
<body>
    <a href="https://bskyvision.com">bskyvision</a>
 
</body>
</html>
cs

 

관련 글

[css] 밑줄 여유있게 치기  

[css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리  

 

 

(이 글은 2021-3-15에 마지막으로 수정되었습니다.)