HTML/CSS/JavaScript/TypeScript를 처음 배우는 완전 초보자부터 실무 진입까지를 아우르는 웹 개발 종합 강의 시리즈입니다. 총 64강, 약 80~120시간 분량.
[단계1] 시작하기 (5강)
↓
[단계2] 언어 기초 (HTML 6강 → CSS 7강 → JavaScript 8강)
↓
[단계3] 백엔드 입문 (Node.js 6강 → 데이터베이스 6강)
↓
[단계4] 프레임워크 (TypeScript 6강 → React 심화 8강)
↓
[단계5] 실무 역량 (Git 협업 4강 + 웹 접근성 4강 + 웹 보안 4강)
첫 홈페이지를 인터넷에 배포까지. GitHub + Vercel로 실제 URL이 있는 페이지를 5분 안에 만듭니다.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | GitHub + Vercel로 5분 만에 내 홈페이지 만들기 | 첫 HTML → GitHub 업로드 → Vercel 자동 배포 |
| 02 | CSS로 내 홈페이지 예쁘게 꾸미기 | 색상·폰트·Flexbox·반응형 입문 |
| 03 | Git 명령어로 진짜 개발자처럼 일하기 | clone, add, commit, push 핵심 4명령 |
| 04 | JavaScript로 내 홈페이지에 동작 넣기 | DOM 조작, 이벤트, 다크모드 토글 |
| 05 | React + Next.js로 진짜 웹앱 만들기 | 컴포넌트, props, useState |
웹 문서의 뼈대를 만드는 마크업 언어.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | HTML 기초 | DOCTYPE, head/body, h1-h6, p, div, span |
| 02 | 텍스트 요소 | strong, em, blockquote, code, pre |
| 03 | 링크와 이미지 | a 태그, img, 절대/상대 경로 |
| 04 | 테이블 | table, tr, th, td, colspan, rowspan |
| 05 | 폼 | form, input 타입별, select, textarea |
| 06 | 시맨틱 HTML | header, nav, main, section, article, footer |
웹 페이지를 아름답고 반응형으로.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | CSS 기초 | 선택자, 우선순위, 외부 파일 연결 |
| 02 | 색상과 폰트 | hex/rgb, Google Fonts, CSS 변수 |
| 03 | 박스 모델 | margin, padding, border, box-sizing |
| 04 | 배경과 테두리 | background, border-radius, box-shadow |
| 05 | Flexbox | display:flex, justify/align, wrap, gap |
| 06 | Grid | grid-template, fr, span, areas |
| 07 | 반응형 | @media, mobile-first, rem/vw |
웹에 동작과 상호작용을.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | 변수와 타입 | let/const, 원시 타입, typeof |
| 02 | 제어문 | if/else, switch, for, while |
| 03 | 함수 | 선언식·표현식·화살표, 스코프 |
| 04 | 배열 | map, filter, find, forEach |
| 05 | 객체 | 객체 리터럴, 구조분해, 스프레드 |
| 06 | DOM 조작 | querySelector, createElement |
| 07 | 이벤트 | addEventListener, 이벤트 위임 |
| 08 | 비동기 | fetch, Promise, async/await |
서버 사이드 JavaScript와 REST API.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | Node.js 기초 | REPL, 모듈 시스템, 실행 |
| 02 | 내장 모듈 | fs, path, os, events |
| 03 | npm과 패키지 | package.json, npm install, nodemon |
| 04 | Express 기초 | 서버, 라우팅, 미들웨어 |
| 05 | REST API | GET/POST/PUT/DELETE, JSON |
| 06 | 파일 DB | JSON 영속화, .env, dotenv |
데이터를 영구 저장하는 방법.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | DB 개념 | RDBMS vs NoSQL, SQLite |
| 02 | SQL 기초 | CREATE/INSERT/SELECT/UPDATE/DELETE |
| 03 | SQL 심화 | JOIN, GROUP BY, 서브쿼리, 인덱스 |
| 04 | Node + SQLite | better-sqlite3로 CRUD API |
| 05 | Prisma ORM | schema.prisma, migrate, 관계 |
| 06 | MongoDB 기초 | NoSQL, Mongoose, Atlas |
타입 안전한 JavaScript로 진화.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | TypeScript 기초 | tsc, tsconfig, 기본 타입 |
| 02 | 타입 선언 | 변수·함수·반환 타입, void/never |
| 03 | 인터페이스와 타입 | interface, type, union, literal |
| 04 | 클래스 | public/private, 상속, implements |
| 05 | 제네릭 | 제네릭 함수·클래스, 유틸리티 타입 |
| 06 | React + TypeScript | props 타입, useState, 이벤트 |
현업 수준 React 컴포넌트 설계와 상태 관리.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | 컴포넌트 심화 | 설계 원칙, props 패턴, children |
| 02 | useEffect | Side Effect, 의존성 배열, 클린업 |
| 03 | useContext | Context API, props drilling 해결 |
| 04 | useReducer | action/dispatch, 복잡한 상태 |
| 05 | 커스텀 훅 | useFetch, useLocalStorage |
| 06 | 성능 최적화 | React.memo, useMemo, useCallback |
| 07 | React Router | Route, Link, 동적 라우팅 |
| 08 | 상태관리 라이브러리 | Zustand 기초 |
혼자 쓰는 Git을 넘어 팀 협업으로.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | 브랜치 전략 | feature 브랜치 워크플로 |
| 02 | 충돌 해결 | merge conflict, rebase vs merge |
| 03 | GitHub PR 리뷰 | PR 작성, 코드 리뷰, squash merge |
| 04 | Git 심화 | stash, reset, revert, cherry-pick |
모든 사람이 사용할 수 있는 웹.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | 접근성 개념 | WCAG 2.1, 스크린리더, Lighthouse |
| 02 | 시맨틱과 ARIA | role, aria-*, 키보드 내비게이션 |
| 03 | 폼 접근성 | label, role="alert", 색상 대비 |
| 04 | 이미지·미디어 | alt 작성법, 자막, 색맹 배색 |
실무에서 반드시 알아야 할 보안.
| # | 강의 | 핵심 내용 |
|---|---|---|
| 01 | XSS 방어 | innerHTML 위험, 이스케이프, CSP |
| 02 | CSRF·인증 | SameSite 쿠키, CSRF 토큰, JWT |
| 03 | SQL 인젝션 | Prepared Statement, ORM 방어 |
| 04 | HTTPS·환경변수 | TLS, 보안 헤더, .env 관리 |
[단계1] 시작하기 → [단계2] HTML → CSS → JavaScript → [단계3] Node.js
배포된 홈페이지부터 시작해 백엔드 기본까지.
[단계4] React 심화 → TypeScript → [단계3] 데이터베이스
실무 프론트엔드 + 백엔드 기본기.
[단계5] Git 협업 → 웹 보안 → 웹 접근성
취업·실무에 바로 필요한 협업·품질 기술.
모든 강의는 동일한 표준 구조를 따릅니다:
강의01_주제명/
├── README.md ← 강의 본문 (개념 설명 + 코드 예제)
├── 예제/ ← 강의 중 따라하는 완성 소스코드
├── 과제/ ← 과제 문제 (요구사항·힌트)
│ └── 과제.md
└── 과제정답/ ← 정답 코드 (한국어 주석 포함)
💡 과제 풀이 시: 정답을 먼저 보지 마세요. 30분 이상 직접 시도한 뒤 비교하면 학습 효과가 극대화됩니다.
- HTML/CSS/Git을 한 번도 써본 적 없는 완전 초보자
- 입문 강의는 끝냈지만 어디로 더 가야 할지 모르겠는 분
- 부분적으로 알지만 체계적으로 다시 정리하고 싶은 분
- 인터넷이 되는 노트북과 이메일 계정만 있으면 OK
자유롭게 수정·재배포 가능합니다.
문서 작성: 2026-05