공감 및 댓글은 포스팅 하는데 아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께 도움이 되길 바라며 더 깔끔하고 좋은 포스팅을 만들어 나가겠습니다^^
|
첫 HTML / CSS 포스팅을 하네요 ㅎㅎ
이번 포스팅에서는 a 태그(링크) 와 관련있는 가상 클래스 선택자들에 대해 공부합니다.
- :link
방문한 적이 없는 링크일 때 적용됩니다.
- :visited
방문한 적이 있는 링크일 때 적용됩니다.
- :hover
마우스 커서가 링크 위에 올라갔을 때 적용됩니다.
- :active
링크를 클릭했을 때 적용됩니다.
위 가상 클래스 선택자들을 2개 이상 사용할 경우에는 언급된 순서대로 사용하시는 것이 좋습니다.
ex)
<style>
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
</style>
위에서 hover 와 active의 순서가 바뀌면 가장 밑에 있는 속성이 적용되기 때문에 active 속성이 제대로 보여지지 않습니다.
예제 코드 )
추가적으로 링크 뿐만 아니라 여러 곳에서 사용가능한 가상 클래스 선택자입니다.
:focus : 태그에 포커스가 갔을 때 적용됩니다.
ex) <input type="text">
input 태그에 포커스가 갔을 때 배경을 변경해주고 싶을 경우
<style>
input:focus {
background-color : blue;
}
</style>
아래 사진은 :focus 를 사용했을 때 입니다.
위 코드를 실행해 보시면 됩니다 ㅎㅎ
이상입니다.
감사합니다~
'HTML5,CSS3' 카테고리의 다른 글
| js & css 로딩 속도 줄이기 -> 코드 축소하기 (0) | 2018.12.19 |
|---|---|
| 티스토리 반응형 스킨 배경 이미지 변경하기!! (1) | 2017.11.28 |