반응형
HTML에서 해당 페이지에서 다른 특정 페이지를 호출할 때 기본적으로 a태그를 이용합니다.
a태그는 링크의 기능을 가지고 있는 태그이며, 많은 웹페이지에서 사용되고 있습니다.
해당 태그를 사용하여 링크를 거는 것은 간단하지만 a태그에 몇가지 속성이 존재합니다.
총 4개의 속성이 존재하는데 각 link, visited, hover, active가 존재하며, css에서 해당 속성을
이용하여 링크에 특정 액션을 캐치할 수 있어, 이것을 응용하여 스타일을 지정할 수 있습니다.
이번 포스팅에서는 해당 속성들에 대한 기능과 예제로 화면으로 간단히 배워갈수 있도록 하겠습니다.
a태그(Tag) a:link, a:visited, a:hover, a:active 사용 방법
a:link |
해당 링크를 방문하기 전 상태 |
a:visited |
해당 링크를 방문한 뒤 상태 |
a:hover |
해당 링크에 마우스를 올렸을 때 상태 |
a:active |
해당 링크를 클릭하였을 때 상태 |
- 사용할 수 있는 종류는 위와 같이 4가지이며 css에 선언하게 된다면 위의 순서대로 선언해야 됩니다.
- 만약 a:active 다음으로 a:hover가 오는 경우 같이 순서가 틀리면 정상적으로 동작하지 않을 수 있습니다.
링크 속성 사용 방법 및 결과 화면
<!doctype html>
<html>
<head>
<style>
a:link { color: blue; } /* 링크 방문 전 : 파란색 */
a:visited { color: orange; } /* 링크 방문 후 : 주황색 */
a:hover { color: green; } /* 링크에 마우스 오버 : 초록색 */
a:active { color: black; } /* 링크를 마우스로 클릭 : 검정색 */
</style>
</head>
<body>
<div>
<a href="http://chocoball3.tistory.com">공부하는 세상 링크 테스트</a>
</div>
</body>
</html>
- 링크를 방문하기 전의 상태인 a:link 입니다.
- 소스코드와 같이 방문 전 링크에는 파란색이 적용되어 있습니다.
- 링크를 한번 이상 방문하고 난 뒤의 상태인 a:visited 입니다.
- 소스코드와 같이 방문 후의 링크에는 주황색이 적용되어 있습니다.
- 링크에 마우스를 올려놓은 상태인 a:hover 입니다.
- 소스코드와 같이 마우스를 올려 놓은 링크에는 초록색이 적용되어 있습니다.
- 링크를 마우스로 클릭한 상태인 a:active 입니다.
- 소스코드와 같이 마우스로 클릭한 상태의 링크에는 검정색이 적용되어 있습니다.
링크 속성 밑줄 제거 방법 ( text-decoration )
<!doctype html>
<html>
<head>
<style>
a { text-decoration: none; } /* 링크 밑줄 제거 */
</style>
</head>
<body>
<div>
<a href="http://chocoball3.tistory.com">공부하는 세상 링크 테스트</a>
</div>
</body>
</html>
- 링크의 밑줄 제거 하는 방법은 간단히 a태그에 text-decoration: none으로 설정합니다.
반응형
'Programing > CSS' 카테고리의 다른 글
| [Font Awesome] 5 & 6 cdn 및 사용법 (0) | 2022.09.26 |
|---|
댓글