링크 꾸미기
링크가 걸린 글자 꾸미는 방법은 <a> 태그를 선택하여 꾸밉니다.
예를 들어 아래 코드는 링크의 색을 빨간색으로 만듭니다.
a {
color: red;
}
가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다.
- a:link - 방문하지 않은 링크
- a:visited - 방문했던 링크
- a:hover - 마우스가 올려진 링크
- a:active - 클릭하는 순간 링크
예제
- 방문하지 않은 링크의 색은 파란색이고 밑줄이 없습니다.
- 클릭했던 링크는 보라색에 밑줄 없이 나옵니다.
- 마우스를 링크 위에 올리면 글자색이 빨간색으로 변하고 밑줄이 생깁니다.
- 클릭하는 순간 글자색은 흰색으로, 배경은 녹색으로 변합니다.
<div>
<h1>Navigation</h1>
<ul>
<li><a href="#01">Home</a></li>
<li><a href="#02">HTML</a></li>
<li><a href="#03">CSS</a></li>
<li><a href="#04">JAVASCRIPT</a></li>
<li><a href="#05">JQUERY</a></li>
</ul>
</div>
a:link {
color: skyblue;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: white;
background-color: green;
}
주의:
가상클래스는 순서를 지켜야 합니다. :hover는 :link와 :visited
뒤에 와야 하고, :active는 :hover 뒤에 와야 합니다. 위 순서를 그대로 따르는
것이 좋습니다.