11주차 - jsp&css (7) 가상 클래스
2022. 9. 13. 19:34ㆍjsp/css
이번의 목표
01. <a>에 가상 클래스를 만들고 사용해보자.
가상 클래스를 이용하여 마우스 이벤트에 따른 링크의 변화를 확인해 볼것입니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05</title>
<style type="text/css">
/* 가상 클래스 */
a:link{color: pink; text-decoration: none;}
a:visited {color: blue;}
a:hover {text-decoration: overline;color: black; font-size: 20px;}
a:active {background-color: yellow;}
}
</style>
</head>
<body>
<h2>Pseudo Class</h2>
<p><a href="ex05.jsp" target="_blink">test</a> : 마우스 이벤트에 따른 링크의 변화</p>
<p><a href="ex08.jsp" target="_blink">test</a> : 마우스 이벤트에 따른 링크의 변화</p>
<hr>
link : 웹 문서에서 사용자가 방문하지 않았던 곳을 표시한다<br>
visited : 웹 문서에서 사용자가 방문한 곳을 표시한다.<br>
hover : 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타낸다.<br>
active : 웹 문서에서 사용자가 링크를 클릭하는 순간을 나타낸다.<br>
</body>
</html>02. 실행 화면
①방문하지 않은 문서인 test는 분홍색 글씨로 출력되고, 이미 방문한적이 있는 문서는 파란색으로 출력되는 것을 확인 할 수 있습니다.
②마우스를 올렸을 때에 검은색 글씨, 글씨 크기의 변화, overline이 적용되는 것을 확인할 수 있습니다.
③마우스를 클릭했을 때에 background-color에 노란색이 생기는 것을 확인 할 수 있습니다.
④아래쪽의 test와 연동된 문서를 접속하고 나면 분홍색 글씨에서 파란색 글씨로 바뀐 것을 확인할 수 있습니다.
가상 클래스에 대해서는 아직 개념적인 부분을 완벽하게 이해하지 못해 설명이 많이 빈약한 부분 죄송합니다.
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (9) overflow (0) | 2022.09.13 |
|---|---|
| 11주차 - jsp&css (8) 가상 클래스 (0) | 2022.09.13 |
| 11주차 - jsp&css (6) 자식 객체에 스타일 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (5) [] 속성을 이용하여 스타일을 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (4) .class class를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |