Web 개발 학습하기

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

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

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

프런트엔드 웹 개발자가 되고자 하시나요?

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

시작하기

시작하기

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

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

다루는 주제

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

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

코드 예제 받기

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

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

컴퓨터에 Git을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤 시스템입니다.
명령 프롬프트(Windows) 또는 터미널(Linux, macOS)을 여세요.
명령 프롬프트/터미널이 가리키는 현재 위치에 learning-area 저장소를 복사하시려면 다음 명령어를 입력하세요.
bash
```
git clone https://github.com/mdn/learning-area
```
이제 탐색기/Finder 또는 cd 명령어를 사용해서 원하시는 파일을 찾아보세요.

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

명령 프롬프트/터미널에서 cd명령어를 사용해 learning-area 폴더로 이동하세요. 만약 현재 위치가 learning-area 폴더의 바로 위라면,
bash
```
cd learning-area
```
입력하시면 됩니다.
아래의 명령어를 입력해 저장소를 업데이트하세요.
bash
```
git pull
```

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

한국어

생활코딩: 웹에 대한 기초를 쌓기에 유익함
edwith: 부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음

Web 개발 학습하기

시작하기

다루는 주제

코드 예제 받기

연락처

같이 보기

영어

한국어