2018. 1. 18. 12:01ㆍ웹 표준 퍼블리싱 바이블
1. 가상 선택자 (Pseudo selector)알아보기
선택하려고 하는 요소를 좀 더 구체적으로 또는 그 요소의 상태를 같이 지정하는 방법입니다. 아주 다양한 가상 클래스 선택자가 있는데, 오래 전부터 활용되어 온 예로는 <a>요소에 링크 스타일을 지정하는 방법입니다.
※ 익스플로러 버전6에서는 ":link",":visited", ":hover", ":active"만 지원합니다.
1-1. 링크 가상 클래스(link pseudo classes)와 동적 가상 클래스(dyna,ic pseudo classes) 선택자
:link |
<a>요소에 링크가 지정됐으면 |
:visited |
지정된 링크를 방문했었다면 |
:active |
사용자의 동작에 따라 변화를 렌더링하는 방법으로 클랬했을 경우 |
:hover |
마우스를 올릴 경우 |
:focus |
키보드의 Tab키로 접근하는 경우 |
※ 위의 선택자들은 우선 순위가 같아서 순서가 틀어지면 해당 스타일이 정확히 적용되지 않을 수 있습니다. 또한 익스플로러 버전6에서는 ":focus"를 지원하지 않습니다.
<style type="text/css"> a:link{color: orange;text-decoration: none;} a:visited{color: brown;text-decoration: none;} a:hover{color: silver;text-decoration: none;} a:active{color: lime;text-decoration: none;} a:focus{color: lightblue;text-decoration: none;} </style>
|
1-2. 의사 요소 선택자(Pseudo elementss)
어떤 요소를 선택하는 경우 그 요소의 시작 지점(:before)이나 끝 지점(:after)을 선택하거나 첫 번째 자식요소(:first-child), 마지막 자식요소(:last-child) 등을 지정할 수 있습니다. 이미 원하는 요소를 선택하기 위해 "클래스 명"이나 "아이디 명"을 지정하지 않아도 아주 구체적으로 선택할 수 있는 다양한 방법이 예전부터 있었고 또 새롭게 추가되기도 한 것입니다.
지금까지 자주 볼 수 없었던 것은 사용자가 많은 익스플로러의 경우 버전 6에서는 전혀 지원하지 않으며, 그 이상의 버전에서도 버전 9이하에서만 일부 지원하기 때문입니다. 하지만 데스크탑이 아닌 다양한 디바이스가 등장하면서 익스플로러의 비중이 많이 줄어 들었고, 이런 구체적인 선택자도 그 사용빈도가 늘게 되었습니다. 이제 몇 가지의 의사 요소 선택자들을 알아보겠습니다.
-요소의 시작 지점을 선택하는 방법으로 ":before"를 끝 지점을 선택하는 방법으로는 ":after"를 사용합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> h1:before{content: "before";, color: orange;} h1:after{content: "after";, color: brown;} </style> </head> <body> <h1>앙큼한유채`s 일상 Story</h1> </body> </html>
|
※ 특히 ":after"선택자는 아주 많이 활용되고 있으므로 정확한 적용 원리를 알아둡니다. 또한, 의사 요소 선택자는 익스플로러 6, 7 버전에서 지원되지 않습니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-4. 서체(font)와 글(text) 스타일 - 1 (0) | 2018.01.23 |
|---|---|
| 4-3. 선택자의 우선순위 (0) | 2018.01.19 |
| 4-2. 다양한 선택자 알아보기 - 3 (0) | 2018.01.17 |
| 4-2. 다양한 선택자 알아보기 - 2 (0) | 2018.01.16 |
| 4-2. 다양한 선택자 알아보기 - 1 (0) | 2018.01.15 |