<html>
<head>
<style>
a:link { // visited 하지 않은 a태그는.
color : black;
}
a:visited { // a태그가 visited 했었다면
color:red;
}
a:active { // a태그가 클릭되어 있는 상태라면
color: yellow;
}
a:hover { // a태그 위에 마우스가 올라가 있다면
// (active와 동시에 hover 라면 더 아래쪽에 있는 css가 실행된다.)
color: green;
}
a:focus { // 초점이 맞춰지는 a태그는.
color: white;
}
</style>
</head>
<body>
<a href="https://im-recording-of-sw-studies.tistory.com">방문함</a>
<a href="https://im-recording-of-sw-studies.tistory.com">방문안함</a>
</body>
</html>
link : 클릭(방문)하지 않은 link에 대한 선택자( 사진 오른쪽 )
visited : 클릭(방문)한 link에 대한 선택자 ( 사진 왼쪽 )
hover : 태그 위에 마우스가 올라갔을 때에 대한 선택자
focus : 태그가 선택되거나 입력할 준비가 되어서 커서가 깜빡거리는 상태(초점이 맞춰진 경우)에 대한 선택자
'개발 관련 지식 > CSS' 카테고리의 다른 글
| CSS - flex (0) | 2020.03.12 |
|---|---|
| CSS - position : static, relative, absolute, fixed (0) | 2020.03.12 |
| 마진 겹침 현상(margin-collapsing) (0) | 2020.03.12 |
| CSS - box-sizing (0) | 2020.03.11 |
| CSS - block vs inline (0) | 2020.03.11 |
