Repository navigation
Expand file tree
/
Copy path3rd.html
More file actions
536 lines (464 loc) · 25.8 KB
/
Copy path3rd.html
File metadata and controls
536 lines (464 loc) · 25.8 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<link rel="stylesheet" href="fontello/css/fontello.css">
</head>
<body>
<div class="ui container">
<div class="header">
<h1 class="title">
<a href="/"><img src="images/temp_1512700199325.972119536.png" alt="구글과 생활코딩이 함께하는 코딩야학"/></a>
</h1>
<div class="ui basic segment link">
<a href="https://opentutorials.org/course/3084" target="_blank"><i class="desktop icon"></i> 수업</a>
<a href="https://yah.ac/yahac3" target="_blank"><i class="tasks icon"></i> 진도표</a>
<a href="https://calendar.google.com/calendar/embed?src=MzkzYTduaTBzbWQ5YjNjaGs1ZGE1a3Rpdm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ"
target="_blank"><i class="calendar outline icon"></i> 일정</a>
</div>
</div>
<div class="ui stackable grid simple segment">
<div class="row">
<div class="four wide column">
<h2 class="ui header">코딩야학</h2>
</div>
<div class="twelve wide column">
<p>
야학. <br><br></p>
<p>요즘은 잘 안쓰는 말이죠?</p>
<p>그런데 생각해보면<br>
야학이야말로<br>
공부의 가장 긍정적인 면을 간직한 말이 아닐까요?</p>
<p>공부 할 수 없는 환경에 대한 절망감과<br>
공부로 얻을 지식에 대한 희망이<br>
충만하게 교차하는 공간이<br>
야학이 아니었을까요?<br>
</p>
<p>
이 공간에서 공부는 <br>
알려주는 사람이나<br>
배우려는 사람 모두<br>
자발적이었고,<br>
귀했을꺼예요.
</p>
<div class="ui basic center aligned segment">
<img src="images/noun_45506.png" class="illustrate small">
</div>
<p> 불행인지, 다행인지<br>
교육이 보편화되면서<br>
야학은<br>
잘 사용하지 않는 단어가 되었습니다.</p>
<div class="ui basic center aligned segment">
<img src="images/noun_1048458.png" class="illustrate small">
</div>
<p>그런데<br>
생각해보면 이제는 누구나<br>
링크를 통해서 인터넷을 서핑하고,<br>
검색엔진으로 정보를 찾아냅니다.<br>
SNS에서 토론하고<br>
동영상으로 정보를 받아들입니다.</p>
<p>그 과정에서<br>
지식을 접하고<br>
문제를 해결하는 것이<br>
일상이 되었습니다.</p>
<div class="ui basic center aligned segment">
<img src="images/noun_619591 (1).png" class="illustrate small">
</div>
<p>어쩌면<br>
야학은 사라진 것이 아니라<br>
기술의 발전 덕분에<br>
진정한 야학의 세계가 열린 것일지도 모릅니다.</p>
<div class="ui basic center aligned segment">
<img src="images/noun_806245.png" class="illustrate small">
</div>
<p>코딩야학은<br>
이 놀라운 세계를 만든<br>
컴퓨터,<br>
인터넷, <br>
웹 <br>
그리고 코딩을 <br>
알려드립니다.</p>
<p>또<br>
이 기적같은 세계에서<br>
어떻게 공부해야 할까를 <br>
함께 고민해보고 싶습니다.</p>
<div class="ui basic center aligned segment">
<img src="images/noun_681870.png" class="illustrate small">
</div>
<p>코딩이 무엇인지 알고 싶은 분에게는 <br>
이 정도면 충분한 교양의 끝이 되어드리고 </p>
<p>전문적으로 소프트웨어를 하려는 분에겐<br>
고통스럽지 않은 전문성의 시작이 되어드리겠습니다.</p>
<div class="ui basic center aligned segment">
<img src="images/noun_1189041.png" class="illustrate small">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">야학운영</h2>
</div>
<div class="twelve wide column">
<ul class="ui list">
<li class="item"><a href="https://opentutorials.org/course/3084" target="_blank">온라인 강의</a>로 공부하게
됩니다
</li>
<li class="item">적당한 <a href="https://yah.ac/yahac3" target="_blank">진도</a>를 권유해드립니다</li>
<li class="item">현업에 있는 소프트웨어 엔지니어들이 <a
href="https://calendar.google.com/calendar/embed?src=MzkzYTduaTBzbWQ5YjNjaGs1ZGE1a3Rpdm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ"
target="_blank">온라인</a>으로 도움을 드립니다
</li>
</ul>
<div class="ui basic center aligned segment">
<img src="images/noun_760066.png" class="illustrate">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
온라인 강의 일정
</h2>
</div>
<div class="twelve wide column">
<ul class="ui list">
<li class="item"><strong>2018.1.3</strong> : 공부 시작</li>
<li class="item"><strong>2018.1.16</strong> : 공부 끝</li>
<li class="item"><strong>2018.1.22</strong> : 온라인 수료식</li>
</ul>
<div class="ui basic center aligned segment">
<img src="images/noun_44065.png" class="illustrate">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
<a name="tutorial"></a>수업내용
</h2>
</div>
<div class="twelve wide column">
<ol class="ui list">
<li class="item">HTML로 웹페이지를 만드는 법</li>
<li class="item">인터넷으로 웹페이지를 전세계에 공개하는 법</li>
<li>코딩을 배우는 이유와 코드의 힘</li>
<li>보다 심화된 과정을 공부하는 방법</li>
</ol>
<div class="video-container-root">
<p>
첫번째 수업의 내용을 가져와봤습니다.
</p>
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/3CcMS0MNqOc?rel=0"
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
난이도
</h2>
</div>
<div class="twelve wide column">
<p>중학생 이상에게 권장됩니다. <br><br>초등학교 고학년은 보호자가<br> 도와주신다면<br> 충분히 함께 할 수 있습니다. </p>
<div class="ui basic center aligned segment">
<img src="images/noun_243029.png" class="illustrate"/>
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
<a name="plan"></a>진도표 및 참가신청
</h2>
</div>
<div class="twelve wide column">
<p>진도표에는 10일 분량으로 진도가 쪼개져 있습니다. 진도표를 참고해서 공부하시면 됩니다. 자신의 진도를 표시할 수 있고, 다른 사람과 공부하는 마음을 공유할수도 있습니다. 개강을
기다리지 마시고 지금 바로 시작하셔도 됩니다.</p>
<div class="video-container-root">
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/tSqUPIfAKDY"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="ui basic center aligned segment">
<a href="https://yah.ac/yahac3" class="ui secondary button" target="_blank"><i
class="linkify icon"></i>진도표
바로가기</a>
</div>
<br>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
진도
</h2>
</div>
<div class="twelve wide column">
<p>진도는 공부속도를 조절하실 때 도움을 드리기 위한 도구에 불과합니다. 진도가 목표가 되는 것은 주인과 손님이 바뀐 것입니다. 우리의 목표는 진도가 아니고 지식입니다. 지식이 아니고
기술을 이용해서 진짜로 우리의 삶을 개선하는 것입니다. 이런 경험이 축적되면 배움에 대한 즐거움을 회복할 수 있을 것입니다.<br><br>더 빨리 공부하셔도 되고, 더 늦게
공부하셔도 됩니다. 완주하셔도 되고, 완주를 못하셔도 됩니다. 공부를 시작하는 순간 그 분야를 지배하는 가장 중요한 개념을 배우게 됩니다. 또 수업을 완주했다고 해도, 정보기술의
세계는 무한히 넓어서 끝이 없습니다. 끝이 없는 공부에서 중요한 것은 시작이고, 과정을 즐기는 것이라고 생각합니다. 그러니 가벼운 마음으로 시작하시고, 힘들면 포기하지 마시고
유보하시면 좋겠습니다. 나중에 다시 처음부터 하시면 됩니다. 처음에 배우는 것이 제일 중요한 것이니까요. </p>
<div class="video-container-root">
<p>마지막 수업의 영상을 가져와봤습니다. </p>
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ZLnHunjKgLE?rel=0"
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
<a name="helper"></a>온라인 지원
</h2>
</div>
<div class="twelve wide column">
<p>
혼자서 공부하다 보면 막히는 부분이 생길 거예요. 이때 누군가의 도움이 있다면 좋겠죠? 코딩야학은 공부하다가 막히는 부분이 생겼을 때 장애물을 덜 어렵게 넘을 수 있도록 조력자와
연결 시켜 드립니다. 온라인 지원은 2018년 1월 3일부터 16일까지 진행됩니다. 조력자들이 온라인 지원에 참여하는 시간의 전날 달력에 표시됩니다. 아래 달력을 보시면 조력자들의 일정이 공유되어 있습니다. 일정에 도움을 받을 수 있는 방법이 적혀있습니다. 이것을 참고하셔서 도움을 받으면 됩니다. 어떻게
진행되는지 궁금하시다면 <a
href="https://www.youtube.com/watch?v=AXekKYcDZCI&index=13&t=25s&list=PLuHgQVnccGMB0EWpZVAwPmtLEisHh6XCY">1기
라이브 방송</a>을 참고해주세요.
</p>
<div class="ui basic center aligned segment">
<a href="https://calendar.google.com/calendar/embed?src=MzkzYTduaTBzbWQ5YjNjaGs1ZGE1a3Rpdm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ"
target="_blank" class="ui secondary button"><i class="linkify icon"></i>행사일정 바로가기</a>
</div>
<div class="ui basic center aligned segment">
<img src="images/schedule.gif" style="max-width:426px; width:100%; margin-top: 3rem;">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
<a name="helper"></a>조력자
</h2>
</div>
<div class="twelve wide column supporter">
<p>
야학 기간 동안 아래와 같은 현업 엔지니어들이 여러분을 돕겠습니다.
<h3 class="name">강두루</h3>
<p class="profile">오픈튜토리얼스 운영진, 컴퓨터 공학 & 회계 전공</p>
<p class="tech">C, C#, Java, Pascal(delphi), Windows Programming(Windows Embeded CE), JSP, ASP, WebForm,
Oracle, MS-SQL, 원도우임베디드, 재무, 정산(주문), 그룹웨어 개발</p>
<h3 class="name">이숙번</h3>
<p class="profile">오픈튜토리얼스 멤버, 디플러스 강사, 에듀앤솔루션 Senior Engineer</p>
<p class="tech">HTML, CSS, JavaScript, Python, PHP, Laravel, MySQL, GAE, Azure, Hadoop, R, tensorFlow,
인공지능, 빅데이터</p>
<h3 class="name">이현석</h3>
<p class="profile">일공공과 업투데이트북스 사장. 모던 PHP 유저그룹 운영자. 웹 개발자</p>
<p class="tech">HTML, CSS, JavaScript, PHP, Laravel, MySQL, Docker</p>
<h3 class="name">이고잉</h3>
<p class="profile">생활코딩 운영자, 오픈튜토리얼스 운영진, 세금유치원 운영자</p>
<p class="tech">HTML, CSS, JavaScript, React, PHP, MySQL, Firebase, OrientDB, AWS</p>
<h3 class="name">이태호</h3>
<p class="profile">티페이 개발팀, 오픈튜토리얼스 운영진, 릴리쿰 바리스타 , 스윙댄서, 농사, 등가성 연구자</p>
<p class="tech">HTML, CSS, JavaScript, Python, IOT, AWS, 생명공학, 빅데이터</p>
<h3 class="name">함기훈</h3>
<p class="profile">미림여자정보과학고등학교 교사,장고걸스 튜터리얼 번역/워크샵코치, DB Browser for SQLite 한글번역</p>
<p class="tech">HTML, CSS, JavaScript, PHP, XE, JSP, Spring, C, Java, Android, MySql, MS-SQL, Python,
Django, Linux(Debian, Ubuntu), Firebase, 라즈베리파이, Android Things</p>
<h3 class="name">홍민기</h3>
<p class="profile">티페이 개발팀 재직 중</p>
<p class="tech">HTML, CSS, JavaScript, PHP, Python, MySQL, AWS</p>
</p>
<div class="ui basic center aligned segment">
<img src="images/wordcloud (1).png" style="max-width:650px; width:100%; margin-top: 4rem;">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
수료증
</h2>
</div>
<div class="twelve wide column">
<p>코딩야학은 완주보다 시작을 중요하게 생각합니다. 하지만 완주하신 분들의 노력을 축하하고, 언젠가는 완주하실 분들에게 약간의 동기를 드리기 위해서 수료증을 드려요.
<div>코딩야학에서는 수료 여부를 검증하지 않습니다. 신뢰에 기반에서 발급해드리기 때문에 공식적인 자격으로는 사용할 수 없습니다.</div>
</p>
<div class="ui basic center aligned segment">
<img src="images/noun_912710.png" class="illustrate">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">
자주 묻는 질문
</h2>
</div>
<div class="twelve wide column">
<p>아래 페이지에 자주 묻는 질문을 정리 해두었습니다.</p><br><br>
<div class="ui basic center aligned segment">
<a href="https://docs.google.com/document/d/1mQbmdwZ1ylI3eDDRk8HiSKMrYhfBInH6HiGuK0pC9c0/pub"
target="_blank" class="ui secondary button"><i class="linkify icon"></i>자주 묻는 질문</a>
</div>
<div class="ui basic center aligned segment">
<img src="images/noun_927374.png" class="illustrate">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">선배들의 이야기</h2>
</div>
<div class="twelve wide column">
<p>시작하기 전에 먼저 같은 길을 걸어간 선배들의 이야기를 들어보세요.</p>
<ul class="ui list">
<li class="item"><a href="https://yah.ac/1" target="_blank">1기의 진도표</a></li>
<li class="item"><a href="https://code-live.ga/disqus/ourstory" target="_blank">1기의 사연</a></li>
</ul>
<br>
<ul class="ui list">
<li class="item"><a href="https://yah.ac/2" target="_blank">2기의 진도표</a></li>
<li class="item"><a href="https://code-live.ga/disqus/ourstory2" target="_blank">2기의 사연</a></li>
</ul>
<div class="ui basic center aligned segment">
<img src="images/noun_5927.png" class="illustrate">
</div>
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="four wide column">
<h2 class="ui header">우리들의 이야기</h2>
</div>
<div class="twelve wide column">
<p>여러분의 사연을 알려주세요. 종강 때 사연을 읽어드릴께요.</p>
<div style="text-align: center; padding:10rem 0;">
<a href="https://code-live.ga/disqus/ourstory3" target="_blank" class="ui secondary button" style="margin:auto;">3기의 사연 바로가기</a>
</div>
</div>
</div>
</div>
<div class="ui simple center aligned segment" id="register">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="center">자 그럼<br>화이팅<br><br>
<a href="https://goo.gl/forms/bryiv4HcbXmVsQJI2" target="_blank" class="ui secondary button">참가 신청하기 하기</a>
<div class="ui basic center aligned segment" style="">
<img src="images/point.png" class="illustrate" style="margin-top:0; max-width:300px;"/>
</div>
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="ui padded simple segment">
<h2 class="ui header">댓글</h2>
<p>행사와 관련해서 궁금한 점이나, 참가하는 마음을 적어주세요. 나중에 후기와 비교해보면 재미있겠죠?</p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function () { // DON'T EDIT BELOW THIS LINE
var d = document,
s = d.createElement('script');
s.src = 'https://kodingyahag.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-99089957-1', 'auto');
ga('send', 'pageview');
</script>
<script>
/**
* Function that tracks a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
trackOutboundLink = function (e) {
ga('send', 'event', 'outbound', 'click', e.target.href, {
'transport': 'beacon'
});
}
$('a').on('click', function () {
ga('send', 'event', 'outlink', 'click', this.href);
})
</script>
<script>
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
}
;
});
}
}
});
</script>
</div>
</div>
</body>
</html>