---
title: Web 개발 학습하기
slug: Learn
tags:
  - Beginner
  - CSS
  - HTML
  - Index
  - Intro
  - Landing
  - Learn
  - Web
  - 웹
  - 초보자
  - 학습
translation_of: Learn
---

<div>{{LearnSidebar}}</div>

<p class="summary">
  MDN 학습지에 오신 것을 환영합니다! 여기는 웹 개발을 처음 접하는 초보자가 웹 사이트 개발을 시작하기 위해 필요한 모든
  것을 제공하는 글을 모아놓은 곳입니다.
</p>

<p>
  MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니고, 웹 개발에 익숙해지도록 도와드리는 것입니다. 그 후에는
  <a href="/ko/">MDN의 다른 문서</a>를 포함해서, 각종 사전 지식을 요구하는 중급, 고급 리소스를 찾아 자신만의 길을
  만드세요.
</p>

<p>
  웹 개발이 완전 처음이시라면 시작이 다소 어려우실 수 있습니다. 저희가 이끌어드리면서 주제와 충분히 친숙해지고, 제대로
  익히실 수 있도록 상세하게 알려드리겠습니다. 독학이나 강의로 웹 개발을 배우는 학생, 교육 자료를 찾고 계시는 선생님,
  취미로 웹 개발을 알아보시는 분, 그저 웹 기술의 동작 원리를 알아보고 싶으신 분 모두 편하게 보실 수 있을거예요.
</p>

<h2 id="whats_new">새로운 콘텐츠</h2>

<p>
  학습지에는 내용이 계속 추가되고 있습니다. 바뀐 점을 알려드리기 위해
  <a href="/ko/docs/Learn/Release_notes">학습지 릴리즈 노트</a>를 관리하고 있으니 종종 찾아오세요!
</p>

<p>
  빠진 부분을 찾으셨거나, 추가로 원하는 주제가 있으신가요?
  <a href="https://discourse.mozilla.org/c/mdn">Discourse 포럼</a>에 남겨주세요.
</p>

<div class="callout">
  <h4 id="looking_to_become_a_front-end_web_developer">프런트엔드 웹 개발자가 되고자 하시나요?</h4>

  <p>목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.</p>

  <p>
    <a href="/ko/docs/Learn/Front-end_web_developer"><strong>시작하기</strong></a>
  </p>
</div>

<h2 id="where_to_start">시작하기</h2>

<dl>
  <dt>처음에서 시작</dt>
  <dd>
    처음부터 시작하시는 것이면
    <a href="/ko/docs/Learn/Getting_started_with_the_web">웹과 함께 시작하기</a> 모듈부터 시작해보세요. 웹 개발의
    실용적인 소개를 제공합니다.
  </dd>
  <dt>기본기를 넘어</dt>
  <dd>
    이미 기본 지식은 알고 계시면, 다음 단계는 {{glossary("HTML")}}과 {{glossary("CSS")}}를 자세히 알아보는 것입니다.
    <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 모듈에서 시작해서
    <a href="/ko/docs/Learn/CSS/First_steps">CSS 첫걸음</a> 모듈까지 배워보세요.
  </dd>
  <dt>스크립트 다루기</dt>
  <dd>
    HTML과 CSS도 알고 계시거나, 아니면 주로 코드 작성에 관심을 두신다면 {{glossary("JavaScript")}}나 서버 개발을
    보시는게 좋습니다.
    <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>과
    <a href="/ko/docs/Learn/Server-side/First_steps">서버 사이드 첫걸음</a> 모듈을 방문하세요.
  </dd>
  <dt>프레임워크와 도구</dt>
  <dd>
    "바닐라" HTML, CSS, JavaScript의 정수를 모두 배우셨으면
    <a href="/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools">클라이언트 사이드 웹 개발 도구</a>를
    읽어보세요. 그 후에는
    <a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks"
      >클라이언트 사이드 JavaScript 프레임워크</a
    >와 <a href="/ko/docs/Learn/Server-side">서버 사이드 웹 사이트 프로그래밍</a>도 한 번 고려해보세요.
  </dd>
</dl>

<div class="note">
  <p>
    <strong>참고</strong>: MDN <a href="/ko/docs/Glossary">용어집</a>에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹
    개발에 관한 질문이 있으시면 <a href="/ko/docs/Learn/Common_questions">자주 하는 질문</a> 문서도 확인해보세요.
  </p>
</div>

<!-- LearnBox는 항상 영어
<p>{{LearnBox({"title":"오늘의 용어"})}}</p>
-->

