정가
131,000원
판매가
26,200원
총 결제 금액
80%
26,200원
웹 프론트엔드 개발에 필요한 것들을 모두 담았다. 프론트엔드 기본부터 프로젝트 실습까지!
HTML · CSS · 자바스크립트 · 리액트
프론트엔드 웹 개발 부트캠프
웹의 뼈대인 HTML과 CSS부터, 동적인 동작을 책임지는 자바스크립트, 그리고 현대 프론트엔드의 핵심인 리액트까지 프론트엔드 입문에 필요한 모든 내용을 한 번에 다루는 실전형 웹 개발 입문 과정입니다.
기초 문법 학습을 넘어, 실제로 동작하는 웹 페이지와 리액트 웹 애플리케이션을 직접 만들어 봅니다.
왜 지금 ‘프론트엔드 웹 개발’인가요?
오늘날 대부분의 서비스는 웹 브라우저를 통해 소비되고 있으며, 사용자는 빠르고 반응성이 높은 직관적인 UI/UX를 기대합니다. 프론트엔드 개발자는 이러한 사용자 경험을 실제 화면으로 구현하는 역할을 담당하며, HTML · CSS · 자바스크립트 · 리액트는 프론트엔드 개발자의 필수 기술 스택입니다.
본 강의는 개념 위주의 이론 강의가 아니라, 실제 웹 페이지 → 자바스크립트 기능 구현 → 리액트 앱 개발까지 단계적으로 따라가며 학습하는 실전형 부트캠프 과정입니다.
누구를 위한 강의인가요?
이 강의에서 배우는 핵심 내용
이 강의가 특별한 이유
HTML/CSS → 자바스크립트 → 리액트로 이어지는 자연스러운 학습 흐름으로 프론트엔드 전반을 경험합니다.
계산기, 인터랙티브 UI, API 연동 앱 등 실제로 동작하는 예제를 통해 개념을 몸으로 익힙니다.
단순 따라하기로 끝나지 않고, 본인 스타일로 변형 가능한 결과물을 남길 수 있습니다.
수강 후 기대 결과
학습 로드맵 (4단계)
1단계. HTML & CSS로 페이지 구조 만들기
• 텍스트, 이미지, 링크, 리스트, 폼 요소 구성
• CSS를 이용한 색상, 폰트, 간단한 레이아웃 적용
• 박스 모델, Flexbox를 활용한 구조적인 레이아웃 설계
결과물: 하나의 완성도 있는 정적 웹 페이지
기술: HTML5, CSS3
2단계. 자바스크립트 기초 & DOM 제어
• DOM(Document Object Model) 이해 및 요소 선택
• 클릭, 입력 등 이벤트 처리와 동적 스타일 변경
• 간단한 계산기, 탭 메뉴, 아코디언 UI 등 구현
결과물: 사용자 인터랙션이 가능한 동적 웹 페이지
기술: 자바스크립트, DOM, 이벤트 핸들링
3단계. 리액트 기초와 컴포넌트 기반 개발
• JSX 문법과 컴포넌트 작성 패턴
• props와 state를 이용한 데이터 전달과 상태 관리
• useState, useEffect 등 기본 Hooks 사용법
결과물: 간단한 컴포넌트 기반 리액트 앱
기술: 리액트, JSX, Hooks
4단계. 실전 프로젝트 & API 연동
• 리스트, 상세 보기, 로딩/에러 상태 처리
• 간단한 라우팅 구조를 갖춘 SPA 패턴 이해
• 실제 서비스에 가까운 미니 프로젝트 완성
결과물: API 연동이 포함된 리액트 기반 웹 애플리케이션
기술: 리액트, Fetch API, SPA 구조
실습 프로젝트 예시
HTML/CSS와 Flexbox, 미디어 쿼리를 활용해
다양한 화면 크기에 대응하는 랜딩 페이지를 제작합니다.
DOM 조작과 이벤트를 이용해
계산기, 탭 UI, 아코디언 메뉴 등을 구현합니다.
외부 API에서 데이터를 가져와
카드 리스트 형태로 보여주는 웹앱을 만들어 봅니다.
리액트 컴포넌트, 상태 관리, 라우팅을 조합하여
하나의 작은 단일 페이지 애플리케이션을 완성합니다.
자주 묻는 질문 (FAQ)
A. 네, 가능합니다. 기본적인 컴퓨터 활용 능력만 있다면 수강하실 수 있도록 HTML/CSS 기초부터 차근차근 설명합니다. 자바스크립트도 기초 문법부터 다룹니다.
A. 전혀 필요하지 않습니다. 본 강의는 웹 화면을 만드는 프론트엔드 개발에 초점을 맞추고 있으며, 복잡한 수학 이론이나 전공 지식을 전제로 하지 않습니다.
A. 괜찮습니다. 자바스크립트 기초를 익힌 뒤 리액트를 도입하는 흐름으로 구성되어 있으며, JSX, 컴포넌트, 상태 관리 개념을 처음 접하는 분도 이해할 수 있도록 예제로 설명합니다.
A. 일반적으로 많이 사용하는 코드 에디터(예: VS Code)와 웹 브라우저(크롬)를 기준으로 설명하며,
윈도우, 맥 모두에서 실습이 가능합니다.
강사
메타 브레인
Meta Brains는 코딩, 금융, 그리고 엑셀에 대한 깊은 열정을 가진 숙련된 소프트웨어 개발자와 금융 전문가들이 함께 설립한 전문 교육 브랜드입니다. 폭넓은 실무 경험과 교육적 전문성을 바탕으로 누구나 접근할 수 있는 세계 수준의 교육 프로그램을 제공하고 있습니다.
현재 Meta Brains는 차세대 컴퓨팅 혁명으로 주목받는 메타버스에 집중하고 있으며, 미래 기술과 혁신을 함께 이끌어 갈 다음 세대 인재를 양성하는 것을 목표로 하고 있습니다. 협업과 학습을 통해 모두가 함께 메타버스를 구축하고 개발해 나갈 수 있도록 돕는 것이 이들의 핵심 미션입니다.
커리큘럼
01-1차시 소개
02
01-2차시 HTML5 기능들
03
01-3차시 HTML5 사용의 이점
04
01-4차시 HTML5의 활용 범위 및 사용 맥락
05
01-5차시 HTML5 편집기 소개
06
01-6차시 비주얼 스튜디오 코드 다운로드 및 설치
07
02-1차시 HTML 태그란 무엇인가
08
02-2차시 HTML5 파일 구조
09
02-3차시 파일 및 폴더 구조 설계
10
02-4차시 HTML5 파일 만들기 (기초)
11
03-1차시 HTML 헤딩 태그 사용법
12
03-2차시 HTML5 인용 및 출처 태그
13
03-3차시 HTML 코드 주석 처리 방법
14
03-4차시 HTML5 속성 사용법
15
03-5차시 HTML 내에서 스타일 적용하기
16
04-1차시 앵커 태그 사용법
17
04-2차시 이미지 태그 사용법
18
04-3차시 단락 태그 사용법
19
04-4차시 줄바꿈 태그 사용법
20
04-5차시 테이블 태그 사용법
21
04-6차시 리스트 태그 사용법
22
04-7차시 비디오 요소 사용법
23
04-8차시 오디오 요소 사용법
24
05-1차시 폼(form) 태그 기본
25
05-2차시 입력(input) 타입들
26
05-3차시 입력 속성: 크기, 읽기-전용, 비활성 등
27
05-4차시 추가 입력 속성: 최소/최대, 복수 입력, 플레이스홀더 등
28
05-5차시 필수 입력 (required) 설정
29
06-1차시 블록 요소 vs 인라인 요소 — 개념 소개
30
06-2차시 블록 / 인라인 요소의 실제 동작 분석
31
07-1차시 HTML5 파트 정리 및 요약
32
08-1차시 CSS3 소개
33
08-2차시 CSS3 문법
34
08-3차시 CSS3의 활용 방식들
35
08-4차시 CSS3의 종류
36
08-5차시 CSS 선택자와 색상 설정
37
09-1차시 배경 스타일
38
09-2차시 테두리(border) 스타일
39
09-3차시 외곽선(outline) 스타일
40
09-4차시 높이와 너비 설정
41
09-5차시 여백(margin)과 안쪽 여백(padding) 설정
42
10-1차시 텍스트 정렬 (text-align)
43
10-2차시 텍스트 장식 (text-decoration)
44
10-3차시 텍스트 변환 (text-transform)
45
10-4차시 텍스트 간격 (letter/line spacing)
46
10-5차시 글꼴 패밀리 설정 (font-family)
47
10-6차시 아이콘(font-awesome) 사용법
48
11-1차시 display 속성
49
11-2차시 위치 지정 (position)
50
11-3차시 z-index
51
11-4차시 overflow 속성
52
11-5차시 float 속성
53
11-6차시 DOM 모델 관련 속성
54
11-7차시 Pseudo-Classes (1)
55
11-8차시 Pseudo-Classes (2)
56
11-9차시 Pseudo-Elements
57
12-1차시 불투명도(opacity)와 !important
58
12-2차시 border-radius
59
12-3차시 box-shadow
60
13-1차시 Grid 시스템
61
13-2차시 Flexbox
62
13-3차시 미디어 쿼리 (반응형 디자인)
63
14-1차시 미니 프로젝트
64
15-1차시 자바스크립트 소개 및 역사
65
15-2차시 자바스크립트 문법 및 개요
66
15-3차시 자바스크립트 실행 방식
67
15-4차시 자바스크립트에서 HTML 태그 사용하기
68
16-1차시 자바스크립트의 var
69
16-2차시 전역 및 지역 변수
70
16-3차시 고급 console.log 사용법
71
17-1차시 if 문
72
17-2차시 if-else 문
73
17-3차시 삼항 연산자
74
17-4차시 switch 문
75
17-5차시 if-else if 문
76
17-6차시 break / continue
77
17-7차시 데이터 타입
78
18-1차시 산술 연산자
79
18-2차시 할당 연산자
80
18-3차시 비교 연산자
81
19-1차시 alert 팝업
82
19-2차시 confirm 팝업
83
19-3차시 prompt 팝업
84
19-4차시 함수 기본
85
19-5차시 매개변수 있는 함수
86
19-6차시 반환값 있는 함수
87
20-1차시 이벤트 처리
88
21-1차시 while 루프
89
21-2차시 do-while 루프
90
21-3차시 for 루프
91
21-4차시 중첩 루프
92
22-1차시 배열 기초
93
22-2차시 배열 수정 및 삭제
94
22-3차시 sort / reverse
95
22-4차시 pop / push
96
22-5차시 shift / unshift
97
22-6차시 concat / join
98
22-7차시 slice / splice
99
22-8차시 isArray 메서드
100
22-9차시 indexOf / lastIndexOf
101
22-10차시 forEach 메서드
102
22-11차시 toString(), valueOf(), fill 메서드
103
22-12차시 includes 메서드
104
22-13차시 some / every 메서드
105
22-14차시 find / findIndex 메서드
106
22-15차시 filter 메서드
107
23-1차시 객체 (Objects)
108
23-2차시 배열을 객체로 취급 (Arrays as Objects)
109
23-3차시 for-in 루프
110
24-1차시 문자열 메서드 — 1부
111
24-2차시 문자열 메서드 — 2부
112
24-3차시 문자열 메서드 — 3부
113
25-1차시 숫자 메서드 (Number methods)
114
25-2차시 Math 메서드 — 1부
115
25-3차시 Math 메서드 — 2부
116
25-4차시 Date 메서드
117
26-1차시 DOM 모델 기초
118
26-2차시 DOM 기타 객체들
119
26-3차시 DOM 요소 가져오기 (Get Methods)
120
26-4차시 DOM 스타일 지정
121
26-5차시 addEventListener (이벤트 리스너)
122
26-6차시 useCapture 옵션
123
26-7차시 classList 메서드
124
26-8차시 부모 노드 다루기 (Parent Nodes)
125
26-9차시 자식 노드들 (Children Nodes)
126
26-10차시 first / last 자식 노드
127
26-11차시 이전 / 다음 형제 노드
128
26-12차시 요소 생성 / 텍스트 노드 생성
129
26-13차시 요소 삽입: appendChild / insertBefore
130
26-14차시 요소 삽입: insertAdjacentElement / insertAdjacentHTML
131
27-1차시 마무리 및 정리
132
28-1차시 리액트 소개
133
28-2차시 첫 리액트 앱 만들기
134
28-3차시 리액트에서 JSX 사용법
135
29-1차시 리액트에서 인라인 / 내부 스타일링
136
29-2차시 리액트에서 템플릿 리터럴 활용
137
29-3차시 리액트 컴포넌트 기본
138
29-4차시 리액트 Props
139
29-5차시 리액트 Hooks
140
30-1차시 리액트 컴포넌트 계층 구조 이해
141
30-2차시 조건부 렌더링 (Conditional Rendering)
142
30-3차시 리액트 useEffect 훅
143
31-1차시 리액트 라우터 DOM
144
31-2차시 라우팅 링크 설정
145
31-3차시 에러 페이지 처리 (리액트 라우터)
146
31-4차시 useNavigate() 훅 사용
147
32-1차시 첫 프로젝트 — Part 1
148
32-2차시 첫 프로젝트 — Part 2
149
33-1차시 계산기 앱 만들기 — Part 1
150
33-2차시 계산기 앱 만들기 — Part 2
151
34-1차시 RESTful API를 React로 구현 — Part 1
152
34-2차시 RESTful API를 React로 구현 — Part 2
153
34-3차시 RESTful API를 React로 구현 — Part 3
154
34-4차시 JSX 내부에서 array.map() 사용하기
155
34-5차시 리액트에서 Material UI 사용법
156
35-1차시 마무리 / 총정리
수강 후기
첫번째 리뷰어가 되어주세요.
소중한 후기가 다른 분들께 도움이 될 거에요.
정가
131,000원
판매가
26,200원
총 결제 금액
80%
26,200원
131,000원
80%
26,200원