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

여기에서는 여러분을 "초보자"에서 "전문가"로 이끄는 걸 목표로 하지 않습니다. 다만, 여러분을 "초보자"에서 "안정된 단계"로 이끄는 걸 목표로 합니다. 그 이후에는 자신만의 스타일을 찾아야만 합니다. 그리고 그때 보게 될 MDN의 나머지 문서들이나 다른 문서들은 많은 사전지식을 필요로 할 것입니다.

코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.

중요: 이 곳의 내용은 정기적으로 추가되고 있습니다. 혹시 다루길 원하거나 설명이 부족한 주제에 대해 질문이 있으면 아래의 Contact us를 통해 연락 주시길 바랍니다.

어디서 시작해야 되는가

  • 완전 초보라면

     웹개발을 처음 하신다면 "웹 개발 시작하기" 를 추천합니다. 웹 개발에 대한 실용적인 정보를 제공하고 잇습니다.

  • 질문이 있으면

    웹개발에 대한 질문은 Common question를 살펴보시길 바랍니다. 도움이 될만한 정보가 있을 것입니다.

  • 초보적인 지식에서 나아가기

    초보 개발자에서 한 단계 더 나아가고 싶다면  HTML 과  CSS 를 상세히 배워보세요. HTML, CSS에 대한 소개를 배울 수 있습니다.

  • 스크립트 다루기

    HTML과 CSS을 잘 다루거나 코딩 경험이 많다면, JavaScript나 서버측 개발을 해 보시는 것이 좋습니다. JavaScript시작하기서버측 개발 시작하기를 시작해 보세요.

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

Random glossary entry

JavaScript
JavaScript는 프로그래밍 언어입니다. 대부분의 상황에서는 클라이언트 측에서 웹페이지를 동적으로 다룰때 사용되며,  종종 서버 측에서 Node.js와 같은 패키지를 이용하여 사용되기도 합니다.

다루는 항목

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

웹 개발 시작하기
초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.
HTML — 웹 구축하기
HTML은 웹사이트에 들어갈 내용을 작성하고, 해당 내용이 의미나 목적을 정의할 때 사용하는 언어입니다. 이 곳에서는 HTML을 자세히 설명합니다.
CSS — 웹 스타일링 익히기
CSS는 웹을 꾸미는 데 사용합니다. 애니메이션과 같은 동작을 추가하거나 웹 컨텐츠의 스타일을 지정할 때 사용할 수 있습니다. 이 곳을 통해 CSS 활용법을 알 수 있습니다.
JavaScript — 동적인 클라이언트 사이드(혹은 프론트 엔드) 언어
JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이  문서를 학습하면 JavaScript를 이해하고 사용할 수 있습니다.
접근성 — 모두를 위한 웹사이트
접근성은 누구나 지역과 장비에 상관없이 웹에 접근할 수 있도록 하기 위한 코드 작성법을 다룹니다. 이 문서를 통해 필요한 내용을 학습할 수 있습니다.
도구와 테스트
크로스 브라우징(cross browsing) 도구처럼 개발자가 개발을 하는 데 도움을 주는 도구를 설명합니다.
서버 사이드(혹은 벡 엔드) 웹 프로그래밍
클라이언트측 웹 개발에 집중해도 서버가 작동하는 방식을 파악하는 것이 여전히 유용합니다. 이 곳에서는 서버측의 작동 방식 간단히 알려주고, 두가지 유명한 프레임워크인 Django(Python)과 Express (node.js)를 사용하여 서버측 응용 프로그램을 빌드하는 방법을 알려줍니다.

코드 예제 얻기

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

  1. 컴퓨터에 Git을 설치합니다.
  2. 명령 프롬프트 (윈도우) 혹은 터미널(리눅스, 맥OSX)의 컴퓨터에서 엽니다.
  3. 명령 프롬프트/터미널이 가리키는 현재 폴더에 learning area 저장소를 복사하려면 다음 명령어를 사용하십시오:
    git clone https://github.com/mdn/learning-area
  4. 해당 위치에 learning-area 폴더가 생성된 것을 확인할 수 있습니다.

만약 learning-area를 받은지 오래됐다면, 아래 단계를 거쳐 GitHub에서 earning-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:

관련 정보

 

1. 한국어 사이트
프로그래머스
프로그래밍의 기초와 실습을 동시에 할 수 있음
인프런
다양한 최신 프로그래밍 기술을 한글로 접할 수 있음
생활코딩
웹에 대한 기초를 쌓기에 유익함
edwith
부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음
Baekjoon Online Judge
다양한 코딩 문제를 풀어볼 수 있음
2. 한국어 지원 영어 사이트
Code.org
기본적인 코딩 논리와 실습을 배울 수 있음
3. 영어 사이트
Mozilla Developer Newsletter
모든 웹 개발자를 위한 모질라 재단의 뉴스레터
EXLskills 
멘토십 및 프로젝트 기반 학습을 통해 기술 기술을 배우기위한 무료 및 오픈 코스
Web Demystified 
Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의
Codecademy
처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음
FreeCodeCamp.com
웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음
Web Literacy Map
초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함
Teaching activities
모질라 재단이 운영하는 학습 플랫폼으로 기본적인 웹 활용 방법과 개인 정보 보호부터 JavaScript와 Minecraft 해킹까지 배울 수 있음
Edabit
다양한 코딩 문제를 접할 수 있음

문서 태그 및 공헌자

최종 변경자: 2kindsofcs,