JSP - CSS quiz01,02 (2022-09-13)

2022. 9. 13. 22:51ㆍ3층 1구역 - 개발의 장/JSP

quiz1.jsp

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz1</title>
<style>
     ul {  background-color:pink; padding: 10px; width:300px; }
     li {  
         width:100px; list-style: none; padding: 20px; 
         text-align: center; background-color:red; 
     }
     li:hover{ background-color:#555555;  }
     a {  width:100%; text-decoration: none; color:white; }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Board</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</html>
cs

 

 

quiz2.jsp

 

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
34
35
36
37
38
39
40
41
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz02</title>
<!-- http://localhost:8085/cssExam/exams/quiz01.jsp -->
<style type="text/css">
 body{
     margin: 0px;
     padding: 0px;
     }
 ul {
     background-color:pink; 
     margin:0px; 
     width:600px; 
     height: 50px; 
     overflow: hidden;
     }
     li {  
         float: right; 
         list-style:none; 
         width: 100px; 
         height: 50px;  
         text-align: center; 
         background-color: #98E0AD;
         }
     li:hover{ background-color:#555555;  }
     a {  width:100%; text-decoration: none; color:white; }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Contant</a></li>
        <li><a href="#">Board</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</body>
</html>
cs

 

 

저작자표시 (새창열림)

'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글

JSP - position (2022-09-13)  (0) 2022.09.13
JSP - Box Model (2022-09-13)  (0) 2022.09.13
JSP - 가상 클래스 (2022-09-13)  (0) 2022.09.13
JSP - tag 와 tag의 결합 (2022-09-13)  (0) 2022.09.13
JSP - 속성, 속성값 선택자 (2022-09-13)  (0) 2022.09.13

관련글

티스토리툴바