Web 개발 학습하기

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

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

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

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

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

시작하기

시작하기

처음에서 시작

처음부터 시작하시는 것이면 웹과 함께 시작하기 모듈부터 시작해보세요. 웹 개발의 실용적인 소개를 제공합니다.

기본기를 넘어

이미 기본 지식은 알고 계시면, 다음 단계는 HTMLCSS를 자세히 알아보는 것입니다. 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으로 다운로드하시면 가장 쉽게 받아가실 수 있습니다.

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

  1. 컴퓨터에 Git을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤 시스템입니다.

  2. 명령 프롬프트(Windows) 또는 터미널(Linux, macOS)을 여세요.

  3. 명령 프롬프트/터미널이 가리키는 현재 위치에 learning-area 저장소를 복사하시려면 다음 명령어를 입력하세요.

    bash
    git clone https://github.com/mdn/learning-area
    
  4. 이제 탐색기/Finder 또는 cd 명령어를 사용해서 원하시는 파일을 찾아보세요.

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

  1. 명령 프롬프트/터미널에서 cd명령어를 사용해 learning-area 폴더로 이동하세요. 만약 현재 위치가 learning-area 폴더의 바로 위라면,

    bash
    cd learning-area
    

    입력하시면 됩니다.

  2. 아래의 명령어를 입력해 저장소를 업데이트하세요.

    bash
    git pull
    

연락처

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

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

같이 보기

영어

Mozilla 개발자 뉴스레터

웹 개발자를 위한 Mozilla의 뉴스레터입니다. 모둔 수준의 개발자에게 유용합니다.

Learn JavaScript

Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.

Web Demystified

Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의

Codecademy

처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음

BitDegree

게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함

EXLskills

정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음

freeCodeCamp.com

웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음

Web Literacy Map

초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함

Edabit

다양한 코딩 문제를 접할 수 있음

한국어

생활코딩

웹에 대한 기초를 쌓기에 유익함

edwith

부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음