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
|
---
title: Web 개발 학습하기
slug: Learn
tags:
- Beginner
- CSS
- HTML
- Index
- Intro
- Landing
- Learn
- Web
- 웹
- 초보자
- 학습
translation_of: Learn
---
<div>{{LearnSidebar}}</div>
<div>
<p class="summary">환영합니다! 이곳에서 다루는 문서들은 웹개발을 처음 접하는 초보자를 대상으로 합니다. 그리고 간단한 웹사이트를 만들기 위해 필요한 모든 것들을 담고 있습니다.</p>
</div>
<p>여기에서는 여러분을 "초보자"에서 "전문가"로 이끄는 걸 목표로 하지 않습니다. 다만, 여러분을 "초보자"에서 "익숙한 단계"로 이끄는 걸 목표로 합니다. 그 이후에는 자신만의 스타일을 찾아야만 합니다. 그리고 그때 보게 될 <a href="https://developer.mozilla.org/ko">MDN의 나머지 문서들</a>이나 다른 문서들은 많은 사전지식을 필요로 할 것입니다.<br>
<br>
코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.</p>
<h2 id="새로운_콘텐츠">새로운 콘텐츠?</h2>
<p>이 곳의 내용은 정기적으로 추가되고 있습니다. 변경점을 추적하기 위해 <a href="/en-US/docs/Learn/Release_notes">Learning area release note</a>를 관리하기 시작했으니, 정기적으로 확인해주세요!</p>
<p>원하는 주제나 빠진 것 같은 부분에 대한 질문은 저희의 <a href="https://discourse.mozilla.org/c/mdn">Discourse 포럼</a>에 남겨주세요.</p>
<h2 id="어디서_시작해야_하나">어디서 시작해야 하나</h2>
<ul class="card-grid">
<li><span>완전 초보라면</span>
<p> 웹개발을 처음 하신다면 <a href="/ko/docs/Learn/Getting_started_with_the_web" style="background-color: rgba(234, 239, 242, 0.498039);">"웹 개발 시작하기"</a> 를 추천합니다. 웹 개발에 대한 실용적인 정보를 제공하고 있습니다.</p>
</li>
<li><span>질문이 있으면</span>
<p>웹개발에 대한 질문은 <a href="/ko/docs/Learn/Common_questions">Common question</a>를 살펴보시길 바랍니다. 도움이 될만한 정보가 있을 것입니다.</p>
</li>
<li><span>초보적인 지식에서 나아가기</span>
<p>초보 개발자에서 한 단계 더 나아가고 싶다면 {{glossary("HTML")}} 과 {{glossary("CSS")}} 를 상세히 배워보세요. <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a>에 대한 소개를 배울 수 있습니다.</p>
</li>
<li><span>스크립트 다루기</span>
<p><span>HTML과 CSS을 잘 다루거나 코딩 경험이 많다면, </span>{{glossary("JavaScript")}}나 서버측 개발을 해 보시는 것이 좋습니다. <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript시작하기</a>와 <a href="/ko/docs/Learn/Server-side/First_steps">서버측 개발 시작하기</a>를 시작해 보세요.</p>
</li>
</ul>
<div class="note">
<p><strong>참고</strong>: 기술 정의에 대한 <a href="/ko/docs/Glossary">용어집</a>를 제공합니다. </p>
</div>
<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
<h2 id="다루는_주제">다루는 주제</h2>
<p>다음은 MDN 학습 영역에서 다루는 모든 주제의 목록입니다.</p>
<dl>
<dt><a href="/ko/docs/Learn/Getting_started_with_the_web">웹 개발 시작하기</a></dt>
<dd>초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.</dd>
<dt><a href="/ko/docs/Learn/HTML">HTML — 웹 구축하기</a></dt>
<dd>HTML은 웹사이트에 들어갈 내용을 작성하고, 해당 내용이 의미나 목적을 정의할 때 사용하는 언어입니다. 이 곳에서는 HTML을 자세히 설명합니다.</dd>
<dt><a href="/ko/docs/Learn/CSS">CSS — 웹 스타일링 익히기</a></dt>
<dd>CSS는 웹을 꾸미는 데 사용합니다. 애니메이션과 같은 동작을 추가하거나 웹 컨텐츠의 스타일을 지정할 때 사용할 수 있습니다. 이 곳을 통해 CSS 활용법을 알 수 있습니다.</dd>
<dt><a href="/ko/docs/Learn/JavaScript">JavaScript — 동적인 클라이언트 사이드(혹은 프론트 엔드) 언어</a></dt>
<dd>JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이 문서는 JavaScript를 이해하고 작성하는데 익숙해지는데 필요한 핵심적인 내용을 모두 가르쳐줍니다.</dd>
<dt><a href="/ko/docs/Learn/Forms">Web forms — 사용자 데이타로 작업하기</a></dt>
<dd>Web forms는 사용자와 정보를 주고받기 위한 강력한 도구입니다 — 주로 사용자의 정보를 수집하거나, 유저 인터페이스를 제공하기 위해 사용됩니다. 관련 문서에서 web 폼을 구성하고, 꾸미고, web form과 통신하기 위해 필요한 핵심적인 내용을 모두 다룹니다.</dd>
<dt><a href="/ko/docs/Learn/Accessibility">접근성 — 모두를 위한 웹사이트</a></dt>
<dd>접근성은 신체적인 장애나 지역과 장비및 기타 개인간 차별을 유발하는 요소에 상관없이 누구나 웹에 접근할 수 있도록 하기 위한 코드 작성법을 다룹니다. 이 문서를 통해 필요한 모든 내용을 학습할 수 있습니다.</dd>
<dt><a href="/ko/docs/Learn/Performance">Web 성능 — 웹사이트를 빠르고 즉시 반응하도록 만들기 </a></dt>
<dd>Web 성능은 사용자의 인터넷 대역이나, 화면 크기, 네트워크나 장비의 능력에 관계없이, 웹 어플리케이션의 다운로드를 빠르게하고 사용자의 조작에 즉시 반응하도록 하는 기술입니다. </dd>
<dt><a href="/ko/docs/Learn/Tools_and_testing">도구와 테스트</a></dt>
<dd>크로스 브라우징(cross browsing) 도구처럼 개발자가 개발을 하는 데 도움을 주는 도구를 설명합니다.</dd>
<dt><a href="/ko/docs/Learn/Server-side">서버 사이드(혹은 벡 엔드) 웹 프로그래밍</a></dt>
<dd>클라이언트측 웹 개발에 집중해도 서버가 작동하는 방식을 파악하는 것이 여전히 유용합니다. 이 곳에서는 서버측의 작동 방식 간단히 알려주고, 두가지 유명한 프레임워크인 Django(Python)과 Express (node.js)를 사용하여 서버측 응용 프로그램을 빌드하는 방법을 알려줍니다.</dd>
</dl>
<h2 id="코드_예제_얻기">코드 예제 얻기</h2>
<p>학습 영역에서 만날 수 있는 코드 예제는 모두 <a href="https://github.com/mdn/learning-area/">GitHub에서 사용할 수 있습니다</a>. 코드 예제를 컴퓨터로 복사하고 싶다면, 가장 쉬운 방법은 <a href="https://github.com/mdn/learning-area/archive/master.zip">가장 최신의 master 코드 브랜치를 ZIP으로 다운로드</a> (<-클릭하면 zip 파일이 다운로드됨) 받는것입니다.</p>
<p>자동 업데이트가 되는 좀더 유연한 방법으로 저장소(repo)를 복사하고 싶다면, 다음과 같이 좀 더 복잡한 과정을 따라하면 됩니다.</p>
<ol>
<li>컴퓨터에<a href="http://git-scm.com/downloads"> Git</a>을 설치합니다. 이것은 GitHub가 사용하는 버전 관리 소프트웨어 입니다.</li>
<li><a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">명령 프롬프트</a> (윈도우) 혹은 터미널(<a href="https://help.ubuntu.com/community/UsingTheTerminal">리눅스</a>, 맥<a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">OSX</a>)의 컴퓨터에서 엽니다.</li>
<li>명령 프롬프트/터미널이 가리키는 현재 폴더에 learning area 저장소를 복사하려면 다음 명령어를 사용하십시오:
<pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
</li>
<li>해당 위치에 learning-area 폴더가 생성된 것을 확인할 수 있습니다.</li>
</ol>
<p>만약 learning-area를 받은지 오래됐다면, 아래 단계를 거쳐 GitHub에서 <code>earning-area</code>에 대한 최신 정보를 업데이트 받을 수 있습니다:</p>
<ol>
<li>명령 프롬프트/터미널에서, <code>cd</code>명령어를 사용하여 <code>learning-area</code> 디렉토리로 이동하십시오. 예를 들어 만약 상위 디렉토리에 있다면:
<pre class="brush: bash">cd learning-area</pre>
</li>
<li>아래의 명령어를 사용하면 저장소에 있는 정보를 최신 상태로 업데이트합니다:
<pre class="brush: bash">git pull</pre>
</li>
</ol>
<h2 id="연락처">연락처</h2>
<p>질의 사항이 있는 경우 <a href="/ko/docs/MDN/Community/Conversations#Asynchronous_discussions">메일링 리스트</a>나 <a href="/ko/docs/MDN/Community/Conversations#Chat_in_IRC">IRC 채널</a>를 통해 메세지를 보내주실 수 있습니다. 내용 오류나 새로운 학습 주제 요청, 이해가 되지 않는 사항에 대한 질의 등 무엇이든 환영합니다.<br>
<br>
이 모든 학습 과정은 재능 기부자들의 도움으로 만들 수 있었습니다. 컨텐츠의 개발, 개선에 대해 도움을 주실 것에 관심이 있는 경우<a href="/ko/Learn/How_to_contribute">, 도움을 주는 방법</a>을 한번 봐주시어 <a href="./docs/MDN/Community#Join_our_mailing_lists">메일링 리스트</a>나 <a href="./docs/MDN/Community#Get_into_IRC">IRC 채널</a>을 통해 소통하신다면 큰 힘이 될 것입니다. 저희는 여러분들이 필요합니다. 이 학습 플랫폼을 개선하는데 열정을 가지신 분이라면 누구든지 환영합니다.</p>
<h2 id="관련_정보">관련 정보</h2>
<p>** 이곳에 있던 <strong>한국어 사이트</strong>는 새로 개정되어 <strong>승인된 English (US) 버전과 동기하여 비교하기 쉽도록 </strong>아래쪽 <strong>사용자 추천 사이트</strong> 로 내렸습니다.**</p>
<h3 id="영어_원문에_있는_사이트">영어 원문에 있는 사이트</h3>
<dl>
<dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
<dd>모든 웹 개발자를 위한 모질라 재단의 뉴스레터</dd>
<dt><a href="https://learnjavascript.online/" rel="noopener">JavaScript 배우기</a></dt>
<dd>Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌 는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified </a></dt>
<dd><a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의</dd>
</dl>
<dl>
<dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
<dd>처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음</dd>
<dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
<dd>게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함</dd>
<dt><a href="https://code.org/">Code.org</a> </dt>
<dd>기초 코딩 이론과 연습. 주로 아이들이나 완전 초보자를 대상으로 함</dd>
<dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
<dd>정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음</dd>
<dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
<dd>웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음</dd>
</dl>
<dl>
<dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
<dd>초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함</dd>
<dt><a href="https://edabit.com/">Edabit</a></dt>
<dd>다양한 코딩 문제를 접할 수 있음</dd>
</dl>
<dl>
<dt>
<h3 id="영어_원문에_없는_사용자_추천_사이트">영어 원문에 없는 사용자 추천 사이트 </h3>
</dt>
<dt><a href="https://programmers.co.kr/">프로그래머스</a></dt>
<dd>프로그래밍의 기초와 실습을 동시에 할 수 있음</dd>
<dt><a href="https://opentutorials.org/course/1">생활코딩</a></dt>
<dd>웹에 대한 기초를 쌓기에 유익함</dd>
<dt><a href="https://www.edwith.org/">edwith</a></dt>
<dd>부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음</dd>
<dt><a href="https://www.acmicpc.net/">Baekjoon Online Judge</a></dt>
<dd>다양한 코딩 문제를 풀어볼 수 있음</dd>
<dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
<dd>모질라 재단이 운영하는 학습 플랫폼으로 기본적인 웹 활용 방법과 개인 정보 보호부터 JavaScript와 Minecraft 해킹까지 배울 수 있음</dd>
<dt><a href="https://www.w3schools.com/">w3schools</a> </dt>
<dd>세계에서 가장 큰 웹 개발자 사이트가 모토이며, 모질라와는 달리 설명하는 문장이 길지않고 짤막한 단문으로 이해하기 쉬우며 예제 중심으로 설명하고 있음. 또한 사이트 메뉴가 원하는 주제를 찾기 쉽게 구성 되어 있음</dd>
</dl>
|
