링크가 걸린 글자 꾸미는 방법
링크 꾸미기
링크가 걸린 글자 꾸미는 방법은 <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;
}data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="480"
data-pen-title="CSS 링크 꾸미기 link styling 예제"
data-slug-hash="poyBaby"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 480px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
주의:
가상클래스는 순서를 지켜야 합니다. :hover는 :link와 :visited
뒤에 와야 하고, :active는 :hover 뒤에 와야 합니다. 위 순서를 그대로 따르는
것이 좋습니다.