[CSS 강좌] 링크 꾸미기
링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸미면 됩니다.
예를 들어 a { color: red; }
라고 하면, 링크의 색을 빨간색으로 만듭니다.
가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다.
•a:link - 방문하지 않은 링크
•a:visited - 방문했던 링크
•a:hover - 마우스가 올려진 링크
•a:active - 클릭하는 순간 링크
주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고,
a:active는 a:hover 뒤에 와야 한다는 것입니다.
따라서, 위 순서를 그대로 따르는 것이 좋습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link { color: blue; text-decoration: none; }
a:visited { color: purple; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
a:active { color: white; background-color: green; }
</style>
</head>
<body>
<h3>Navigation</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</body>
</html>
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌 ] 컨텐트 만들기 ( content ) (0) | 2017.12.12 |
|---|---|
| [CSS 강좌] Table 표 만들 때 사용하는 태그 (0) | 2017.12.11 |
| [CSS 강좌 ] 목록 꾸미기 ( list-style-type ) (0) | 2017.12.07 |
| [CSS강좌] CSS강좌속성과 상속하지 않는 속성 (0) | 2017.12.05 |
| [CSS 강좌] 아이디 선택자(ID Selector) (0) | 2017.12.04 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.