-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjspintro.html
69 lines (68 loc) · 3.73 KB
/
jspintro.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
<!doctype html> <!-- jspintro.html -->
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"content="width=device-width,initial-scale=1"/>
<style>
header, nav, section, article, aside, footer
{border:1px solid gray; margin:5px; padding:8px; width:1000px;}
header h2 { float:left; border:solid 1px gray; margin:0 0 0 0;}
header #headMenu { float:right; border:solid 1px gray; margin:20px 0 0 0;}
header ul { margin:0; padding:0;}
header ul li { display:inline; margin:5px;}
header img {width:990px; height:200px;}
section {width:750px; float:left;}
section section {width:725px; float:left;} section section video { position:relative; top:10px; left:100px; height:300px; width:700px;}
aside {width:221px; float:left; line-height:30px;}
footer {height:50px; clear:both;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
aside ul {margin:0; padding:0;}
aside ul li {display:block; margin:5px;}
aside ul li img {width:50px; height:50px;}
a:link { color:blue; background-color:transparent; text-decoration:none; }
a:visited { color:pink; background-color:transparent; text-decoration:none; }
a:hover { color:red; background-color:transparent; text-decoration:underline; }
a:active { color:blue; background-color:transparent; text-decoration:none; }
</style>
<title>시멘틱 학습</title>
</head>
<body>
<header>
<h2><a href="https://usrcheat.github.io/20190411/basicSemantic4.html">실습을 환영합니다</a></h2>
<ul id="headMenu">
<li>로그인|</li>
<li><a href="https://usrcheat.github.io/20190411/basicSemanticMember1.html">회원가입</a>|</li>
<li>사이트맵</li>
</ul>
<img src="https://usrcheat.github.io/Images/scene.png" alt="히말라야"/>
</header>
<nav>
<ul>
<li><a href="https://www.w3.org/TR/html5/" target="_blank">HTML5</a></li>
<li><a href="http://jquery.com/" target="_blank">jQuery</a></li>
<li><a href="https://jquerymobile.com/" target="_blank">jQuery Mobile</a></li>
<li><a href="https://usrcheat.github.io/jsp/jspintro.html">JSP</a></li>
</ul>
</nav>
<section> <!-- main -->
<section><h3 id="chapter1">오늘의 교통상황</h3>
<p>JSP 관련한 페이지 입니다. 장소는 대한민국 만세로 입니다. 많은 자동차로 붐비고 있습니다. 자동차와 자동차간 거리가 1미터 이내로 사고 우려가 높았습니다. 하지만, 다행히도 사고는 발생하지 않았습니다. 아래가 교통상황 입니다. 애국가를 같이 불러 봅시다.
1절 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
2절 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
3절 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
4절 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
<h4>만세로 교통상황</h4>
<video id="traffic" controls="controls">
<source src="http://usrcheat.github.io/video/traffic.mp4" type="audio/mp4">
브라우저가 지원하지 않거나 비디오 형식의 파일이 존재하지 않습니다.
</video><hr/>
</section>
</section> <!-- /main -->
<footer>
<p>
© 2019 Made by Korea. All right reserved.
</p>
</footer>
</body>
</html>