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
|
---
title: 학습서
slug: Web/Tutorials
tags:
- 강좌
- 웹디자인
- 코드
- 학습서
translation_of: Web/Tutorials
---
<p>이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다.</p>
<h2 id="웹입문자를_위하여">웹입문자를 위하여</h2>
<dl>
<dt><a href="/ko/docs/Learn/Getting_started_with_the_web">시작해 볼까요?</a>
<p> </p>
</dt>
<dd>시작해 볼까요? 는 웹개발의 실제를 소개하는 간결한 안내서입니다. 간단한 코딩을 통해 자신만의 웹페이지를 구축할 수 있는 도구들을 준비할 수 있도록 돕습니다.</dd>
<dt> </dt>
</dl>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">HTML 학습서</h2>
<h3 id="입문">입문</h3>
<dl>
<dt><a href="http://docs.webplatform.org/wiki/guides/the_basics_of_html" rel="external">HTML의 기본</a> (WebPlatform.org)</dt>
<dd>HTML이 무엇인지, 무엇을 할 수 있는지, HTML의 브리핑 역사, HTML과 같은 문서구조를 보여줍니다. 훨씬 깊은 HTML의 각 부분을 하나하나 살펴 수행할 수 있습니다.</dd>
<dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Wep Page의 기본 구조</a> (SitePoint)</dt>
<dd>큰 그림을 통해 HTML 요소에 대해 알아봅니다.</dd>
<dt><a href="http://reference.sitepoint.com/html/elements" rel="external">기본 HTML 요소</a> (SitePoint)</dt>
<dd>HTML문서를 작성하는 데 사용할 수 있는 다양한 유형의 요소를 설명합니다.</dd>
<dt><a href="http://htmldog.com/guides/htmlbeginner/" rel="external">HTML기초 학습서</a> (HTML Dog)</dt>
<dd>기본 학습서를 익히며 연습합니다.</dd>
<dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML 과제</a> (Wikiversity)</dt>
<dd>의미있는 mark-up에 집중하여 HTML기술(예를 들어, "나는 <h2> 요소 또는<strong> 요소를 이용합니까?")을 이러한 과제에 연마, 사용합니다.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/HTML/Element">MDN HTML 요소 참조</a></dt>
<dd>포괄적인 HTML요소에 대한 참조 및 파이어폭스와 다른 부라우저를 지원하는 방법을 알려줍니다.</dd>
<dt><a href="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
<dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
</dl>
<h3 id="고급">고급</h3>
<dl>
<dt><a href="https://developer.mozilla.org/ko/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">HTML 페이지를 빠르게 로드할 수 있게 만드는 팁</a></dt>
<dd>사이트 방문자들에게 더 많은 응답을 제공하고, 웹 서버와 인터넷 연결 부하를 줄여 웹 페이지를 최적화 할 수 있습니다.</dd>
<dt><a href="http://diveintohtml5.info/" rel="external">Dive into HTML5</a> (Mark Pilgrim)</dt>
<dd>HTML5, HTML의 최신버전 기능에 대해 자세히 알아보십시오.</dd>
<dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 학습서</a> (HTML5 Rocks)</dt>
<dd>HTML5 기능을 사용하여 코드를 통해 guided tour를 습득.</dd>
<dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">HTML5의 의미</a> (A List Apart)</dt>
<dd>앞뒤로 호환되며, 확장 가능한 mark-up을 배울 수 있습니다.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/Canvas_tutorial">Canvas 학습서</a></dt>
<dd>Canvas 요소를통해 스크립트를 이용하여 크래픽을 만드는 방법을 알아보십시오.</dd>
<dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
<dd>현재 HTML5를 사용하는 방법에 대한 기사.</dd>
<dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">HTML5 오디오의 기쁨</a> (Elated)</dt>
<dd>쉽게 웹 페이지에 사운드를 적용시키는 HTML 오디오 요소를 사용하는 방법에 대해 알아봅니다. 더 많은 코드 예제는 학습서 안에 있습니다.</dd>
</dl>
</td>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation">Javascript 학습서</h2>
<h3 id="입문_2">입문</h3>
<dl>
<dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
<dd>Codecademy는 자바 스크립트를 코딩하는 방법을 배울 수 있는 가장 쉬운 방법입니다. 친구들과 함께 재미있게 배울 수 있습니다.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/JavaScript/Getting_Started">JavaScript 시작하기</a></dt>
<dd>JavaScript란 무엇이며, 어떻게 도움을 줄까?</dd>
<dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external">Programming – 입문 </a> (WebPlatform.org)</dt>
<dd>프로그래밍의 기본 중의 기본. 자바스크립트를 사용하고 더 많은 것을 할 수 있는 모범사례와 무엇을 할 수 있는지 소개하는 기사.</dd>
<dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">JavaScript 모범사례</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
<dd>자바 스크립트를 작성(그렇지 않아도)한 명백하고 분명한 몇 가지 모범사례에 대해 알아보십시오.</dd>
<dt><a href="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
<dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
</dl>
<h3 id="중급">중급</h3>
<dl>
<dt><a href="https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript">JavaScript 다시 소개하기</a></dt>
<dd>중급 개발자들을 대상으로 자바 스크립트 프로그래밍 언어의 요점을 되풀이합니다.</dd>
<dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt>
<dd>중급 및 고급 자바 스크립트 방법론에 대한 포괄적인 가이드.</dd>
<dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">JavaScript 필수 디자인 패턴</a> (Addy Osmani)</dt>
<dd>자바 스크립트에 필요한 디자인 패턴을 소개.</dd>
<dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">JavaScript 프로그래밍 언어</a> (YUI Blog)</dt>
<dd>오늘날, Douglas Crockford가 탐구해온 언어와 방법.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a></dt>
<dd>자바 스크립트 개체 모델에 대해 자세히 알아보십시오.</dd>
</dl>
<h3 id="고급_2">고급</h3>
<dl>
<dt><a href="http://ejohn.org/apps/learn/" rel="external">고급 JavaScript 학습</a> (John Resig)</dt>
<dd>John Resig의 고급 자바스크립트 가이드.</dd>
<dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">JavaScript DOM을 소개합니다</a> (Elated)</dt>
<dd>이것은 어떤 문서이며, 어디가 유용합니까? 이 문서는 강력한 스크립트 기능을 부드럽게 소개합니다.</dd>
<dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">불편한 API: DOM의 이론</a> (YUI Blog)</dt>
<dd>Douglas Crockford가 문서 객체 모델을 설명합니다.</dd>
<dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">고급JavaScript</a> (YUI Blog)</dt>
<dd>Douglas Crockford가 자바 스크립트 프로그래머가 제작할 응용프로그램을 선택할 수 있는 코드 패턴을 유사하게 보여드립니다.</dd>
<dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
<dd>자바 스크립트의 가장 독특한 부분을 설명서에서 참조하십시오.</dd>
<dt><a href="http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">어떤 JavaScript Framework를?</a> (StackOverflow)</dt>
<dd>자바 스크립트 프레임 워크를 선택하는 방법에 대한 조언.</dd>
<dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-blocking JavaScript Downloads</a> (YUI Blog)</dt>
<dd>자바 스크립트를 포함하는 페이지의 다운로드 성능 향상을 위한 팁을 제공합니다.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/JavaScript/Guide">JavaScript 가이드</a></dt>
<dd>초급에서 고급까지 모든 수준을 학습 할 수 있는 포괄적이고 정기적으로 업데이트 되는 자가스크립트 설명서를 참조하십시오.</dd>
</dl>
</td>
</tr>
<tr>
<td colspan="2">
<h2 class="Documentation" id="Documentation" name="Documentation">CSS 학습서</h2>
</td>
</tr>
<tr>
<td>
<h3 id="입문_3">입문</h3>
<dl>
<dt><a href="https://developer.mozilla.org/ko/docs/CSS/Getting_Started">CSS 시작하기</a></dt>
<dd>이 학습서는 Cascading Style Sheets (CSS)를 소개합니다. 이것은 자신의 컴퓨터에 시도할 수 있는 실용적인 예제와 CSS의 기본 기능을 안내합니다.</dd>
<dt><a href="http://docs.webplatform.org/wiki/guides/getting_started_with_css" rel="external">CSS 기초</a> (WebPlatform.org)</dt>
<dd>CSS가 무엇인지, 어떻게 HTML에 적용하는지, 기본적인 CSS구문은 어떤 것인지. 다음과 같이 배웁니다.</dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt>
<dd>CSS의 클래스는 무엇입니까?</dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">외부 CSS</a> (Wikiversity)</dt>
<dd>외부 스타일 시트에서 CSS를 사용.</dd>
<dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">스타일에서 Touch 추가하기</a> (W3C)</dt>
<dd>CSS로 웹페이지를 스타일링 하는 간단한 초보자 가이드.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/Common_CSS_Questions">일반적인 CSS 질문</a></dt>
<dd>초보자들을 위한 일반적인 질문 및 응답.</dd>
<dt><a href="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
<dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
</dl>
<h3 id="중급_2">중급</h3>
<dl>
<dt><a href="https://developer.mozilla.org/ko/docs/CSS/CSS_Reference">CSS 참조</a></dt>
<dd>파이어 폭스와 다른 브라우저에서의 지원에 대한 세부사항, CSS 참조를 작성합니다.</dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS 과제</a> (Wikiversity)</dt>
<dd>CSS 기술을 이용해 더 많은 연습을 필요로 하는곳에 참여하십시오.</dd>
<dt><a href="http://www.html.net/tutorials/css/" rel="external">중급 CSS 개념</a> (HTML.net)</dt>
<dd>Grouping, pseudo-classes 등등.</dd>
<dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt>
<dd>표준을 준수하여 table-free layout을 사용.</dd>
<dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">CSS와 점진적 향상</a> (A List Apart)</dt>
<dd>CSS로 웹 페이지에 점진적 개선을 통합 할 수 있습니다.</dd>
<dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt>
<dd>typographic grid를 이용하는 동안, 유동적으로 브라우저 창 크키를 조절하는 레이아웃 디자인.</dd>
</dl>
</td>
<td>
<h3 id="고급_3">고급</h3>
<dl>
<dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external">5분 동안의 CSS3</a> (Addy Osmani)</dt>
<dd>CSS3 도입 된핵심 기능 중 일부에 대한 간단한 소개.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/CSS/Using_CSS_transforms">CSS를 사용한 변환</a></dt>
<dd>회전, 기울이기, 크기 조절 등의 변환을 CSS를 사용하여 적용합니다.</dd>
<dt><a href="https://developer.mozilla.org/ko/docs/CSS/CSS_transitions">CSS 전환</a></dt>
<dd>CSS 전환, 초안 CSS3 스펙의 일부 대신에 변경 내용이 즉시 적용하는 것에 CSS 속성 변화를 보여주는 방법을 제공합니다.</dd>
<dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external">Understanding CSS3 Transitions</a> (A List Apart)</dt>
<dd>신중하게 상황을 선택하여 CSS3를 사용하여 전환을 시작합니다.</dd>
<dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face 윕 font를 구현하기 위한 빠른 안내</a> (HTML5 Rocks)</dt>
<dd>CSS3에서 @font-face 기능을 사용하면, 접근 조작 가능하거나 확장 가능한 방식으로 웹에서 사용자 지정 글꼴을 사용할 수 있습니다.</dd>
</dl>
</td>
</tr>
</tbody>
</table>
<p> </p>
|
