-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdetail.html
546 lines (538 loc) · 25.3 KB
/
detail.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
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="detail.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Source+Code+Pro:wght@200&display=swap"
rel="stylesheet"
/>
<script src="detail.js"></script>
<title>月間金張</title>
</head>
<body>
<div class="wrapper">
<!-- 왼쪽 내비게이션 바와 오른쪽 콘텐츠 부분을 div 영역으로 각각 지정함 -->
<!-- 왼쪽 영역 -->
<div class="wrapper_nav">
<!-- 내비게이션 제목 로고 -->
<div class="wrapper_nav_title">
<a href="main.html">
<img class="nav_title_icon" src="img_detail/logo.png" alt="LOGO" />
</a>
</div>
<!-- 내비게이션 접기 버튼 -->
<div id="wrapper_nav_button" onclick="sideNavFolding()">
<img
id="sidenav_button_icon"
src="img_detail/menu-bar.png"
alt="Menu"
/>
</div>
<!-- 내비게이션 ul li -->
<ul class="wrapper_nav_ul">
<!-- 레퍼런스 소개 -->
<li class="sidenav" id="sidenav_1">
<a href="#content_wrapper_1">
<span class="sidenav_frame">
<img
class="sidenav_frame_icon"
id="sidenav_frame_icon_1"
src="img_detail/presentation.png"
alt="Introduction to Reference"
/>
</span>
<span class="sidenav_lang">
<div class="sidenav_ko">레퍼런스 소개</div>
<div class="sidenav_en">Introduction to references</div>
</span>
</a>
</li>
<!-- 피드백 -->
<li class="sidenav" id="sidenav_2">
<a href="#content_wrapper_2">
<div class="sidenav_frame">
<img
class="sidenav_frame_icon"
id="sidenav_frame_icon_2"
src="img_detail/feedback.png"
alt="Reference Feedback"
/>
</div>
<span class="sidenav_lang">
<div class="sidenav_ko">피드백</div>
<div class="sidenav_en">Reference Feedback</div>
</span>
</a>
</li>
<!-- 프로토타입 -->
<li class="sidenav" id="sidenav_3">
<a href="#content_wrapper_3">
<div class="sidenav_frame">
<img
class="sidenav_frame_icon"
id="sidenav_frame_icon_3"
src="img_detail/dimensions.png"
alt="Prototype"
/>
</div>
<span class="sidenav_lang">
<div class="sidenav_ko">프로토타입</div>
<div class="sidenav_en">Prototype</div>
</span>
</a>
</li>
<!-- 개발 노트 -->
<li class="sidenav" id="sidenav_4">
<a href="#content_wrapper_4">
<div class="sidenav_frame">
<img
class="sidenav_frame_icon"
id="sidenav_frame_icon_4"
src="img_detail/idea.png"
alt="Developers' Tips"
/>
</div>
<span class="sidenav_lang">
<div class="sidenav_ko">개발 노트</div>
<div class="sidenav_en">Developers' Tips</div>
</span>
</a>
</li>
<!-- 체험하기 -->
<li class="sidenav" id="sidenav_5">
<a href="#content_wrapper_5">
<div class="sidenav_frame">
<img
class="sidenav_frame_icon"
id="sidenav_frame_icon_5"
src="img_detail/user-experience.png"
alt="Try it!"
/>
</div>
<span class="sidenav_lang">
<div class="sidenav_ko">체험하기</div>
<div class="sidenav_en">Try it!</div>
</span>
</a>
</li>
</ul>
<div class="sidenav_blank"></div>
<!-- 내비게이션 SNS -->
<div class="sidenav_sns">
<!-- 하빈의 인스타그램 -->
<div class="sidenav_sns_frame">
<a
href="https://www.instagram.com/kim._.going/"
target="_blank"
title="하빈의 인스타그램"
>
<img
class="sidenav_sns_icon"
id="sidenav_sns_icon_1"
src="img_detail/instagram.png"
alt="@kim._.going"
/>
<div class="sidenav_sns_text" id="sidenav_sns_text_1">
@kim._.going
</div>
</a>
</div>
<!-- 우영의 인스타그램 -->
<div class="sidenav_sns_frame">
<a
href="https://www.instagram.com/foryxxng/"
target="_blank"
title="우영의 인스타그램"
>
<img
class="sidenav_sns_icon"
id="sidenav_sns_icon_2"
src="img_detail/instagram.png"
alt="@foryxxng"
/>
<div class="sidenav_sns_text" id="sidenav_sns_text_2">
@foryxxng
</div>
</a>
</div>
<!-- 월간김장 깃허브 -->
<div class="sidenav_sns_frame">
<a
href="https://github.com/KIM-GOING/Monthly-Kim-Jang"
target="_blank"
title="月間金張 GITHUB 바로가기"
>
<img
class="sidenav_sns_icon"
id="sidenav_sns_icon_3"
src="img_detail/github.png"
alt="MonthlyKJ-github"
/>
<div class="sidenav_sns_text" id="sidenav_sns_text_3">GITHUB</div>
</a>
</div>
</div>
</div>
<!-- 오른쪽 영역 -->
<div class="wrapper_content">
<!-- 콘텐츠 영역의 제목 부분 -->
<div class="wrapper_content_nav">
<img
class="content_nav_icon"
src="img_detail/cherry-blossom.png"
alt="flower"
/>
<span class="content_nav_title"
><strong>2023.02. 포트폴리오 사이트 제작하기</strong></span
>
</div>
<!-- 실제 내용이 보여지는 부분 -->
<div class="wrapper_content_content">
<div class="content_background"></div>
<!-- 참고 자료 소개 -->
<div class="content_wrapper" id="content_wrapper_1">
<div class="content_wrapper_title">
<img
class="wrapper_title_icon"
src="img_detail/presentation.png"
alt="Introduction to Reference"
/>
<div class="wrapper_title_ko">
<strong> 레퍼런스 소개 </strong>
</div>
<div class="wrapper_title_en">Introduction to Reference</div>
</div>
<div class="content_wrapper_caption">
<!-- 여기를 수정해주세요 -->
<p class="content_wrapper_p">
📌 2월 프로젝트 '포트폴리오 사이트 제작하기'에 참고한 자료들에
대해 분석하고 공부한 내용을 소개합니다.
</p>
</div>
<!-- 여기를 수정해주세요 -->
<div class="content_wrapper_details" id="content_wrapper_details-1">
<div class="content-in-text">
<img
id="content-in-img-1"
src="img_detail/Notion_app_logo.png"
alt="content-img"
/>
먼저 말씀드리자면, 이번 2월 프로젝트인 포트폴리오 사이트의 경우
<strong>뚜렷한 레퍼런스는 없다</strong>고 보아도 무방합니다.<br /><br />
월간 프로젝트를 기획할 때에는 매달 레퍼런스가 있고, 해당
레퍼런스에 대한 피드백을 반영하여 어떠한 형태를 개발해내는
것이었는데요. 이번 프로젝트의 경우에는 복잡하지 않은 뷰어 형태의
우리의 12개월을 간단하게 기록해 둘 웹 사이트가 필요했기 때문에
진행한 것이고, HTML과 CSS를 복습하는 차원에서 기획한
프로젝트라는 부분이 커서 따로 레퍼런스를 두진 않았습니다.
<br /><br />
그러나 레이아웃과 디자인을 구상할 때는 어느 정도 레퍼런스가
있었다고도 할 수 있겠습니다.<br /><br />
<p style="font-weight: bolder; font-size: 17px">
세부 페이지를 제작할 때
<span class="notion-code-type"> Notion</span>의 레이아웃과
디자인을 참고해서 제작했습니다!<br /><br />
</p>
Notion은 개인과 팀이 작업을 정리하고, 프로젝트에서 협업하고,
작업, 노트, 데이터베이스를 능률적인 방식으로 관리할 수 있도록
도와주는 강력한 올인원 생산성 도구입니다. <br /><br />
사용자가 페이지, 데이터베이스, 캘린더, 할 일 목록 등을 만들고
사용자 지정할 수 있다는 점이 가장 큰 강점 중 하나입니다. 사용자
친화적인 인터페이스, 드래그 앤 드롭 기능, 고급 기능을 갖춘
Notion은 개인 노트 필기부터 프로젝트 관리, 지식 관리에
이르기까지 다양한 사용 사례에 적합합니다.<br /><br />
예를 들어, 프로젝트를 진행하는 팀은 Notion을 사용해 작업, 노트,
타임라인, 진행 상황 업데이트를 위한 페이지가 포함된 프로젝트
대시보드를 만들 수 있습니다. 데이터베이스를 사용하여 예산, 팀원,
마감일, 마일스톤과 같은 프로젝트 관련 정보를 추적할 수 있습니다.
또한 Notion의 협업 기능을 통해 팀원들은 동일한 페이지와
데이터베이스에서 함께 작업하고, 피드백과 의견을 공유하며,
프로젝트의 상태를 최신 상태로 유지할 수 있습니다.
<br /><br />
또한 Notion은 일일 할 일 목록 작성, 메모, 북마크 관리, 저널링 등
개인 생산성 향상에도 사용할 수 있습니다. Notion의 유연성과
사용자 지정 옵션은 다양한 사용 사례에 적합하며, 사용자가
워크플로를 간소화하고 체계적으로 정리하는 데 도움이 될 수
있습니다.<br /><br />
<p style="font-size: smaller; color: gray">
(Notion을 완벽하게 따라하기에는 실력이 많이 부족합니다. 아직
저희는 웹 개발의 생기초인 HTML과 CSS 코드를 작성할 수 있는
수준이고, 그마저도 공부하는 중이라서 많이 부족한 점이
보입니다만 앞으로 공부 하면서 Notion Clone Coding에도
도전해보면 좋을 것 같습니다.)<br /><br />
</p>
</div>
</div>
<br />
<hr class="division" />
</div>
<!-- 참고 자료 피드백 -->
<div class="content_wrapper" id="content_wrapper_2">
<div class="content_wrapper_title">
<img
class="wrapper_title_icon"
src="img_detail/feedback.png"
alt="Reference Feedback"
/>
<div class="wrapper_title_ko">
<strong> 피드백 </strong>
</div>
<div class="wrapper_title_en">Reference Feedback</div>
</div>
<div class="content_wrapper_caption">
<!-- 여기를 수정해주세요 -->
<p class="content_wrapper_p">
📌 2월 프로젝트 '포트폴리오 사이트 제작하기'에 참고한 자료들에
대한 피드백을 소개합니다.
</p>
</div>
<!-- 여기를 수정해주세요 -->
<div class="content_wrapper_details" id="content_wrapper_details-2">
레퍼런스에 많은 비중을 두고 제작한 웹 페이지가 아니기 때문에
피드백은 생략합니다.
</div>
<hr class="division" />
</div>
<!-- 프로토타입 -->
<div class="content_wrapper" id="content_wrapper_3">
<div class="content_wrapper_title">
<img
class="wrapper_title_icon"
src="img_detail/dimensions.png"
alt="Prototype"
/>
<div class="wrapper_title_ko">
<strong> 프로토타입 </strong>
</div>
<div class="wrapper_title_en">Prototype</div>
</div>
<div class="content_wrapper_caption">
<!-- 여기를 수정해주세요 -->
<p class="content_wrapper_p">
📌 2월 프로젝트 '포트폴리오 사이트 제작하기'의 프로토타입을
소개합니다.
</p>
</div>
<!-- 여기를 수정해주세요 -->
<div class="content_wrapper_details" id="content_wrapper_details-3">
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-2"
src="img_detail/image 7.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-3"
src="img_detail/image 8.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-4"
src="img_detail/image 9.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-5"
src="img_detail/image 10.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-6"
src="img_detail/image 11.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-7"
src="img_detail/image 12.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
<div class="content-in-wrapper">
<img
class="content-in-img"
id="content-in-img-8"
src="img_detail/image 13.png"
alt="content-img"
onclick="window.open(this.src)"
/>
<div class="content-in-text">
<span class="notion-code-type" style="font-weight: bolder"
>페이지에 대한 설명</span
>
월간 김장 웹 사이트에 처음 들어오시면 보이는 화면입니다. 화면
중앙 수직선을 기준으로 '월간' 그리고 '김장' 으로 나누어
구성하였습니다. <br /><br />수직선에는 12개의 point 가
있습니다. 12개의 수직선은 매달 프로젝트가 진행될 때마다
아이콘으로 채워질 것입니다. 이때, 커서를 point 에 hover 하면
point 의 크기가 커지는 강조 효과를 주었습니다.<br /><br />'월간'은
월간 프로젝트에 대한 소개, '김장'은 프로젝트 주인에 대한
설명을 하고 있습니다.<br /><br />
</div>
</div>
</div>
<hr class="division" />
</div>
<!-- 개발 노트 -->
<div class="content_wrapper" id="content_wrapper_4">
<div class="content_wrapper_title">
<img
class="wrapper_title_icon"
src="img_detail/idea.png"
alt="Developers' Tips"
/>
<div class="wrapper_title_ko">
<strong> 개발 노트 </strong>
</div>
<div class="wrapper_title_en">Developers' Tips</div>
</div>
<div class="content_wrapper_caption">
<!-- 여기를 수정해주세요 -->
<p class="content_wrapper_p">
📌 2월 프로젝트 '포트폴리오 사이트 제작하기'에서 중요하게 사용된
개발 팁을 소개합니다.
</p>
</div>
<!-- 여기를 수정해주세요 -->
<div class="content_wrapper_details" id="content_wrapper_details-4">
개발 팁 적기
</div>
<hr class="division" />
</div>
<!-- 직접 사용해보세요! -->
<div class="content_wrapper" id="content_wrapper_5">
<div class="content_wrapper_title">
<img
class="wrapper_title_icon"
src="img_detail/user-experience.png"
alt="Try it!"
/>
<div class="wrapper_title_ko">
<strong> 체험하기 </strong>
</div>
<div class="wrapper_title_en">Try it!</div>
</div>
<div class="content_wrapper_caption">
<!-- 여기를 수정해주세요 -->
<p class="content_wrapper_p">
📌 2월 프로젝트 '포트폴리오 사이트 제작하기'를 직접
경험해보세요!
</p>
</div>
<!-- 여기를 수정해주세요 -->
<div class="content_wrapper_details" id="content_wrapper_details-5">
이번 프로젝트의 경우 포트폴리오 사이트 그 자체가 결과물이기 때문에
생략합니다. 앞으로는 해당 페이지에 월별 프로젝트를 직접 체험해볼
수 있도록 할 예정입니다.
</div>
</div>
</div>
<!-- footer 영역 -->
<div class="wrapper_content_footer"></div>
</div>
</div>
</body>
</html>