From c7855ff68982c6b4d93e7f9ffc597930c098ac27 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Fri, 4 Jun 2021 07:00:04 +0900 Subject: Update Learn main page (#1021) * Update Learn main page * Remove conflicting Learn main page --- files/ko/_redirects.txt | 2 +- files/ko/conflicting/learn/index.html | 23 --- files/ko/learn/index.html | 308 ++++++++++++++++++++++------------ 3 files changed, 201 insertions(+), 132 deletions(-) delete mode 100644 files/ko/conflicting/learn/index.html (limited to 'files/ko') diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 6c9de7b3ba..c13543eadf 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -453,7 +453,7 @@ /ko/docs/Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON /ko/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON /ko/docs/Learn/Server-side/Express_Nodejs/개발_환경 /ko/docs/Learn/Server-side/Express_Nodejs/development_environment /ko/docs/Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 /ko/docs/Learn/Server-side/Express_Nodejs/skeleton_website -/ko/docs/Learn/Skills /ko/docs/conflicting/Learn +/ko/docs/Learn/Skills /ko/docs/Learn /ko/docs/Learn/WebGL/By_example /ko/docs/Web/API/WebGL_API/By_example /ko/docs/Learn/WebGL/By_example/Clearing_by_clicking /ko/docs/Web/API/WebGL_API/By_example/Clearing_by_clicking /ko/docs/Learn/WebGL/By_example/Detect_WebGL /ko/docs/Web/API/WebGL_API/By_example/Detect_WebGL diff --git a/files/ko/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html deleted file mode 100644 index b3fa083bab..0000000000 --- a/files/ko/conflicting/learn/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: 스킬 -slug: conflicting/Learn -tags: - - Index -translation_of: Learn -translation_of_original: Learn/Skills -original_slug: Learn/Skills ---- -

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

- -
-
Web Mechanics
-
웹 생태계를 이해한다
-
Infrastructure
-
웹의 기술적 스택을 이해한다
-
Coding/Scripting
-
상호적인 웹 경험(Web experience)를 만든다.
-
Design and Accessibility
-
웹 리소스를 이용하여 모두와 효과적으로 의사소통한다
-
Composing for the web
-
웹 콘텐츠를 만들고 관장한다
-
diff --git a/files/ko/learn/index.html b/files/ko/learn/index.html index ce9e422ff5..be7214226f 100644 --- a/files/ko/learn/index.html +++ b/files/ko/learn/index.html @@ -15,153 +15,245 @@ tags: - 학습 translation_of: Learn --- +
{{LearnSidebar}}
-
-

환영합니다! 이곳에서 다루는 문서들은 웹개발을 처음 접하는 초보자를 대상으로 합니다. 그리고 간단한 웹사이트를 만들기 위해 필요한 모든 것들을 담고 있습니다.

-
+

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

-

여기에서는 여러분을 "초보자"에서 "전문가"로 이끄는 걸 목표로 하지 않습니다. 다만, 여러분을 "초보자"에서 "익숙한 단계"로 이끄는 걸 목표로 합니다. 그 이후에는 자신만의 스타일을 찾아야만 합니다. 그리고 그때 보게 될 MDN의 나머지 문서들이나 다른 문서들은 많은 사전지식을 필요로 할 것입니다.
-
- 코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.

+

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

-

새로운 콘텐츠?

+

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

-

이 곳의 내용은 정기적으로 추가되고 있습니다. 변경점을 추적하기 위해 Learning area release note를 관리하기 시작했으니, 정기적으로 확인해주세요!

+

새로운 콘텐츠

-

원하는 주제나 빠진 것 같은 부분에 대한 질문은 저희의 Discourse 포럼에 남겨주세요.

+

+ 학습지에는 내용이 계속 추가되고 있습니다. 바뀐 점을 알려드리기 위해 + 학습지 릴리즈 노트를 관리하고 있으니 종종 찾아오세요! +

-

어디서 시작해야 하나

+

+ 빠진 부분을 찾으셨거나, 추가로 원하는 주제가 있으신가요? + Discourse 포럼에 남겨주세요. +

- +

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

+ +

+ 시작하기 +

+ + +

시작하기

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

참고: 기술 정의에 대한 용어집를 제공합니다. 

+

+ 참고: MDN 용어집에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 + 개발에 관한 질문이 있으시면 자주 하는 질문 문서도 확인해보세요. +

-

{{LearnBox({"title":"Random glossary entry"})}}

+ -

다루는 주제

+

다루는 주제

-

다음은 MDN 학습 영역에서 다루는 모든 주제의 목록입니다.

+

다음 목록은 MDN 학습지에서 다루는 모든 주제의 목록입니다.

-
웹 개발 시작하기
-
초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.
-
HTML — 웹 구축하기
-
HTML은 웹사이트에 들어갈 내용을 작성하고, 해당 내용이 의미나 목적을 정의할 때 사용하는 언어입니다. 이 곳에서는 HTML을 자세히 설명합니다.
-
CSS — 웹 스타일링 익히기
-
CSS는 웹을 꾸미는 데 사용합니다. 애니메이션과 같은 동작을 추가하거나 웹 컨텐츠의 스타일을 지정할 때 사용할 수 있습니다. 이 곳을 통해 CSS 활용법을 알 수 있습니다.
-
JavaScript — 동적인 클라이언트 사이드(혹은 프론트 엔드) 언어
-
JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이  문서는 JavaScript를 이해하고 작성하는데 익숙해지는데 필요한 핵심적인 내용을 모두 가르쳐줍니다.
-
Web forms — 사용자 데이타로 작업하기
-
Web forms는 사용자와 정보를 주고받기 위한 강력한 도구입니다 — 주로 사용자의 정보를 수집하거나, 유저 인터페이스를 제공하기 위해 사용됩니다. 관련 문서에서 web 폼을 구성하고, 꾸미고, web form과 통신하기 위해 필요한 핵심적인 내용을 모두 다룹니다.
-
접근성 — 모두를 위한 웹사이트
-
접근성은 신체적인 장애나 지역과 장비및 기타 개인간 차별을 유발하는 요소에 상관없이 누구나 웹에 접근할 수 있도록 하기 위한 코드 작성법을 다룹니다. 이 문서를 통해 필요한 모든 내용을 학습할 수 있습니다.
-
Web 성능 — 웹사이트를 빠르고 즉시 반응하도록 만들기 
-
Web 성능은  사용자의 인터넷 대역이나, 화면 크기, 네트워크나 장비의 능력에 관계없이, 웹 어플리케이션의 다운로드를 빠르게하고 사용자의 조작에 즉시 반응하도록 하는 기술입니다. 
-
도구와 테스트
-
크로스 브라우징(cross browsing) 도구처럼 개발자가 개발을 하는 데 도움을 주는 도구를 설명합니다.
-
서버 사이드(혹은 벡 엔드) 웹 프로그래밍
-
클라이언트측 웹 개발에 집중해도 서버가 작동하는 방식을 파악하는 것이 여전히 유용합니다. 이 곳에서는 서버측의 작동 방식 간단히 알려주고, 두가지 유명한 프레임워크인 Django(Python)과 Express (node.js)를 사용하여 서버측 응용 프로그램을 빌드하는 방법을 알려줍니다.
+
웹과 함께 시작하기
+
초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.
+
HTML — 웹의 구조 짜기
+
HTML은 웹 사이트의 콘텐츠를 구성하고, 각각의 의미나 목적을 정의하는 언어입니다.
+
CSS — 웹 스타일링
+
CSS는 웹 콘텐츠의 스타일과 레이아웃은 물론 애니메이션과 같은 추가 동작을 지정할 때 사용하는 언어입니다.
+
JavaScript — 동적 클라이언트 사이드 스크립팅
+
+ JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이 주제는 JavaScript 코드의 작성과 이해에 + 익숙해지기 위한 모든 기초를 다룹니다. +
+
웹 양식 — 사용자 데이터로 작업하기
+
+ 웹 양식은 사용자와 상호작용을 하기 위한 강력한 도구입니다. 주로 사용자에게서 데이터를 받거나, 직접 조절할 수 있는 + 사용자 인터페이스를 제공할 때 사용합니다. 이 주제에서는 양식의 구조와 스타일링, 그리고 상호작용까지 모든 것을 + 다룹니다. +
+
접근성 — 모두를 위한 웹
+
+ 접근성에서는 장애, 장비, 지역 및 기타 사람간의 차이점에 상관 없이 누구나 웹 콘텐츠에 접근할 수 있도록 구성하는 + 방법을 다룹니다. +
+
웹 성능 — 빠르고 즉각 반응하는 웹 사이트
+
+ 웹 성능에서는 사용자의 인터넷 대역이나 화면 크기, 네트워크, 장비의 성능에 관계하지 않고 웹 어플리케이션의 다운로드는 + 빠르게, 사용자 인터페이스의 반응은 즉각 일어나도록 만드는 기술을 다룹니다. +
+
도구와 테스트
+
+ 도구와 테스트에서는 크로스 브라우징 테스트, 린팅, 포맷팅, 변환 도구, 버전 관리, 배포, 클라이언트 사이드 JavaScript + 프레임워크를 다룹니다. +
+
서버 사이드 웹 사이트 프로그래밍
+
+ 클라이언트 사이드 웹 개발에 집중하시더라도, 서버와 서버 사이드 코드의 작동 방식을 파악하는 것은 여전히 유용합니다. + 여기서는 서버의 일반적인 동작 방식과 함께, 두 개의 유명한 프레임워크인 Django(Python)와 Express (node.js)를 사용해 + 서버 사이드 앱을 만드는 방법에 대한 상세한 자습서를 제공합니다. +
-

코드 예제 얻기

+

코드 예제 받기

-

학습 영역에서 만날 수 있는 코드 예제는 모두 GitHub에서 사용할 수 있습니다. 코드 예제를 컴퓨터로 복사하고 싶다면, 가장 쉬운 방법은 가장 최신의 master 코드 브랜치를  ZIP으로 다운로드 (<-클릭하면 zip 파일이 다운로드됨) 받는것입니다.

+

+ 학습지의 모든 코드 예제는 + GitHub에서도 보실 수 있습니다. 코드 예제를 한꺼번에 + 컴퓨터로 복사하고 싶으신가요? + 가장 최신의 master 코드 브랜치를 ZIP으로 다운로드하시면 가장 쉽게 받아가실 수 있습니다. +

-

자동 업데이트가 되는 좀더 유연한 방법으로 저장소(repo)를 복사하고 싶다면, 다음과 같이 좀 더 복잡한 과정을 따라하면 됩니다.

+

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

    -
  1. 컴퓨터에 Git을 설치합니다. 이것은 GitHub가 사용하는 버전 관리 소프트웨어 입니다.
    2. -
  2. 명령 프롬프트 (윈도우) 혹은 터미널(리눅스, 맥OSX)의 컴퓨터에서 엽니다.
    3. -
  3. 명령 프롬프트/터미널이 가리키는 현재 폴더에 learning area 저장소를 복사하려면 다음 명령어를 사용하십시오: - 
    git clone https://github.com/mdn/learning-area
    -
    4. -
  4. 해당 위치에 learning-area 폴더가 생성된 것을 확인할 수 있습니다.
    5. +
  5. + 컴퓨터에 Git을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤 + 시스템입니다. +
    6. +
  6. + 명령 프롬프트(Windows) 또는 터미널(Linux, macOS)을 여세요. +
    7. +
  7. + 명령 프롬프트/터미널이 가리키는 현재 위치에 learning-area 저장소를 복사하시려면 다음 명령어를 + 입력하세요. + 
    git clone https://github.com/mdn/learning-area
    +
    8. +
  8. + 이제 탐색기/Finder 또는 + cd 명령어를 사용해서 + 원하시는 파일을 찾아보세요. +
-

만약 learning-area를 받은지 오래됐다면, 아래 단계를 거쳐 GitHub에서 earning-area에 대한 최신 정보를 업데이트 받을 수 있습니다:

+

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

    -
  1. 명령 프롬프트/터미널에서, cd명령어를 사용하여 learning-area 디렉토리로 이동하십시오.  예를 들어 만약 상위 디렉토리에 있다면: +
  2. + 명령 프롬프트/터미널에서 cd명령어를 사용해 learning-area 폴더로 이동하세요. 만약 현재 + 위치가 learning-area 폴더의 바로 위라면, + + 
    cd learning-area
    - 
    cd learning-area
    -
    3. -
  3. 아래의 명령어를 사용하면 저장소에 있는 정보를 최신 상태로 업데이트합니다: - 
    git pull
    -
    4. + 입력하시면 됩니다. + +
  4. + 아래의 명령어를 입력해 저장소를 업데이트하세요. + 
    git pull
    +

연락처

-

질의 사항이 있는 경우 메일링 리스트나 IRC 채널를 통해 메세지를 보내주실 수 있습니다. 내용 오류나 새로운 학습 주제 요청, 이해가 되지 않는 사항에 대한 질의 등 무엇이든 환영합니다.
-
- 이 모든 학습 과정은 재능 기부자들의 도움으로 만들 수 있었습니다. 컨텐츠의 개발, 개선에 대해 도움을 주실 것에 관심이 있는 경우, 도움을 주는 방법을 한번 봐주시어 메일링 리스트나 IRC 채널을 통해 소통하신다면 큰 힘이 될 것입니다. 저희는 여러분들이 필요합니다. 이 학습 플랫폼을 개선하는데 열정을 가지신 분이라면 누구든지 환영합니다.

+

+ 어떤 주제건 저희에게 연락하고 싶으실 때 가장 좋은 방법은 + Discourse 포럼에 글을 남겨주시는 것입니다. 틀린 점, 빠진 부분, + 새로운 학습지 주제, 이해가 어려운 부분에 대한 도움 요청, 그 외 기타 질문이나 걱정거리 등 무엇이든 좋아요. +

-

관련 정보

+

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

-

** 이곳에 있던 한국어 사이트는 새로 개정되어 승인된 English (US) 버전과 동기하여 비교하기 쉽도록 아래쪽 사용자 추천 사이트 로 내렸습니다.**

+

같이 보기

-

영어 원문에 있는 사이트

+

영어

-
Mozilla Developer Newsletter
-
모든 웹 개발자를 위한 모질라 재단의 뉴스레터
-
JavaScript 배우기
-
Web 개발자 지망생을 위한 훌륭한 자료  — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌 는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.
-
Web Demystified 
-
Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의
+
Mozilla 개발자 뉴스레터
+
웹 개발자를 위한 Mozilla의 뉴스레터입니다. 모둔 수준의 개발자에게 유용합니다.
+
Learn JavaScript
+
+ Web 개발자 지망생을 위한 훌륭한 자료  — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 + JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다. +
+
Web Demystified
+
+ Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의 +
+
Codecademy
+
처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음
+
BitDegree
+
게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함
+
EXLskills
+
정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음
+
freeCodeCamp.com
+
웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음
+
Web Literacy Map
+
초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함
+
Edabit
+
다양한 코딩 문제를 접할 수 있음
-
-
Codecademy
-
처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음
-
BitDegree
-
게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함
-
Code.org 
-
기초 코딩 이론과 연습. 주로 아이들이나 완전 초보자를 대상으로 함
-
EXLskills
-
정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음
-
freeCodeCamp.com
-
웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음
-
- -
-
Web Literacy Map
-
초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함
-
Edabit
-
다양한 코딩 문제를 접할 수 있음
-
+

한국어

-
-

영어 원문에 없는 사용자 추천 사이트 

-
-
프로그래머스
-
프로그래밍의 기초와 실습을 동시에 할 수 있음
-
생활코딩
-
웹에 대한 기초를 쌓기에 유익함
-
edwith
-
부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음
-
Baekjoon Online Judge
-
다양한 코딩 문제를 풀어볼 수 있음
-
Teaching activities
-
모질라 재단이 운영하는 학습 플랫폼으로 기본적인 웹 활용 방법과 개인 정보 보호부터 JavaScript와 Minecraft 해킹까지 배울 수 있음
-
w3schools 
-
세계에서 가장 큰 웹 개발자 사이트가 모토이며, 모질라와는 달리 설명하는 문장이 길지않고 짤막한 단문으로 이해하기 쉬우며 예제 중심으로 설명하고 있음. 또한 사이트 메뉴가 원하는 주제를 찾기 쉽게 구성 되어 있음
+
Code.org 
+
기초 코딩 이론과 연습. 주로 아이들이나 완전 초보자를 대상으로 함
+
프로그래머스
+
프로그래밍의 기초와 실습을 동시에 할 수 있음
+
생활코딩
+
웹에 대한 기초를 쌓기에 유익함
+
edwith
+
부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음
-- cgit v1.2.3-54-g00ecf