-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcharacter.html
340 lines (267 loc) · 9.83 KB
/
character.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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>캐릭터</title>
<link rel="stylesheet" type="text/css" href="css/character.css" /> <!-- 외부 스타일 시트 -->
</head>
<body>
<h2 id="first" style="color:red">캐릭터</h2> <!-- 페이지의 맨 위를 first로 지정하여 top을 이용해 위로 끌어올림 -->
<center> <!-- 중앙 정렬 -->
<div id="movies">
<div><a href="#어벤져스">
<img style="width:100%;" src="image/타이틀/어벤져스.png"></a></div>
<div><a href="#가오갤">
<img style="width:100%;" src="image/타이틀/가디언즈 오브 갤럭시.png"></a></div>
<div><a href="#블랙팬서">
<img style="width:100%;" src="image/타이틀/블랙팬서.png"></a></div>
<br>
<div><a href="#닥터스트레인지">
<img style="width:100%;" src="image/타이틀/닥터 스트레인지.png"></a></div>
<div><a href="#스파이더맨">
<img style="width:100%;" src="image/타이틀/스파이더맨.png"></a></div>
<div><a href="#앤트맨">
<img style="width:100%;" src="image/타이틀/앤트맨.png"></a></div>
<br>
<div><a href="#캡틴마블">
<img style="width:100%;" src="image/타이틀/캡틴 마블.png"></a></div>
</div> <!-- img를 이용해 div에 이미지를 넣고 그 이미지는 image폴더에서 가져온다 --> <!-- a 태그를 이용하여 div 부분을 클릭 시 위치로 이동한다 -->
</center>
<!-- ====================================================================== -->
<hr><center> <!-- hr태그로 선을 나누어 준다 -->
<p id="어벤져스">어벤져스</p> <!-- 이미지을 크게 나누는 제목 --> <!-- id를 설정 + 위의 a태그를 이용하여 해당 부분으로 온다 -->
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/아이언맨.png"> <!-- 이미지를 해당 경로에서 가져온다 -->
<p>아이언<br>맨</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/캡틴 아메리카.png">
<p>캡틴<br>아메리카</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/블랙위도우.png">
<p>블랙<br>위도우</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/호크아이.png">
<p>호크<br>아이</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/토르.png">
<p>토르<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/헐크.png">
<p>헐크<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/팔콘.png">
<p>팔콘<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/비젼.png">
<p>비젼<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/스칼렛 위치.png">
<p>스카렛<br>위치</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/워머신.png">
<p>워<br>머신</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/어벤져스/윈터솔져.png">
<p>윈터<br>솔져</p>
</div>
<div id="red"> <!-- 이미지를 해당 경로에서 가져온다 / id를 red로 설정 -->
<img style="width:100%;" src="image/등장인물/빌런/로키.png">
<p>로키<br> </p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/울트론.png">
<p>울트론<br> </p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/타노스.png">
<p>타노스<br> </p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="가오갤">가디언즈 오브 갤럭시</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/가모라.png">
<p>가모라</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/그루트.png">
<p>그루트</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/네뷸라.png">
<p>네뷸라</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/드랙스.png">
<p>드랙스</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/로켓.png">
<p>로켓</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/맨티스.png">
<p>맨티스</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/스타로드.png">
<p>스타로드</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/가오갤/욘두.png">
<p>욘두</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/로난.png">
<p>로난</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/에고.png">
<p>에고</p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="닥터스트레인지">닥터 스트레인지</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/닥터스트레인지/닥터스트레인지.png">
<p>닥터스트레인지</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/닥터스트레인지/모르도.png">
<p>모르도<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/닥터스트레인지/에이션트 원.png">
<p>에이션트<br>원</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/닥터스트레인지/웡.png">
<p>웡<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/닥터스트레인지/팔머.png">
<p>팔머<br> </p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/도르마무.png">
<p>도르마무<br> </p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/케실리우스.png">
<p>케실<br>리우스</p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="블랙팬서">블랙팬서</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/블랙팬서/나키아.png">
<p>네드</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/블랙팬서/블랙팬서.png">
<p>블랙팬서</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/블랙팬서/슈리.png">
<p>슈리</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/블랙팬서/오코예.png">
<p>오코예</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/킬몽거.png">
<p>킬몽거</p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="스파이더맨">스파이더맨</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/스파이더맨/네드.png">
<p>나키아<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/스파이더맨/스파이더맨.png">
<p>스파이더<br>맨</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/벌쳐.png">
<p>벌쳐<br> </p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="앤트맨">앤트맨</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/앤트맨/빌포스터.png">
<p>빌포스터<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/앤트맨/앤트맨.png">
<p>앤트맨<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/앤트맨/와스프.png">
<p>와스프<br> </p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/앤트맨/재닛 반 다인.png">
<p>재닛반<br>다인</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/앤트맨/행크핌.png">
<p>행크핌<br> </p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/옐로우 자켓.png">
<p>옐로우<br>자켓</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/고스트.png">
<p>고스트<br> </p>
</div>
</div>
<!-- ====================================================================== -->
<hr>
<p id="캡틴마블">캡틴 마블</p>
<div id="character">
<div>
<img style="width:100%;" src="image/등장인물/히어로/캡틴마블/닉퓨리.png">
<p>닉퓨리</p>
</div>
<div>
<img style="width:100%;" src="image/등장인물/히어로/캡틴마블/캡틴마블.png">
<p>캡틴마블</p>
</div>
<div id="red">
<img style="width:100%;" src="image/등장인물/빌런/스크럴.png">
<p>스크럴</p>
</div>
</div></center>
<div id="top"> <!-- 맨위로 이동하는 부분을 만들어 긴 글에서 보다 쉽게 맨 위로 올라온다 -->
<a href="#first"> <!-- 이미지는 해당 경로에서 가져온다 / first로 이동할 수 있는 a태그 -->
<img src="image/scroll/scroll_up.jpg" style="width: 100%; height: 100%" />
</a>
</div>
</body>
</html>