-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhomework2.html
108 lines (104 loc) · 3.01 KB
/
homework2.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 학습</title>
<style>
header > h1{
text-shadow : 3px 3px 3px white;
color : #ff3399;
font-family : times new roman;
}
header{
width : 100%;
height : 120px;
text-align : center;
background-image : linear-gradient(45deg,yellow,lime,#ff3399);
padding-top : 5px;
}
nav > a{
margin : 70px;
text-decoration : none;
}
nav > a:hover{
font-weight : bold;
}
section > article{
width : 70%;
border : 1px dotted #ff3399;
border-radius : 5px;
margin : 30px auto;
padding-left : 15px;
}
img:hover{
opacity : 0.5;
}
div{
position:relative;
z-index:1;
}
div:after{
background-image:url('http://image14.hanatour.com/uploads/2018/10/%E1%84%89%E1%85%A1%E1%84%8C%E1%85%B5%E1%86%AB_2017__9__29__%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_7_54_19_(2).jpg');
top:0;
left:0;
postion:absolute;
background-size:100%;
opacity:0.5!important;
filter:alpha(opacity=50);
z-index:-1;
content:"";
width:100%;
height:100%;
}
</style>
</head>
<body>
<div>
<header>
<h1>HTML5 학습</h1>
<nav>
<a href="https://www.w3.org/">W3C</a>
<a href="https://www.w3schools.com/">W3SCHOOLS</a>
<a href="https://jquery.com/">jQuery</a>
</nav>
</header>
<section style="text-align=center;">
<article>
<h2 style="color : #cc0099;">나의 소개</h2>
<ul>
<li>이름 : 황지원</li>
<li>별명 : 황소개구리</li>
<li>관심기술 : JavaScript</li>
<li>취미 : 축구경기 관람</li>
</ul>
</article>
<article>
<h2 style="color : lime;">올해 재미있게 한 게임</h2>
<table border="1px" style="text-align : center; margin-bottom : 8px; border-collapse : collapse;">
<tr style="background-color : lime;"><th>제목</th><th>장르</th></tr>
<tr><td>배틀그라운드</td><td>FPS,서바이벌</td></tr>
<tr><td>월드 오브 워십</td><td>전략 시뮬레이션</td></tr>
<tr><td>디아블로3</td><td>RPG</td></tr>
</table>
</article>
<article>
<h2 style="color : #3333cc;">자랑하고 싶은 <span style="color : #9900ff;">우리 동네</span>의 아름다운 곳</h2>
<p style="margin-right : 15px;">주남저수지는 광활한 늪지와 갈대가 자생하고 있는 섬이 있어 개구리밥, 붕어마름 등 각종 먹이가 풍부해 철새도래지로 천혜의 조건을 갖춘 곳이다.</p>
<figure style="text-align : center;">
<img src="https://www.changwon.go.kr/depart/img/sub03/14/festival_gallery02.jpg" width="85%" height="400">
<figcaption>주남저수지는 동아시아 최대의 저수지이다.</figcaption>
</figure>
</article>
</section>
<aside style="text-align : center;">
<video width="60%" controls>
<source src="/edu/htmlexam/exam_video.mp4">
</video>
</aside>
<br>
<footer style="text-align : center; background-color : #333333; height : 40px; padding-top:40px; width : 100%;">
<em style="color : white;">이 문서는 황지원이 HTML5와 CSS3 기술을 사용해 2020년 1월 3일에 작성하였습니다.(ver 1.0)</em>
</footer>
</div>
</body>
</html>