-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyangsanLib.html
426 lines (413 loc) · 13.2 KB
/
yangsanLib.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
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>경상남도교육청 양산도서관</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/ysLIbHeader.css">
<link rel="stylesheet" href="css/ysLibNavigation.css">
<link rel="stylesheet" media="screen" href="css/ysLIbHeader.css">
</head>
<body>
<header>
<a href="yangsanLib.html" class="headerMenu">처음으로</a>
<hr>
<a href="yangsanLibLogin.html" class="headerMenu">로그인</a>
<hr>
<a href="libCreateAccount.html" class="headerMenu"> 회원가입</a>
<hr>
<a href="#" class="headerMenu">
<p onclick="alert('아직 구현되지 않은 내용입니다.')">사이트맵</p>
</a>
<hr>
<a href="#" class="headerMenu">
<p onclick="alert('아직 구현되지 않은 내용입니다.')">통합공공도서관</p>
</a>
<div class="headerBlank"></div>
</header>
<!-- 마우스 올리면 색 변하고 다른 작은 메뉴들 나오게 -->
<!-- 여러 시도를 해봤는데 이 이상은 못하겠어요 -->
<!-- 만약에 더 좋은 방법이 있다면 알려주시면 감사하겠습니다. -->
<!-- 심지현님 feedback
서브메뉴에 대해서 피드백을 요청하신 거 같은데 굉장히 잘 만드신 거 같아요.
만든 것 중에서 조금 아쉽다면 리스트와 a태그를 통해서 만드셨다면 이라는 생각이 들기는 합니다.
list도 중첩이 가능하니까 서브메뉴 같은 경우에는 리스트 안의 리스트를 사용해서 한 번 구상을 해보시는 것도 괜찮은 것 같습니다.
그리고 지금 네비바 hover 했을 때 글자 위에 딱 가야 글자 색이 변하는 걸 볼 수가 있던데 글자 살짝 옆에 놓으면 서브메뉴는 나오지만 글자 색은 안나오는 것을 볼 수 있습니다.
그런 경우도 있으니, 네비바 hover 범위를 어디로 잡아야하나? 도 한 번 생각해 보시면 좋을 거 같습니다.
-->
<nav>
<div class="nav1">
<div class="mobileCard">
<span>
<p>모바일<br>회원증</p>
</span>
</div>
<a href="yangsanLib.html"><img src="images/libraryLogo.png" class="libraryLogo"></a>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="bigNavMenu">
<div class="navMenu">
<div>
<h3>이용안내</h3>
</div>
<div class="navMenuInside">
<ul>
<li>이용시간/휴관일</li>
<li>자료이용안내</li>
<li>실별안내</li>
<li>오시는길</li>
<li>책이음 이용안내</li>
</ul>
</div>
</div>
<div class="navMenu">
<div>
<h3>자료찾기</h3>
</div>
<div class="navMenuInside">
<ul>
<li>자료찾기</li>
<li>신착자료</li>
<li>추천자료</li>
<li>구독간행물</li>
<li>희망도서신청</li>
<li>내 서재</li>
<li>상호대차</li>
</ul>
</div>
</div>
<div class="navMenu">
<a href="#" class="navMenu3">
<h3 onclick="alert('아직 구현되지 않은 내용입니다.')">전자도서관</h3>
</a>
</div>
<div class="navMenu">
<div>
<h3>독서문화</h3>
</div>
<div class="navMenuInside">
<ul>
<li>이달의 행사</li>
<li>독서동아리</li>
<li>독서프로그램</li>
<li>독서치유</li>
<li>도서관과행복한동행</li>
<li>책이야기나눔터</li>
</ul>
</div>
</div>
<div class="navMenu">
<div>
<h3>학교도서관지원</h3>
</div>
<div class="navMenuInside">
<ul>
<li>학교도서관지원소개</li>
<li>지원신청</li>
<li>묻고답하기</li>
<li>자료실</li>
</ul>
</div>
</div>
<div class="navMenu">
<div>
<h3>평생학습</h3>
</div>
<div class="navMenuInside">
<ul>
<li>프로그램안내</li>
<li>프로그램신청</li>
<li>학습동아리</li>
</ul>
</div>
</div>
<div class="navMenu">
<div>
<h3>열린마당</h3>
</div>
<div class="navMenuInside">
<ul>
<li>알려드립니다.</li>
<li>행사공지</li>
<li>열린소리함</li>
<li>자주묻는질문</li>
<li>청소년 자원봉사</li>
<li>공개자료실</li>
<li>정보공개/공공데이터개방</li>
</ul>
</div>
</div>
<div class="navMenu">
<div>
<h3>도서관소개</h3>
</div>
<div class="navMenuInside">
<ul>
<li>인사말</li>
<li>연혁</li>
<li>조직현황</li>
<li>시설현황</li>
<li>자료현황</li>
<li>자체발간자료</li>
<li>소식지"나루터"</li>
</ul>
</div>
</div>
</div>
</nav>
<main>
<div class="backgroundImage">
<div class="search">
<input type="text" class="text" size="30">
<input type="button" value="통합검색" class="button">
</div>
<div class="language">
<p class="language1">꿈을 키우는 독서 미래를 여는</p>
<p class="language2">경상남도교육청 양산도서관</p>
</div>
</div>
<section class="first">
<div class="announce">
<div class="announce1">
<h3>공지사항</h3>
<i class="fa-solid fa-plus"></i>
</div>
<div class="line"></div>
<table class="table1">
<tr>
<td>[행사]2 양산도서관 겨울 독서교실...</td>
<td>12.04</td>
</tr>
<tr>
<td>[행사] (내 마음의 휴식) 필사하기 좋은 날</td>
<td>12.03</td>
</tr>
<tr>
<td>[행사] 도서관 가족에게 권하는 12월의 책</td>
<td>12.01</td>
</tr>
<tr>
<td>[행사] 12월 주제가 있는 북커넥트(책을:당...</td>
<td>12.01</td>
</tr>
<tr>
<td>[행사] [전시] 갤러리누리봄 [엄마와 딸이...</td>
<td>11.30</td>
</tr>
<tr>
<td>[공지] <2024년 12월 도서관 휴관 안내>
</td>
<td>11.28</td>
</tr>
</table>
</div>
<div class="sixMenu">
<div class="myLibrary">
<h3>나의 도서관</h3>
<div class="line"></div>
<p>연기, 예약, 희망도서</p>
</div>
<div class="electricLibrary">
<h3>전자도서관</h3>
<div class="line"></div>
<p>전자책, 오디오북, 이러닝</p>
</div>
<div class="selectProgram">
<h3>프로그램 신청</h3>
<div class="line"></div>
<p>평생학습, 동아리 행사</p>
</div>
<div class="selectProgramStudy">
<h3>평생학습프로그램</h3>
<div class="line"></div>
<p>일반, 취약계층, 어린이</p>
</div>
<div class="oneLibraryOneBook">
<h3>한 도서관 한 책읽기</h3>
<div class="line"></div>
<p>여름을 한 입 베어물었더니</p>
<p>/ 이꽃님</p>
<p>편의점 도깨비 차차/송방순</p>
</div>
<div class="bookClub">
<h3>독서동아리</h3>
<div class="line"></div>
<p>사임당, 리르, 글소리</p>
<p>책나무</p>
</div>
</div>
</section>
<section class="second">
<div class="educationMinistry">
<img src="images/educationAlarm.jpg">
</div>
<!-- 책 아무거나 돌아가게 -->
<div class="newArrive">
<div class="container">
<h3>신착자료</h3>
<i class="fa-solid fa-plus"></i>
</div>
<div class="line"></div>
<div class="books">
<img src="images/book.gif" class="book1">
<img src="images/book.gif" class="book2">
<img src="images/book.gif" class="book3">
</div>
</div>
<div class="table">
<h3>이용시간 및 휴관일 안내</h3>
<table>
<tr class="blueTable">
<td>층별</td>
<td>구분</td>
<td>이용시간</td>
<td>휴관일</td>
</tr>
<tr>
<td rowspan="2">1층</td>
<td>어린이 자료실</td>
<td rowspan="5">
화~일요일
<br>
/09:00~18:00
</td>
<td rowspan="7">
* 정기휴관일
<br>
<div class="important">
(매주 월요일 / 자유학습실 :
<br>
매월 마지막주 월요일)
</div>
<br>
* 도서관장이 지정한 날
<br>
* 일요일을 제외한 법정공휴일
<br>
<div class="important">
* (단, 일요일이 법정공휴일과
<br>
<strong>겹치는 경우</strong>는
<strong>무관</strong>)
</div>
</td>
</tr>
<tr>
<td>유아자료실</td>
</tr>
<tr>
<td rowspan="2">2층</td>
<td>종합자료실</td>
</tr>
<tr>
<td>디지털존</td>
</tr>
<tr>
<td rowspan="3">3층</td>
<td>노트북존</td>
</tr>
<tr>
<td rowspan="2">자유학습실</td>
<td>월요일 <br> / 09:00~18:00</td>
</tr>
<tr>
<td>화~일요일 <br> / 09:00~21:00</td>
</tr>
</table>
<div class="dayOff">
<i class="fa-solid fa-calendar-days"></i>
<p><b>12월 휴관일</b></p>
</div>
</div>
</section>
<section class="second2">
<div class="subMenu">
<div class="libraryLoan">
<div class="icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="say">
<p><b>상호대차</b></p>
</div>
</div>
<div class="askToLibrarian">
<div class="icon">
<i class="fa-solid fa-book"></i>
</div>
<div class="say">
<p><b>사서에게<br>물어보세요</b></p>
</div>
</div>
<div class="bookSea">
<div class="icon">
<i class="fa-solid fa-film"></i>
</div>
<div class="say">
<p><b>책바다</b></p>
</div>
</div>
<div class="bookWing">
<i class="fa-solid fa-book-open-reader"></i>
<p><b>책나래</b></p>
</div>
<div class="teenagerVolunteer">
<i class="fa-solid fa-building"></i>
<p><b>청소년<br>자원봉사</b></p>
</div>
<div class="howToCome">
<i class="fa-solid fa-map-location-dot"></i>
<p><b>오시는 길</b></p>
</div>
<div class="shortCut">
<h3>바로가기</h3>
<div class="sns">
<div class="kakaoTalk">
<i class="fa-solid fa-comment"></i>
<p><b>카카오톡 채널</b></p>
</div>
<div class="instagram">
<i class="fa-brands fa-instagram"></i>
<p><b>인스타그램</b></p>
</div>
</div>
</div>
</div>
</section>
<section class="third">
<div class="word">
<p>행정서비스현장</p>
<hr>
<p class="important">개인정보처리방침</p>
<hr>
<p>정보공개</p>
<hr>
<p>조직도</p>
</div>
</section>
</main>
<footer>
<div class="image">
<img src="images/libraryLogo.png">
</div>
<div class="ect">
<p>(50604)경상남도 양산시 물금읍 신주2길 24(경상남도 양산시 물금읍 범어리 2673-2)</p>
<p>대표전화 : 055)385-7004, 055)385-7035 / 팩스 055-385-7006</p>
<p>ⓒ Copyright ⓒ yangsan public library. all rights reserved.</p>
</div>
<div class="site">
<select>
<option>관련 사이트</option>
<option>경상남도 교육청</option>
<option>양산 교육청</option>
<option>국가 전자 도서관</option>
<option>기타 등등...</option>
</select>
<input type="button" value="이동" size="10" class="button">
</div>
</footer>
</body>
</html>