---
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> (&lt;-클릭하면 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>