반응형
가상 클래스는 태그 이벤트에 사용할 수 있는 클래스 입니다. 가장 많이 이용하는 것이 마우스가 올려 졌을 때 색상이 변하거나 에디터 박스에 지시어가 사라지게 하는 등의 기능을 구현합니다. 주로 <a> 4가지 이벤트에 많이 쓰이죠. 아래 샘플은 a 태그를 이용해서 가상 클래스를 구현해 보도록 하겠습니다.
▼ a 태그에는 총 4가지의 이벤트가 있습니다. 그리고 가상 클래스는 콜론 “:” 과 이벤트 명을 같이 써 주면 됩니다. 그러니까 a :hover 형태가 되는 것이죠. a 태그의 4가지 이벤트에 대한 설명입니다.
¤ a:link : 한번도 방문하지 않은 링크 상태
¤ a:visited : 방문 후 링크 상태
¤ a:hover : 마우스를 올려 놓았을 때
¤ a:active : 마우스를 클릭한 후 놓지 않고 있을 때
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e78e52;
}
a:link{color: black;}
a:visited{color: green;}
a:hover{color: blue;}
a:active{color: red;}
</style>
</head>
<body>
<p><a href="http://mainia.tistory.com"> 녹두장군 블로그</a></p>
<p><a href="http://www.naver.com"> 네이버 바로가기 </a></p>
<p><a href="http://www.aaa.com"> a:link 방문한적 없는 링크 </a></p>
</body>
</html>
▼ 네이버와 저의 블로그는 익스플로러 로그에 방문 기록이 있기 때문에 visited 가 적용되어서 녹색으로 표현이 되었습니다. 그리고 방문한 기록이 없는 마지막 링크는 검은색이 되었죠.
▼ 링크에 마우스를 가져가게 되면 hover 이벤트가 발생하게 됩니다. 그럼 CSS 에서 설정한 색상 값 blue 가 적용됩니다.
▼ 마지막으로 마우스를 클릭한 상태에서 놓지 않으면 active 이벤트가 발생합니다. 그래서 빨간색이 적용되었습니다. 이렇게 가상 클래스는 태그의 여러 이벤트 마다 별도의 CSS 설정이 가능합니다.
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
|---|---|
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
