---
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기술(예를 들어, "나는 &lt;h2&gt; 요소 또는&lt;strong&gt; 요소를 이용합니까?")을 이러한 과제에 연마, 사용합니다.</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>