학습서
===

이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다.

웹입문자를 위하여
---------

시작해 볼까요?

시작해 볼까요? 는 웹개발의 실제를 소개하는 간결한 안내서입니다. 간단한 코딩을 통해 자신만의 웹페이지를 구축할 수 있는 도구들을 준비할 수 있도록 돕습니다.



|  |  |
| --- | --- |
| HTML 학습서
입문

HTML의 기본
 (WebPlatform.org)


 HTML이 무엇인지, 무엇을 할 수 있는지, HTML의 브리핑 역사, HTML과
 같은 문서구조를 보여줍니다. 훨씬 깊은 HTML의 각 부분을 하나하나 살펴
 수행할 수 있습니다.

Wep Page의 기본 구조
 (SitePoint)

큰 그림을 통해 HTML 요소에 대해 알아봅니다.
기본 HTML 요소
 (SitePoint)


 HTML문서를 작성하는 데 사용할 수 있는 다양한 유형의 요소를
 설명합니다.

HTML기초 학습서
 (HTML Dog)

기본 학습서를 익히며 연습합니다.
HTML 과제
 (Wikiversity)


 의미있는 mark-up에 집중하여 HTML기술(예를 들어, "나는 <h2> 요소
 또는<strong> 요소를 이용합니까?")을 이러한 과제에 연마,
 사용합니다.

MDN HTML 요소 참조

 포괄적인 HTML요소에 대한 참조 및 Firefox와 다른 부라우저를
 지원하는 방법을 알려줍니다.

CodeAvengers
 (CodeAvengers.com)


 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.


고급

HTML 페이지를 빠르게 로드할 수 있게 만드는 팁

 사이트 방문자들에게 더 많은 응답을 제공하고, 웹 서버와 인터넷 연결
 부하를 줄여 웹 페이지를 최적화 할 수 있습니다.

Dive into HTML5
 (Mark Pilgrim)

HTML5, HTML의 최신버전 기능에 대해 자세히 알아보십시오.
HTML5 학습서
 (HTML5 Rocks)

HTML5 기능을 사용하여 코드를 통해 guided tour를 습득.
HTML5의 의미
 (A List Apart)

앞뒤로 호환되며, 확장 가능한 mark-up을 배울 수 있습니다.
Canvas 학습서

 Canvas 요소를통해 스크립트를 이용하여 크래픽을 만드는 방법을
 알아보십시오.

HTML5 Doctor
현재 HTML5를 사용하는 방법에 대한 기사.
HTML5 오디오의 기쁨
 (Elated)


 쉽게 웹 페이지에 사운드를 적용시키는 HTML 오디오 요소를 사용하는
 방법에 대해 알아봅니다. 더 많은 코드 예제는 학습서 안에 있습니다.

 | Javascript 학습서
입문

Codecademy (Codecademy)

 Codecademy는 자바 스크립트를 코딩하는 방법을 배울 수 있는 가장 쉬운
 방법입니다. 친구들과 함께 재미있게 배울 수 있습니다.

JavaScript 시작하기
JavaScript란 무엇이며, 어떻게 도움을 줄까?
Programming – 입문 (WebPlatform.org)

 프로그래밍의 기본 중의 기본. JavaScript를 사용하고 더 많은 것을 할
 수 있는 모범사례와 무엇을 할 수 있는지 소개하는 기사.

JavaScript 모범사례(WebPlatform.org)

 자바 스크립트를 작성(그렇지 않아도)한 명백하고 분명한 몇 가지
 모범사례에 대해 알아보십시오.

CodeAvengers
 (CodeAvengers.com)


 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.


중급

JavaScript 다시 소개하기

 중급 개발자들을 대상으로 자바 스크립트 프로그래밍 언어의 요점을
 되풀이합니다.

Eloquent JavaScript
중급 및 고급 자바 스크립트 방법론에 대한 포괄적인 가이드.
JavaScript 필수 디자인 패턴
 (Addy Osmani)

자바 스크립트에 필요한 디자인 패턴을 소개.
JavaScript 프로그래밍 언어
 (YUI Blog)

오늘날, Douglas Crockford가 탐구해온 언어와 방법.
객체 지향 JavaScript 소개
자바 스크립트 개체 모델에 대해 자세히 알아보십시오.

고급

고급 JavaScript 학습
 (John Resig)

John Resig의 고급 JavaScript 가이드.
JavaScript DOM을 소개합니다
 (Elated)


 이것은 어떤 문서이며, 어디가 유용합니까? 이 문서는 강력한 스크립트
 기능을 부드럽게 소개합니다.

불편한 API: DOM의 이론
 (YUI Blog)

Douglas Crockford가 문서 객체 모델을 설명합니다.
고급JavaScript
 (YUI Blog)


 Douglas Crockford가 자바 스크립트 프로그래머가 제작할 응용프로그램을
 선택할 수 있는 코드 패턴을 유사하게 보여드립니다.

JavaScript Garden
자바 스크립트의 가장 독특한 부분을 설명서에서 참조하십시오.
어떤 JavaScript Framework를?
 (StackOverflow)

자바 스크립트 프레임 워크를 선택하는 방법에 대한 조언.
Non-blocking JavaScript Downloads
 (YUI Blog)


 자바 스크립트를 포함하는 페이지의 다운로드 성능 향상을 위한 팁을
 제공합니다.

JavaScript 가이드

 초급에서 고급까지 모든 수준을 학습 할 수 있는 포괄적이고 정기적으로
 업데이트 되는 자가스크립트 설명서를 참조하십시오.

 |
| CSS 학습서 |
| 입문

CSS 시작하기

 이 학습서는 Cascading Style Sheets (CSS)를 소개합니다. 이것은 자신의
 컴퓨터에 시도할 수 있는 실용적인 예제와 CSS의 기본 기능을
 안내합니다.

CSS 기초
 (WebPlatform.org)


 CSS가 무엇인지, 어떻게 HTML에 적용하는지, 기본적인 CSS구문은 어떤
 것인지. 다음과 같이 배웁니다.

CSS Selector Classes
 (Wikiversity)

CSS의 클래스는 무엇입니까?
외부 CSS
 (Wikiversity)

외부 스타일 시트에서 CSS를 사용.
스타일에서 Touch 추가하기
 (W3C)

CSS로 웹페이지를 스타일링 하는 간단한 초보자 가이드.
일반적인 CSS 질문
초보자들을 위한 일반적인 질문 및 응답.
CodeAvengers
 (CodeAvengers.com)


 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.


중급

CSS 참조

 파이어 폭스와 다른 브라우저에서의 지원에 대한 세부사항, CSS 참조를
 작성합니다.

CSS 과제
 (Wikiversity)

CSS 기술을 이용해 더 많은 연습을 필요로 하는곳에 참여하십시오.
중급 CSS 개념
 (HTML.net)

Grouping, pseudo-classes 등등.
CSS Positioning 101
 (A List Apart)

표준을 준수하여 table-free layout을 사용.
CSS와 점진적 향상
 (A List Apart)

CSS로 웹 페이지에 점진적 개선을 통합 할 수 있습니다.
Fluid Grids
 (A List Apart)


 typographic grid를 이용하는 동안, 유동적으로 브라우저 창 크키를
 조절하는 레이아웃 디자인.

 | 고급

5분 동안의 CSS3
 (Addy Osmani)

CSS3 도입 된핵심 기능 중 일부에 대한 간단한 소개.
CSS를 사용한 변환
회전, 기울이기, 크기 조절 등의 변환을 CSS를 사용하여 적용합니다.
CSS 전환

 CSS 전환, 초안 CSS3 스펙의 일부 대신에 변경 내용이 즉시 적용하는
 것에 CSS 속성 변화를 보여주는 방법을 제공합니다.

Understanding CSS3 Transitions
 (A List Apart)

신중하게 상황을 선택하여 CSS3를 사용하여 전환을 시작합니다.
@font-face 윕 font를 구현하기 위한 빠른 안내
 (HTML5 Rocks)


 CSS3에서 @font-face 기능을 사용하면, 접근 조작 가능하거나 확장
 가능한 방식으로 웹에서 사용자 지정 글꼴을 사용할 수 있습니다.

 |