▶ HTML 링크는 방문했는지 안했는지 혹은 활성화 상태인지에 따라 다른 색상으로 표시된다.
■ HTML 링크 색상
▶ 기본적으로 링크는 아래와 같이 보인다.
▷ 방문하지 않은 링크 : 밑줄과 파랑색
▷ 방문했던 링크 : 밑줄과 보라색
▷ 활성 링크 : 밑줄과 빨간색
▶ CSS를 사용해 링크 상태 색상을 변경할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
<!-- 방문하지 않은 링크는 밑줄없이 초록색 -->
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
<!-- 방문한 링크는 밑줄없이 분홍색 -->
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
<!-- 활성 링크는 밑줄과 노란색 -->
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
<!-- 링크위에 마우스를 올리면 밑줄과 빨간색 -->
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2> 링크 색상 </h2>
<p> 링크 기본색을 바꿔보자 </p>
<a href="https://naver.com" target="_blank"> 네이버 </a>
</body>
</html>
■ 링크 버튼
▶ CSS를 사용하여 버튼을 스타일할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2> 링크 버튼 </h2>
<p> 버튼을 꾸며봤다 : </p>
<a href="https://naver.com" target="_blank">네이버</a>
</body>
</html>
출처 : https://www.w3schools.com/html/html_links_colors.asp
HTML Link Colors
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (16) 이미지 (0) | 2023.02.19 |
|---|---|
| HTML / (15) 링크 - 북마크 생성 (0) | 2023.02.17 |
| HTML / (13) 링크 - 하이퍼링크 (1) | 2023.02.16 |
| HTML / (12) CSS (0) | 2023.02.16 |
| HTML / (11) 색상 (0) | 2023.02.15 |