We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

MDN Learning Area에 오신 것을 환영합니다. 기재된 글들은 웹 개발에 대해 초보자들에게 간단한 웹사이트 코딩을 시작하는데 필요한 모든 것을 제공하는 것을 목표로 하고 있습니다.

MDN의 목적은 여러분을 '초보자'에서 '전문가'가 되기보다는 '초보자'에서 편안하게 개발할 수 있도록 이끄는 것입니다. 이 글부터 시작해서 다른 MDN 컨텐츠를 통해서 많은 필요한 지식들이 필요로 하는 중,상급 리소스를 배울수 있을 것입니다.

초보자의 경우, 웹개발은 어려울지도 모릅니다. 우리는 손을 잡고 편안함을 느끼고 주제를 올바르게 배우기에 충분한 세부사항의 정보를 제공할 것입니다. 웹개발을 (독학을 하던, 수업수강을 해서든) 공부하는 학생에게도, 교재를 찾고 있는 선생님들에게도, 취미로도 단순히 웹기술의 동작을 알고 싶은 경우에도 이 곳에서 많은 것을 얻어가게 될 것입니다.

중요: Learning Area의 모든 컨텐츠는 정기적으로 내용이 추가되고 있습니다. 혹시 다루어지길 원하는 부분, 또는 부족한 부분의 토픽에 관한 질문이 있는 경우는 아래의 Contact us를 참조하셔서 연락을 주시길 바랍니다.

어디서 시작할까요

저희는 당신에게 적합한 곳을 찾아주고 싶습니다. 당신에게 적합한 곳은 어디일까요?

  • 초보자

    환영합니다! 웹개발을 처음 시작하신다면 "Web 개발 시작하기"를 읽어보시는 것이 가장 좋습니다. 읽으시면 웹개발을 처음 시작할 때 필요한 기본지식을 모두 찾아보실 수 있습니다.

  • 질문이 있는 경우

    웹개발에 대해 무엇인 질문이 있는 경우, Common question를 살펴보시길 바랍니다. 도움이 될 만한 정보가 있을 수 있습니다.

  • 기본을 넘어서

    이미 약간의 지식을 가지고 있다면 다음 단계로  HTML 과  CSS 를 상세히 배워보세요. HTML, CSS 를 소개합니다.

  • 스크립트를 다루기

    HTML과 CSS에 대해서 이미 편안해졌거나 주로 코딩에 대해서 관심을 가지고 있다면, JavaScript또는 서버측 개발을 해 보시는 것이 좋습니다. JavaScript시작하기서버측 개발 시작하기를 시작해 보세요.

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

Note: 우리는 앞으로 더 많은 핵심 학습 자료를 발표할 것입니다. 왼쪽에 있는 "고급 학습 자료" 메뉴는 MDN의 다른 학습 자료를 가르키며, 필수적인 부분은 아니지만 알아두면 유용한 정보들입니다.

Random glossary entry

Function
함수는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 변수에 의해 호출될 수 있는  코드조각이다. 함수가 호출될 때 함수의 입력으로 인수 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있다.  또한 JavaScript에서 함수는 개체가 될수도 있다.

다루는 항목

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

Getting started with the web
완전한 초보자를 위한 웹 개발에 대한 실용적 소개를 제공합니다.
HTML — Structuring the web
HTML은 컨텐츠의 여러 부분을 구조화하고 의미나 목적이 무엇인지 정의할때 사용하는 언어입니다. 이 주제에서는 HTML에 대하여 자세히 설명합니다.
CSS — Styling the web
CSS는 애니메이션과 같은 동작을 추가할 뿐만 아니라, 웹 컨텐츠의 스타일을 지정하고 레이아웃을 만드는데 사용할 수 있는 언어입니다. 이 주제는 포괄적인 CSS 적용 범위를 제공합니다.
JavaScript — Dynamic client-side scripting
JavaScript는 동적 기능을 웹 페이지에 추가하는 데 사용되는 스크립트 언어입니다. 이 주제는 JavaScript를 작성하고 이해하는 데에 익숙해지는 모든 필수적인 사항을 가르쳐줍니다..
Accessibility — make the web usable by everyone
접근성은 장애, 장치, 지역 또는 기타 차별적 요소에 관계없이 가능한 많은 사람들이 웹 컨텐츠를 사용할 수 있도록 하는 관행입니다. 이 하옥에서는 필요한 모든 정보를 제공합니다.
Tools and testing
이 주제는 크로스 브라우저 테스트 도구와 같이 개발자가 작성을 쉽게하기 위해 사용하는 도구를 다루는 곳입니다.
Server-side website programming
클라이언트측 웹 개발에 집중하는 경우에도 서버 및 서버측 코드 기능이 작동하는 방식을 파악하는 것이 여전히 유용합니다. 이 주제에서는 서버측의 작동 방식에 대한 일반적인 소개와 두가지 유명한 프레임워크인 Django(Python) 및 Express (node.js)를 사용하여 서버측 응용 프로그램을 빌드하는 방법을 자세히 설명한 세부 자습서를 제공합니다.

