반응형
[pseudo class selector(수도(가상) 클래스 선택자)]
클래스 선택자처럼 동작하지만 클래스 선택자는 아닌 여러가지 특수한 선택들을 하게 하는 선택자로
element 의 상태에 따라 element 를 선택하는 선택자이다.
(이 문장 자체로는 무슨 말인지 사실 잘 모르겠다.)
아래의 코드에 수도 선택자 기능으로 여러가지 변화 과정을 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:active{
color:green
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함('방문함' 버튼을 클릭한채로 누르고 있으면 green으로 바뀌는 것을 확인한 수 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:active{
color:green
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함(마우스를 올려놓으면 '방문함' 버튼이 yellow 로 바뀌고 전에 적용시킨 active 적용이 안되는 것이 확인되는데 이는 가상 선택자의 적용 순위가 동급일 때 뒤에 선언한 선택자를 반영하게 된다. 위의 상태에서 '방문함' 버튼을 누른채로 마우스를 아래로 드래그 해보면 active 기능을 다시 볼 수 있게 된다. )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:visited{
color:red;
}
a:active{
color:green
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함(visted 설정으로 방문한 링크의 색이 red 로 바뀐 것을 확인할 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link{
color:black;
}
a:visited{
color:red;
}
a:active{
color:green
}
a:hover{
color:yellow;
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함( link 설정으로 방문하지 않은 링크의 색이 black 으로 설정된 것을 확인한 수 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link{
color:black;
}
a:visited{
color:red;
}
a:active{
color:green
}
a:hover{
color:yellow;
}
a:focus{
color:white;
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
</body>
</html>
결과
방문함 방문함(버튼위에 마우스를 올려놓고 tab 키를 누르면 white 네모 박스가 생성되는 것을 확인할 수 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link{
color:black;
}
a:visited{
color:red;
}
a:active{
color:green
}
a:hover{
color:yellow;
}
a:focus{
color:white;
}
input:focus{
background-color: black;
color:white;
}
</style>
</head>
<body>
<a href="http://opentutorials.org">방문함</a>
<a href="http://a.a">방문함</a>
<input type="text">
</body>
</html>
결과
방문함 방문함(focus 효과 확인을 위해 text 를 추가해서 background 설정으로 해보면 조금 더 확실하게 확인해 볼 수 있다.)
이상 오늘의 CSS 2 note 마무리
접두사: 거짓의의 뜻, 가짜의의 뜻, 유사의의 뜻
반응형
'CSS' 카테고리의 다른 글
| CSS - Cascading Style Sheets(1) (0) | 2024.05.31 |
|---|
