diff options
Diffstat (limited to 'files/ko/learn/index.html')
| -rw-r--r-- | files/ko/learn/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/ko/learn/index.html b/files/ko/learn/index.html new file mode 100644 index 0000000000..ce9e422ff5 --- /dev/null +++ b/files/ko/learn/index.html @@ -0,0 +1,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> |