코드 예제 얻기

학습 영역에서 만날 수 있는 코드 예제는 모두 GitHub에서 사용할 수 있습니다. 모든 항목을 컴퓨터에 복사하려면 가장 쉬운 방법은 아래와 같습니다.

  1. 컴퓨터에 Git을 설치합니다. 이는 GitHub가 작동하는 기본 버전 제어 시스템 소프트웨어입니다.
  2. GitHub 계정에 로그인 합니다. 간단하고 쉽습니다.
  3. 한번 가입하고, 사용자 이름과 비밀번호로 github.com에 로그인합니다.
  4. 명령 프롬프트 (윈도우) 혹은 터미널(리눅스, 맥OSX)의 컴퓨터에서 엽니다.
  5. 명령 프롬프트/터미널이 가리키는 현재 위치의 learning-area 폴더에 learning area 저장소를 복사하려면 다음 명령어를 사용하십시오:
    git clone https://github.com/mdn/learning-area
  6. 이제 디렉토리를 입력하고 파일을 찾으십시오 (finder/파일 탐색기 혹은 cd command를 사용하여).

다음 단계에 따라 GitHub의 마스터 버전에 대한 변경 사항을 적용하여 learning-area 저장소를 업데이트 할 수 있습니다:

  1. 명령 프롬프트/터미널에서, cd명령어를 사용하여 learning-area 디렉토리로 이동하십시오.  예시로, 만약 상위 디렉토리에 있다면:
    cd learning-area
  2. 아래의 명령어를 사용하여 저장소를 업데이트합니다:
    git pull

Contact us

만약에 연락을 취하고 싶으실 경우 메일링 리스트IRC 채널를 통해 메세지를 보내주시는 것이 가장 좋은 방법입니다. 사이트의 틀린 점이나 새로운 학습 주제 요청, 이해가 되지 않는 사항에 대한 도움 요청 등 무엇이든 환영합니다.

컨텐츠의 개발, 개선에 대해 도움을 주실 것에 관심이 있는 경우, 어떻게 도울 수 있을까를 먼저 확인해 주세요. 여러분이 초보자나 선생님 또는 숙련된 웹개발자이어도 학습체험을 개선하는데 흥미를 가지신 분이라면 누구든지 환영합니다.

이 모든 학습 과정은 재능 기부자들을 통해 만들어졌습니다. 저희는 학생, 선생님, 전문 웹 개발자인 당신이 꼭 필요합니다. 만약에 이에 관심이 있다면 도움주는 방법을 한번 봐주시어 저희 메일링 리스트IRC 채널을 통해 소통하신다면 큰 힘이 될 것입니다. :)

Join the Learn community

Choose your preferred method for joining the discussion:

관련 정보

Codecademy
처음으로 프로그래밍 언어를 공부하기 위해 훌륭한 인터랙티브 사이트
Code.org
기본적인 코딩 논리와 실습으로 주로 어린이나 초보자를 대상으로 하는 사이트
FreeCodeCamp.com
웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있는 인터랙티브 사이트
Web Literacy Map
초급 레벨의 웹 리터러시 및 21세기 기술을 위한 프레임워크로서 카테고리별로 교육활동에 대한 액세스를 제공
Teaching activities
모질라 재단이 만든 교육(및 학습)을 위한 일련의 교육 활동으로 기본 웹을 읽고 쓰기 및 개인 정보 보호에서부터 JavaScript 및 해킹 Minecraft에 이르기까지 모든 것을 포함

문서 태그 및 공헌자

최종 변경: Olivia_J,