문의하기 Pro 로그인

🌐

웹 개발 기초

HTML, CSS, JavaScript, React, SQL — 웹 개발 A to Z

menu_book26개 챕터description85개 노트

리포트인터랙티브

1

웹의 시작 — 첫 HTML 페이지

3개 절

1웹은 어떻게 작동하는가?chevron_right 2HTML 문서의 뼈대chevron_right 3제목과 문단으로 말하기chevron_right

2

콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지

4개 절

1텍스트를 강조하는 법chevron_right 2목록으로 정리하기chevron_right 3링크로 세계 연결하기chevron_right 4이미지로 말하기chevron_right

3

CSS 첫걸음 — 색과 글꼴

3개 절

1CSS란? — 옷을 입히자chevron_right 2셀렉터의 세계chevron_right 3색과 타이포그래피chevron_right

4

Box Model — 간격의 기술

3개 절

1모든 것은 박스다chevron_right 2box-sizing과 단위의 세계chevron_right 3카드 UI 만들기chevron_right

5

Flexbox — 한 줄 레이아웃의 마법

3개 절

1Flexbox가 해결하는 문제chevron_right 2정렬의 달인 되기chevron_right 3내비게이션 바 만들기chevron_right

6

CSS Grid + 반응형 디자인

3개 절

1Grid — 2차원 레이아웃chevron_right 2반응형이란? — 모바일 퍼스트chevron_right 3프로젝트 갤러리 만들기chevron_right

7

HTML 폼 — 사용자 입력 받기

3개 절

1폼의 기본 구조chevron_right 2다양한 입력 타입chevron_right 3유효성 검사와 스타일chevron_right

8

시맨틱 HTML + 멀티미디어

3개 절

1div를 넘어서 — 시맨틱 태그chevron_right 2멀티미디어 임베딩chevron_right 3메타 태그와 SEO 기초chevron_right

9

JavaScript 기초 — 페이지에 생명을

4개 절

1JavaScript란? — 세 번째 언어chevron_right 2변수와 데이터 타입chevron_right 3조건문과 함수chevron_right 4DOM 조작 — 페이지 제어하기chevron_right

10

이벤트와 완성 — 인터랙티브 홈페이지

4개 절

1이벤트 리스너chevron_right 2배열과 반복 — 동적 콘텐츠chevron_right 3프로젝트 갤러리 필터링chevron_right 4CSS 애니메이션 + 마무리chevron_right

11

React 입문 — 컴포넌트 사고방식

3개 절

1React란? — HTML을 넘어서chevron_right 2JSX와 첫 컴포넌트chevron_right 3리스트 렌더링과 조건부 표시chevron_right

12

React 상태 관리 — 살아 움직이는 UI

4개 절

1useState — 변하는 데이터chevron_right 2이벤트와 폼 처리chevron_right 3useEffect — 외부 세계와 연결chevron_right 4미니 프로젝트 — 투두 앱chevron_right

13

SQL 기초 — 데이터의 언어

3개 절

1데이터베이스란? — 엑셀 vs DBchevron_right 2SELECT와 WHERE — 데이터 조회chevron_right 3INSERT, UPDATE, DELETE — 데이터 조작chevron_right

14

SQL 심화 + 풀스택 연결

3개 절

1JOIN — 테이블 연결하기chevron_right 2GROUP BY와 서브쿼리chevron_right 3프론트 + 백엔드 — 전체 그림chevron_right

15

TypeScript 기초 — AI가 이해하는 타입

3개 절

1타입이 왜 필요한가?chevron_right 2interface와 type — 객체의 설계도chevron_right 3제네릭과 유틸리티 타입chevron_right

16

Next.js 입문 — 풀스택 React 프레임워크

3개 절

1React만으로는 부족한 이유chevron_right 2페이지와 라우팅chevron_right 3서버 vs 클라이언트 컴포넌트chevron_right

17

Tailwind CSS — 클래스만으로 디자인

3개 절

1유틸리티 퍼스트 CSSchevron_right 2반응형과 상태 — 모바일 퍼스트chevron_right 3실전 UI 조립 — 카드, 버튼, 네비게이션chevron_right

18

API 연동 — fetch와 데이터 흐름

4개 절

1API란? — 프론트와 백의 대화chevron_right 2fetch와 async/awaitchevron_right 3React에서 API 호출하기chevron_right 4실전 — 날씨 앱 만들기chevron_right

19

Supabase — 백엔드 없이 풀스택

3개 절

1BaaS란? — 서버 코드 없이 백엔드chevron_right 2Supabase 데이터베이스 — CRUD 완전정복chevron_right 3인증과 스토리지chevron_right

20

Git 기초 — 코드의 타임머신

3개 절

1Git이 왜 필요한가?chevron_right 2브랜치와 협업chevron_right 3실전 Git 워크플로우chevron_right

21

배포 — Vercel로 세상에 공개하기

3개 절

1배포란? — 내 컴퓨터에서 세계로chevron_right 2환경변수와 도메인chevron_right 3CI/CD와 프리뷰 배포chevron_right

22

React 심화 — 상태 관리 패턴

4개 절

1Props Drilling 문제chevron_right 2useContext — React의 전역 상태chevron_right 3Zustand — 가벼운 상태 관리chevron_right 4커스텀 훅 — 로직 재사용chevron_right

23

JS 핵심 패턴 — 배열 메서드 마스터

4개 절

1map — 데이터 변환의 기본기chevron_right 2filter와 find — 조건부 추출chevron_right 3구조분해와 스프레드chevron_right 4reduce와 체이닝chevron_right

24

디버깅 — 에러 메시지 읽는 법

3개 절

1에러를 두려워하지 마라chevron_right 2브라우저 개발자 도구chevron_right 3React 디버깅 실전chevron_right

25

컴포넌트 설계 — 재사용 가능한 UI

3개 절

1좋은 컴포넌트의 조건chevron_right 2합성 패턴 — children과 슬롯chevron_right 3AI에게 컴포넌트 시키는 법chevron_right

26

인증과 보안 기초 — 로그인 구현

3개 절

1인증이란? — 너는 누구인가chevron_right 2OAuth와 소셜 로그인chevron_right 3웹 보안 기초 — 해킹 방어chevron_right

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 코스 시작하기