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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 | print 'hello world!'<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>Insert title here</title>
<!-- [if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<style>
body
{
width: 680px;
margin: 0px auto;
}
header
{
width: 680px;
}
header p
{
text-align:right;
font-size:10px;
}
header h1
{
text-align:center;
color:skyblue;
font-size:45px;
text-shadow:5px 5px 5px black;
}
header nav
{
background-color:skyblue;
border-top:2px double darkblue;
border-bottom:2px double darkblue;
}
header nav li
{
list-style-type: none;
display: inline;
margin-left: 50px;
}
section
{
width:680px;
}
#mainImage
{
width:300px;
float:left;
/*height: 400px;*/
}
#mainImage img
{
width: 300px;
/*height: 400px;*/
}
#mainMenu
{
float: left;
}
header nav a
{
font-size: 12px;
text-decoration: none;
color: black;
font-weight: bold;
}
header nav a:hover
{
color:red;
}
footer
{
clear:left;/*float를 지정하면 그 이후 모든 객체들이 float
된다 그러므로 float의 영향을 해제해야 한다.위에는
left로 지정하였으므로 left를 해제한다.*/
width: 680px;
text-align: center;
}
</style>
</head>
<body>
<header>
<p>
회원가입 | 로그인
</p>
<h1>
JSP study site
</h1>
<nav><!-- 메뉴는 네비게이션 -->
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
profile
</a>
</li>
<li>
<a href="#">
WebFolder
</a>
</li>
<li>
<a href="#">
BBS
</a>
</li>
<li>
<a href="#">
GuestBook
</a>
</li>
</ul>
</nav>
<hr>
</header>
<!-- img 태그의 alt는 필수 속성이다. 스크린 리더가 읽어옴 -->
<section><!-- 여기서 부터는 컨텐츠 영역이다.라고 표기함 -->
<article id="mainImage"><!-- 실제 컨텐츠를 표기한다. -->
<img src="img/main.jpg" alt="메인 이미지">
</article>
<article id="mainMenu">
<h2>
반갑습니다. 여러분!
</h2>
<ul>
<li>
앞으로 수업내용 여기에 추가..
</li>
</ul>
</article>
</section>
<footer>
<hr>
<p>
Copyright ⓒ JaeMin. All rights reserved.
</p>
</footer>
</body>
</html>
|
댓글