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] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리
(이 글은 2021-3-15에 마지막으로 수정되었습니다.)
'Dev > HTML, CSS' 카테고리의 다른 글
[css] 자간 조절하기, letter-spacing 속성 (2) | 2021.05.26 |
---|---|
[html] 5초마다 자동으로 웹 페이지를 새로고침 해주고 싶다면? (2) | 2021.05.11 |
[html] 이메일 주소에 링크 걸 때, mailto: (0) | 2021.04.06 |
카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기 (15) | 2021.03.18 |
[css] css 선택자에서 꺽쇠 > 의 의미는? 자식 선택자와 하위 선택자 (1) | 2021.02.16 |
[css] calc 함수 사용법 (0) | 2021.01.15 |
[css] box-shadow로 요소 볼록 튀어나온 효과, 오목 들어간 효과 주기 (2) | 2021.01.14 |
[css] 스크롤바 예쁘게 꾸미기 (0) | 2021.01.06 |