<h2 id="topics_covered">다루는 주제</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은 웹 사이트의 콘텐츠를 구성하고, 각각의 의미나 목적을 정의하는 언어입니다.</dd>
  <dt><a href="/ko/docs/Learn/CSS">CSS — 웹 스타일링</a></dt>
  <dd>CSS는 웹 콘텐츠의 스타일과 레이아웃은 물론 애니메이션과 같은 추가 동작을 지정할 때 사용하는 언어입니다.</dd>
  <dt><a href="/ko/docs/Learn/JavaScript">JavaScript — 동적 클라이언트 사이드 스크립팅</a></dt>
  <dd>
    JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이 주제는 JavaScript 코드의 작성과 이해에
    익숙해지기 위한 모든 기초를 다룹니다.
  </dd>
  <dt><a href="/ko/docs/Learn/Forms">웹 양식 — 사용자 데이터로 작업하기</a></dt>
  <dd>
    웹 양식은 사용자와 상호작용을 하기 위한 강력한 도구입니다. 주로 사용자에게서 데이터를 받거나, 직접 조절할 수 있는
    사용자 인터페이스를 제공할 때 사용합니다. 이 주제에서는 양식의 구조와 스타일링, 그리고 상호작용까지 모든 것을
    다룹니다.
  </dd>
  <dt><a href="/ko/docs/Learn/Accessibility">접근성 — 모두를 위한 웹</a></dt>
  <dd>
    접근성에서는 장애, 장비, 지역 및 기타 사람간의 차이점에 상관 없이 누구나 웹 콘텐츠에 접근할 수 있도록 구성하는
    방법을 다룹니다.
  </dd>
  <dt><a href="/ko/docs/Learn/Performance">웹 성능 — 빠르고 즉각 반응하는 웹 사이트</a></dt>
  <dd>
    웹 성능에서는 사용자의 인터넷 대역이나 화면 크기, 네트워크, 장비의 성능에 관계하지 않고 웹 어플리케이션의 다운로드는
    빠르게, 사용자 인터페이스의 반응은 즉각 일어나도록 만드는 기술을 다룹니다.
  </dd>
  <dt><a href="/ko/docs/Learn/Tools_and_testing">도구와 테스트</a></dt>
  <dd>
    도구와 테스트에서는 크로스 브라우징 테스트, 린팅, 포맷팅, 변환 도구, 버전 관리, 배포, 클라이언트 사이드 JavaScript
    프레임워크를 다룹니다.
  </dd>
  <dt><a href="/ko/docs/Learn/Server-side">서버 사이드 웹 사이트 프로그래밍</a></dt>
  <dd>
    클라이언트 사이드 웹 개발에 집중하시더라도, 서버와 서버 사이드 코드의 작동 방식을 파악하는 것은 여전히 유용합니다.
    여기서는 서버의 일반적인 동작 방식과 함께, 두 개의 유명한 프레임워크인 Django(Python)와 Express (node.js)를 사용해
    서버 사이드 앱을 만드는 방법에 대한 상세한 자습서를 제공합니다.
  </dd>
</dl>

<h2 id="getting_our_code_examples">코드 예제 받기</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
  >하시면 가장 쉽게 받아가실 수 있습니다.
</p>

<p>자동 업데이트도 할 수 있는, 복잡하지만 좀 더 유연한 방법도 있습니다. 다음과 같은 방법으로 저장소를 복사하세요.</p>

<ol>
  <li>
    컴퓨터에 <a href="http://git-scm.com/downloads">Git</a>을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤
    시스템입니다.
  </li>
  <li>
    <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">명령 프롬프트</a>(Windows) 또는 터미널(<a
      href="https://help.ubuntu.com/community/UsingTheTerminal"
      >Linux</a
    >, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>)을 여세요.
  </li>
  <li>
    명령 프롬프트/터미널이 가리키는 현재 위치에 <code>learning-area</code> 저장소를 복사하시려면 다음 명령어를
    입력하세요.
    <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
  </li>
  <li>
    이제 탐색기/Finder 또는
    <a href="https://ko.wikipedia.org/wiki/Cd_(%EB%AA%85%EB%A0%B9%EC%96%B4)"><code>cd</code> 명령어</a>를 사용해서
    원하시는 파일을 찾아보세요.
  </li>
</ol>

<p>
  GitHub의 마스터 버전에 변경사항이 생겼을 땐 <code>learning-area</code> 저장소를 아래의 방법으로 업데이트하실 수
  있습니다.
</p>

<ol>
  <li>
    명령 프롬프트/터미널에서 <code>cd</code>명령어를 사용해 <code>learning-area</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="https://discourse.mozilla.org/c/mdn">Discourse 포럼</a>에 글을 남겨주시는 것입니다. 틀린 점, 빠진 부분,
  새로운 학습지 주제, 이해가 어려운 부분에 대한 도움 요청, 그 외 기타 질문이나 걱정거리 등 무엇이든 좋아요.
</p>

<p>
  콘텐츠의 추가와 개선에 관심이 있으시면
  <a href="/ko/docs/MDN/Contribute">MDN에 참여하는 법</a>을 보시고 연락해주세요. 배우시는 분, 가르치시는 분, 숙련 개발자
  등 누구나 환영합니다!
</p>

<h2 id="see_also">같이 보기</h2>

<h3 id="english">영어</h3>

<dl>
  <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla 개발자 뉴스레터</a></dt>
  <dd>웹 개발자를 위한 Mozilla의 뉴스레터입니다. 모둔 수준의 개발자에게 유용합니다.</dd>
  <dt><a href="https://learnjavascript.online/">Learn 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>
  <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://exlskills.com/learn-en/courses">EXLskills</a></dt>
  <dd>정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음</dd>
  <dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
  <dd>웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음</dd>
  <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web Literacy Map</a></dt>
  <dd>초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함</dd>
  <dt><a href="https://edabit.com/">Edabit</a></dt>
  <dd>다양한 코딩 문제를 접할 수 있음</dd>
</dl>

<h3 id="korean">한국어</h3>

<dl>
  <dt><a href="https://code.org/">Code.org</a> </dt>
  <dd>기초 코딩 이론과 연습. 주로 아이들이나 완전 초보자를 대상으로 함</dd>
  <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>
</dl>