1.5.1 동적(dynamic) pseudo-class
웹 사이트에서
여러분은 하나의 링크(link)의 상태가 방문 전(unvisited),
방문됨(visited) 그리고 활성화(active) 3가지
주요 상태가 있다는 것을 알고 있을 것입니다.
CSS에서는 이에 대응하는 dynamic pseudo-class로 각각 a:link, a:visited, 그리고 a:active로 나타낼
수 있습니다. 또한 CSS3에는 여기에 a:hover, a:focus를 사용할 수 있도록 정의되어 있습니다.
그래서 일반적인 사용 형식을 나타내면 다음과 같은 형태로 사용할 수 있습니다.
그리고
위에서 사용된 의사 클래스(pseudo-class)에 대하여 정리하면 다음과 같습니다.
|
pseudo-class |
설명 |
|
link |
아직 방문하지 않은 링크(link)에 적용 |
|
visited |
방문한 링크(link)에 적용 |
|
hover |
마우스와 같은 장치를 이용하여 해당 요소를 클릭(click) 같은 해당 요소가 활성화되는 동작없이 요소를 가리킬 경우 |
|
active |
사용자가 해당 요소를 클릭할 때 |
|
focus |
키보드나 기타 입력 장치에 의해서 요소에 초점이 맞춰질 때. 보통 키보드의 Tab 키를 이용 |
메모장을
열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>동적(dynamic) pseudo-class를 이용한 선택자 예제</title>
<style>
</style>
</head>
<body>
<a href="http://fromyou.tistory.com">체르니의 프로그래밍 놀이터</a>
</body>
</html>위와 같이 a(anchor) 요소의 href 속성에 이동할 페이지 URL을 설정해주고 “dynamicpseudo-classEx.html”로
저장합니다. 이제 IE9를 통해 열어보면 다음과 같이 현재
“http://fromyou.tistory.com”으로 이동 전이기 때문에 대부분의 브라우저에서 기본적으로 a 요소의 방문 전(unvisited)는 글꼴 색상은 파란색이고 밑줄이
그어진 다음과 같은 상태를 나타냅니다.
다음으로 사용자가 클릭했을 때 즉, 활성화(active) 상태에는 글꼴 색상은 빨강색이고 밑줄이 그어진 모습으로 보여주게 되며 마지막으로 방문됨(visited)에는 글꼴 색상은 보라색(purple)이고 밑줄이 그어진 모습을 보여주게 됩니다. 확인을 위해 클릭하고 “http://fromyou.tistory.com”으로 이동한 후 다시 뒤로 버튼을 클릭하여 돌아오면 다음과 같이 방금 전 설명한대로 나타납니다.
이제 여기에
동적(dynamic) pseudo-class를 이용하여 스타일을 적용해볼까요? <style>…</style> 블록 안에 다음과 같이 코드를 작성합니다.
<style>
a:link {color: blue; text-decoration: none;}
a:active {color:yellow ; background-color: pink;}
a:visited {color: purple; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:focus {border-style: dashed; border-width: 2px;}
</style>
방문 전(link)일 때는 글꼴 색상은 파란색, 밑줄은 없음. 활성화(active) 상태일 때는 글꼴 색상은 노란색, 배경 색상은 핑크(pink)로 설정합니다.
방문됨(visited) 상태에는 글꼴 색상은 보라색이고 마우스로 해당 링크 위에 위치할 경우 글꼴 색상은 빨강색이고 밑줄을 그어 나타냅니다. 마지막으로 키보드를 이용하여 해당 링크에 초점이 위치할 경우 대시 기호를 이용하여 사각형 형태로 테두리를 나타내도록 설정합니다.
위와 같이 작성, 저장하고 IE9를 이용하여 열어보면 다음과 같이 방문 전(link) 상태를 나타냅니다.
이제 hover를 확인하기 위해서 마우스 커서를 링크 위에 위치시키면 다음과 같이 바뀌게 됩니다.
이제 focus를 확인하기 위해서 키보드의 Tab키를 누릅니다. 그러면 다음과 같이 대시 기호(-)로 둘러싸이고 경계선의 두께(border-width)가 1 픽셀(pixel)인 상태로 변경되어 나타납니다.
이제 활성화(active) 상태를 보기 위해서 클릭하면 “http://fromyou.tistory.com”으로
페이지로 이동하기 전에 순간적으로 글꼴 색상은 노란색, 배경 색상은 핑크(pink)로 나타내고 이동하게 됩니다. 마지막으로 웹 브라우저의 뒤로
버튼을 클릭하여 원래의 페이지인 “dynamicpseudo-classEx.html”로 돌아오면 다음과
같이 visited에 설정된 대로 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.5.3 언어(lang) pseudo-class (0) | 2013.07.31 |
|---|---|
| 1.5.2 target pseudo-class (0) | 2013.07.31 |
| 1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
| 1.4.7 “[속성*=속성값]”의 경우 (0) | 2013.07.31 |
| 1.4.5 “[속성^=속성값]”의 경우 (0) | 2013.07.31 |