CSS를 사용하면 원하는 대로 링크 스타일을 지정할 수 있습니다. 색상, 배경, 크기 증가 등을 추가하여 텍스트 서식을 지정할 수 있습니다. 또한 애니메이션을 추가하여 즐거운 시각 효과를 만들 수 있습니다.
적절한 기능을 위해 의사 선택기의 순서는 - :link, :visited, :hover, :active로 지정됩니다.
예시
다음 예는 CSS를 사용한 링크 스타일을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
두 번째 링크를 가리키면 다음과 같은 결과가 나타납니다. -
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
두 번째 링크를 가리키면 다음 출력이 표시됩니다.
