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

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

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

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

어디서 시작해야 되는가

  • 완전 초보라면

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

  • 질문이 있으면

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

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

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

  • 스크립트 다루기

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

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

Random glossary entry

XHTML
HTML은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.

다루는 항목

다음은 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
다양한 코딩 문제를 접할 수 있음

문서 태그 및 공헌자

최종 변경자: ehgus,