728x90
반응형
<!-- src/main/webapp/7/event.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반응 선택자</title>
<style type="text/css">
/* h1 태그에 마우스 커서가 이동하면 글자색을 흰색으로 설정 */
h1:hover {
color : white;
}
/* h1 태그에 마우스를 클릭하면 글자색을 파랑색으로 설정 */
h1:active {
color : blue;
}
/* a 태그의 초기상태. 방문한적이 없는 링크인 경우 글자색을 파랑색으로 설정 */
a:link {
color : blue;
}
/* a 태그로 방문한적이 있는 링크인 경우 글자색을 빨강색으로 설정 */
a:visited {
color : red;
}
/* h1 클래스 속성이 a1인 태그의 글자색을 빨강색으로 설정 */
h1.a1 { /* h1 태그 중 클래스 속성이 a1인 태그 선택 */
color : red;
}
/* h1 클래스 속성이 b1인 태그의 글자색을 노란색으로 설정 */
h1.b1 { /* h1 태그 중 클래스 속성이 b1인 태그 선택 */
color : yellow;
}
div .a1 {
color : pink;
}
/*
a 태그의 클래스 속성이 default인 경우 방문한 사이트인 경우 글자색을 green
a 태그의 클래스 속성이 color인 경우 방문한 사이트인 경우 글자색을 navy
*/
a.default:visited {
color : green;
}
a.color:visited {
color : navy;
}
</style>
</head>
<body>
<h3>반응 선택자</h3>
<table>
<tr>
<td>마우스를 올리면...<br><b>기본값</b><br>
<a href="http://www.google.com" class="default">구글</a><hr>
<a href="http://www.google.com" class="color">구글</a>
</td>
</tr>
</table>
<h1 class="a1 b1">class 속성 a1 b1</h1>
<h1 class="a1">class 속성 a1</h1>
<h1 class="b1">class 속성 b1</h1>
<div class="a1">class 속성 a1</div>
<div><div class="a1">class 속성 a1</div> div 태그 </div>
</body>
</html>728x90
반응형