프론트엔드 기초 학습 자료

• 프론트엔드 입문 과정 자료
• 차시별 강의 슬라이드와 실습 예제
• HTML, CSS, Git, JavaScript 중심

바로가기

구분	링크
전체 슬라이드	slides/
전체 실습	exercises/
HTML/CSS 실습	exercises/11/, exercises/12/
JavaScript 실습	exercises/14/, exercises/16/, exercises/17/

학습 자료

10. 개발 환경과 Git 기초

차시	주제	슬라이드	실습
101-1	생성형 AI와 LLM	PDF	-
101-2	생성형 AI의 특징	PDF	-
102	프론트엔드 개발환경 세팅	PDF	-
103-1	Git Local	PDF	-
103-2	Git Remote	PDF	-

11. HTML, CSS 기초

차시	주제	슬라이드	실습
111-1	HTML 태그와 속성	PDF	exercises/11/111-1/
111-2	폼과 HTTP 요청	PDF	exercises/11/111-2/
112-1	CSS 기초	PDF	exercises/11/112-1/
112-2	CSS 선택자와 명시도	PDF	exercises/11/112-2/
113	정적 웹 배포	PDF	exercises/11/113/

12. CSS 레이아웃

차시	주제	슬라이드	실습
121-1	Box Model	PDF	exercises/12/121-1/
121-2	CSS 레이아웃	PDF	exercises/12/121-2/
122	CSS 프레임워크	PDF	-

13. Markdown과 Git 협업

차시	주제	슬라이드	실습
131-1	Markdown	PDF	-
131-2	Git Branch	PDF	-
131-3	Git & GitHub 협업	PDF	-

14. JavaScript

차시	주제	슬라이드	실습
141-1	JavaScript 입문	PDF	exercises/14/141-1/
141-2	변수와 타입	PDF	exercises/14/141-2/
142	JavaScript 흐름제어	PDF	exercises/14/142/
143-1	JavaScript 함수 기초	PDF	exercises/14/143-1/
143-2	JavaScript 함수 심화	PDF	exercises/14/143-2/
144-1	JavaScript 자료구조 기초	PDF	exercises/14/144-1/
144-2	JavaScript 자료구조 심화	PDF	exercises/14/144-2/
145-1	JavaScript 클래스	PDF	exercises/14/145-1/
145-2	JavaScript 예외처리	PDF	exercises/14/145-2/
146	DSA	PDF	-

15. AI 에이전트와 환경 설정

차시	주제	슬라이드	실습
151-1	Agentic Coding Environment	PDF	-
151-2	Harness Engineering	PDF	-

16. DOM

차시	주제	슬라이드	실습
161-1	Document Object Model	PDF	exercises/16/161-1/
161-2	Event	PDF	exercises/16/161-2/
161-3	Browser Object Model	PDF	exercises/16/161-3/
162-1	JavaScript Callback	PDF	exercises/16/162-1/
162-2	JavaScript Promise	PDF	exercises/16/162-2/
163-1	JavaScript Fetch	PDF	exercises/16/163-1/
163-2	Supabase	PDF	exercises/16/163-2/

17. Gen AI 활용 웹앱 개발

차시	주제	슬라이드	실습
171	Gen AI 활용 웹앱 개발	PDF	exercises/17/171/
172	LangChain과 에이전트 개발	PDF	exercises/17/172/

폴더 규칙

• slides/{차시코드 앞 2자리}: 해당 분류의 강의 자료
• exercises/{차시코드 앞 2자리}/{차시코드}: 해당 차시의 실습 코드