3층 1구역 - 개발의 장/JSP

JSP - 가상 클래스 (2022-09-13)

상이태상 2022. 9. 13. 22:28

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex07</title>
<!-- http://localhost:8085/cssExam/exams/ex07.jsp -->
<style type="text/css">
        /* 가상 클래스 */
        a:link {color: pink; text-decoration: none;}
        a:visited {color: blue;}
        a:hover {text-decoration: overline; color: black;}
        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>
cs

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex08</title>
<!-- http://localhost:8085/cssExam/exams/ex08.jsp -->
<style type="text/css">
        div.d1{border: 3px solid red; width: 400px; padding: 10px;}
        div.d1:hover{background-color: yellow;}
        div.d2{border: 10px double green; width: 400px;}
        div.d2:hover{background-color: green;}
        /* solid : 실선, double : 두줄선, dotted : 점선 */
</style>
</head>
<body>
    <h2>Pseudo Class</h2>
    속성 값 : dotted, solid, double<br>
    
    <div class = "d1">
        <h3 style="background: gold">가상 클래스 1 영역</h3>
        마우스 위치에 따른 박스의 스타일 변화.
    </div>
    
    <div class = "d2">
        <h3>가상 클래스 2 영역</h3> 마우스 위치에 따른 박스의 스타일 변화.
    </div>
</body>
</html>
cs
저작자표시 (새창열림)