Front-end web developer

프론트 개발자가 되는 과정에 오신 것을 환영합니다!

여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공합니다. 각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. 각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.

다루는 주제

다루는 내용은 다음과 같습니다.

기본 설정 및 학습 방법에 대한 학습
웹 표준 및 모범 사례(예: 접근성 및 브라우저간 호환성)
웹 구조와 의미를 제공하는 언어인 HTML
웹 페이지 스타일을 지정하는 언어인 CSS
웹에서 동적인 기능을 만드는데 사용되는 스크립트 언어인 JavaScript
최신 클라이언트 웹 개발을 용이하게 해주는 도구

섹션을 순서대로 살펴볼 수 있지만, 각 섹션은 독립적입니다. 예를들어 이미 HTML을 알고 있는 경우 CSS 섹션으로 건너뛸 수 있습니다.

전제 조건

이 강좌를 시작하기 위한 사전 지식은 필요하지 않습니다. 최신 웹 브라우저를 실행할 수 있는 컴퓨터, 인터넷 연결, 학습 의지만 있으면 됩니다.

프론트 엔드 웹 개발이 자신에게 적합한지 확실하지 않거나, 더 길고 완전한 과정을 시작하기 전에 부드러운 소개를 원하면 먼저 웹과 함께 시작하기 를 읽어보세요.

도움말 얻기

우리는 가능한 한 편안하게 프론트 엔드 웹 개발을 학습할 수 있도록 노력했습니다. 그러나 무언가를 이해하지 못하거나 일부 코드가 작동하지 않아 학습을 멈추게 될 수 있습니다.

당황하지 마세요. 우리는 초보자든 전문 웹 개발자든 모두 어떤 문제에 막혀 있습니다. 학습 및 도움말 얻기 문서는 정보를 찾고 도움을 줄 수 있는 일련의 팁을 제공합니다. 그래도 문제가 해결되지 않는다면 Discourse forum에 문제를 게시하세요.

시작합시다. 행운을 빌어요!

학습 과정

시작하기

완료 시간: 1.5–2 시간

전제 조건

기본적인 컴퓨터 사용 능력 외에는 아무것도 없습니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

이 강좌에는 평가가 없습니다. 그러나 건너뛰지 마세요. 강좌의 후반부에 있는 연습문제를 준비하는것도 중요합니다.

가이드

기본 소프트웨어 설치하기— 기본 도구 설정 (15 분 읽기)
웹과 웹 표준에 대한 배경 (45 분 읽기)
학습과 도움말 얻기 (45 분 읽기)

HTML을 사용한 의미론과 구조

완료 시간: 35–50 시간

전제 조건

기본적인 컴퓨터 활용 능력과 기본적인 웹 개발 환경 외에는 아무것도 없습니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

각 모듈(교과목 단위)의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다. 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

모듈

HTML 소개 (15–20 시간 읽기/평가)
Multimedia 와 embedding (15–20 시간 읽기/학습)
HTML tables (5–10 시간 읽기/학습)

CSS를 사용한 스타일링 및 레이아웃

완료 시간: 90–120 시간

전제조건

CSS를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 HTML 소개 를 먼저 공부해야 합니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다. 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

모듈

CSS 첫 번째 단계 (10–15 시간 읽기/학습)
CSS 구성 블록 (35–45 시간 읽기/학습)
텍스트 스타일링 (15–20 시간 읽기/학습)
CSS 레이아웃 (30–40 시간 읽기/학습)

추가 자료

CSS 레이아웃 쿡북

JavaScript와의 상호작용

완료 시간: 135–185 시간

전제 조건

Javascript를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 HTML 소개 를 먼저 공부해야 합니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다. 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

모듈

JavaScript 첫걸음 (30–40 시간 읽기/평가)
JavaScript 구성 요소 (25–35 시간 읽기/평가)
JavaScript 객체 소개 (25–35 시간 읽기/평가)
Client-side web APIs (30–40 시간 읽기/평가)
비동기 JavaScript (25–35 시간 읽기/평가)

웹 폼 — 유저 데이터 작업

완료 시간: 40–50 시간

전제 조건

Form에는 HTML, CSS, and JavaScript 지식이 필요합니다. Form 작업의 복잡성을 감안할 때 자주 접하는 내용입니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다. 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

모듈

HTML 폼 가이드(40–50 시간)

모두를 위한 웹 작동 시키기

완료 시간: 60–75 시간

전제 조건

이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 많은 기술과 모범 사례(best practices)가 여러 기술에 적용됩니다.

앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다. 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

모듈

크로스 브라우저 테스팅 (25–30 시간 읽기/평가)
접근성 (20–25 시간 읽기/평가)