풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

네이버
GS리테일
메가존
LG유플러스
베스핀글로벌

베스핀글로벌

임직원들도 이 강의를 듣고 있어요!

네이버
GS리테일
메가존
LG유플러스
베스핀글로벌

베스핀글로벌

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.9

5.0

hanyn

100% 수강 후 작성

실제 사이트들에서 보았던 웹 기술(슬라이드 등)을 직접 구현해볼 수 있어서 좋았습니다. 프런트엔드를 공부하는 길이 막막했는데 강의를 통해 어느정도 감을 잡은 것같습니다. 인터넷강의의 한계를 거의 느끼지 못할 만큼 알찬 강의 자료 제공, 짜임새있는 강의 구성과 시간분배 등 여러모로 집중도 하기 좋고 배울 것이 많은 강의입니다. 프런트엔드 공부에 대한 자신감과 흥미를 불어넣는 강의라고 생각합니다. 이 강의를 발판으로 앞으로도 개발공부 이어나가며 언젠가 꼭 잔재미코딩님같은 개발자가 되고싶습니다 ! 감사합니다.

5.0

opert93

100% 수강 후 작성

프론트엔드의 기초를 확실하게 익힐 수 있어 좋았습니다. 프론트의 프레임워크를 바로 다루지 않고 기본기를 다지는 것이 저에게 더 도움이 되었다고 생각합니다. 이를 기반으로 React/Flutter 등 최신 프레임워크를 학습해보겠습니다. 강사님 늘 감사합니다.

5.0

jypark3152

100% 수강 후 작성

차근차근 기초부터 설명되어 있어 처음부터 모르더라도 알기쉽게 강좌가 구성되어 있습니다. 강의 길이도 너무 길지 않아 지루해지지 않도록 시간배분도 적절합니다

수강 후 이런걸 얻을 수 있어요

  • 쉽고 견고하게 프런트엔드 기본기 쌓기

  • 반응형, 크로스 브라우징 웹서비스 개발

  • 상세한 모던 HTML 과 CSS 기능

  • 호환성까지 고려한 VanillaJS (Javascript)

  • 최신 상용화 서비스 개발을 위한 HTML/CSS/JS+ES6 풀세트

네카라쿠배도 사내 강의로 선택하는 공식 강의!  입문자를 위한 프런트엔드 웹기술 기본기를 다져줄  완성도 높은 강의 시리즈 (풀스택 Part2)

본 강의는 풀스택 강의 시리즈 Part2 강의로 파이썬 백엔드 (Part1) 강의에 이어서, 풀스택을 위한 탄탄한 프론트엔드 기본을 익히는 강의입니다. 상용화도 가능한 웹서비스 개발을 위한 HTML5, CSS, Javascript (VanillaJS, 바닐라 자바스크립트) + ES6 을 상세히 정리하고 익히는 강의입니다.

일반적인 IT 강의보다는 최대한 수강자 입장을 고민해서 만든 특별한 강의입니다. 다양한 자료, 다양한 예제로 관련 기술을 모른 상태부터 시작해서, 관련 기술을 내 이력서에 기재할 수 있을 정도로 핵심적인 기술을 견고하게 익히는 강의입니다

본 강의는 지금까지 많은 분들께서 익히고, 좋은 의견을 주고 계신 검증된 강의입니다.
혹시라도 이슈가 있으면, 지금처럼 이후에도 수시로 업데이트될 수 있습니다.

프론트엔드 기본기를 제대로 쌓고자 한다면?
프론트엔드 기본 기술을 탄탄히 정리해야 합니다. 프론트엔드 기본은 HTML, CSS, Javascript 입니다. React 를 익히더라도, 프론트엔드 기본이 필요합니다. 탄탄한 프론트엔드 기본기가 핵심입니다. 꼼꼼하게 잘 쌓은 기본기 위에, React 든 Flutter 든 익히면 프론트엔드를 원하는대로 만들 수 있습니다. 여기에 최신 웹페이지는 반응형, 호환성등 정리해야할 배경지식과 관련 지식이 있고, 오래전 기술인 Jquery 를 깔끔한 Javascript 로 대체해야 합니다.

본 강의는 HTML, CSS, Javascript, 반응형, 호환성, ES6 등

꼭 알아야 할 흩어진 프론트엔드 기본 기술을 꼼꼼히 다룹니다!

체계적으로 익히는
잔재미코딩 Dave Lee의 로드맵

본 강의에 이어, 목표에 맞춰 익힐 수 있는 AI · 개발 · 데이터 · CS 로드맵

IT 기술은 서로 연결되어 있습니다.
연결된 기술을 선별해 익히고 여기에 AI를 얹으면 목표에 훨씬 빠르게 도달합니다.

모든 로드맵은 기술을 서로 어떻게 연결해 쓰는지까지 다루고,
입문자 레벨에서 전문가 수준까지 난이도를 높이도록 설계하고,
수년간 꾸준히 업데이트하고 있습니다.

개별 강의로 들으실 때보다 할인도 더 적용됩니다.

3. 개발과 데이터의 기초, 컴퓨터공학(CS) 핵심 지식

컴퓨터구조·운영체제·네트워크·시스템 소프트웨어·소프트웨어공학·아키텍처·자료구조·알고리즘까지

← 좌우로 넘겨 CS 강의와 전체 로드맵을 확인하세요 →

컴퓨터공학 풀로드맵 자세히 보기

4. 가장 확실한 최강 AI 활용 로드맵 (2026)

클로드코드(Claude Code) 업무 자동화부터 바이브코딩, 코덱스(Codex), 오픈클로(OpenClaw), 클로드코드 기반 데이터 분석, 에이전틱·하네스·루프 엔지니어링 등 클로드코드 고급 기법과 AI 에이전트 개발까지

← 좌우로 넘겨 AI 강의와 참고 과정을 확인하세요 →

가장 확실한 최강 AI 활용 로드맵 (2026) 자세히 보기

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 풀스택 개발을 위한 Part2 강의

  • 프런트엔드 기본기를 쌓고자 하시는 분

  • 최신 상용화도 가능한 웹서비스를 개발하고자 하시는 분

  • 반응형, 호환성등 다양한 프런트엔드 기술 정리가 필요하신 분

  • 프런트엔드 입문

선수 지식,
필요할까요?

  • 가능하다면, 풀스택 Part1 강의와 병행 수강을 강추드립니다.

안녕하세요
잔재미코딩 DaveLee입니다.

인프런인증

커리어인증

34,480

수강생

2,592

수강평

1,952

답변

4.9

강의 평점

13

강의

잔재미코딩, Dave Lee

  • About 잔재미코딩 소개 블로그 [클릭]

  • 주요 경력: 쿠팡 수석 개발 매니저/Principle Product Manager, 삼성전자 개발 매니저 (경력 약 15년)

  • 학력: 고려대 일어일문 / 연세대 컴퓨터공학 석사 (완전 짬뽕)

  • 주요 개발 이력: 삼성페이, 이커머스 검색 서비스, RTOS 컴파일러, Linux Kernel Patch for NAS

  • 저서: 리눅스 커널 프로그래밍, 리눅스 운영 체제의 이해와 개발, 누구나 쓱 읽고 싹 이해하는 IT 핵심 기술, 왕초보를 위한 파이썬 프로그래밍 입문서

  • 운영 사이트: 잔재미코딩 (http://www.fun-coding.org) [클릭]

  • 풀스택/데이터과학/AI 관련 무료 자료를 공유하는 사이트입니다.

  • 기타: 잔재미코딩 유투브 채널 [클릭] 

    • IT 학습에 도움이 되는 팁/ 짧은 무료 강의를 공유하고자, 조금씩 시작하고 있습니다~

최신 현업과 IT 강의를 병행하며, 8년째 꾸준히 견고한 풀스택, 데이터과학, AI 강의를 만들고 있습니다.

 

더보기

커리큘럼

전체

79개 ∙ (17시간 36분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

184개

4.9

184개의 수강평

  • 태효오옥이님의 프로필 이미지
    태효오옥이

    수강평 19

    평균 평점 5.0

    5

    99% 수강 후 작성

    앞 부분 css와 html만 보았으나, 실제 실무에서 적용하는 것 이상으로 세세하고 자세하며, 다양하게 알려주십니다. 추가로 강사님께서 수업에서 사용하시는 강의 자료의 질이 정말 좋습니다. 요즘은 실무에서 spa 라이브러리 혹은 프레임워크를 사용하기 때문에, jquery보다 순수 자바스크립트를 이용하여 ui를 조작하는 방법을 아는 것이 중요한데, 이 강의는 이 점에서도 강점이 있습니다. 더 이상 긴말 안하겠습니다. 이 정도 가격에 이정도 강의면 거저라고 생각합니다. 다른 클론코딩 강의 말고 이걸 들으세요

    • 이렇게 좋은 수강평을 남겨주셔서 감사합니다. 제가 예전에 이 부분을 익힐 때, 왜이렇게 세세한 기능이 많나 싶어서 지치기도 하면서도, 부득이 꼭 익혀놔야 하기 때문에, 한땀한땀 정리한 것이라서요. 제가 풀스택이 되기 위해, 익힌 방식을 그대로 강의로 만든 부분이긴 합니다. 세세한 기능이 생각이 안나실 때, 제공해드린 구글드라이브 폴더에 가셔서, 상단에 검색을 해보세요. 그러면 강의도 들으셨기 때문에, 관련 키워드를 가진 자료를 바로 보실 수 있으실꺼예요. 그러면 훨씬 빠르게 또 구현도 가능합니다. 이 부분은 추후 유투브로 제가 찍어서 별도로 공유해보려 합니다. 감사합니다.

  • MIKE.aeon님의 프로필 이미지
    MIKE.aeon

    수강평 13

    평균 평점 4.9

    5

    99% 수강 후 작성

    안녕하세요. 웹 관련 개발에 관심이 있어서 여기저기에서 강의 듣다가 정착한 강좌가 잔재미코딩님 강좌입니다. 웹 관련 기술이 관련 분야도 많고 배워야 할 부분도 다양해서 제대로 하려면 할 것이 너무 많아서 그동안 조급한 마음에 여기저기 강좌를 듣는 등 어려움이 많았습니다. 강좌를 들으면서 특히 좋았던 부분은 내가 배운 걸 어떻게 사용할 수 있고, 다음 단계로 넘어갈 때 내가 뭘 배워야 하는지 등, 풀스택으로 가는 중심을 잡을 수 있어서 개인적으로 도움이 많이 되었습니다. 파트1에서는 서버쪽에 관한 기술에 조금 더 집중했다면 파트2에서는 UI단의 다양한 기술을 배울 수 있어서 좋습니다. 화려하지 않아서 실망할 분들도 있겠지만, 화려한 기술들은 기본이 잘되어 있으면 금방 배울 수 있다고 생각합니다. HTML/CSS에 대한 깊이도 충분히 깊게 알려주셔서, CSS로 구현하지 못한 부분을 자바스크립트로 커버하려고 여러가지 꼼수나 프레임워크를 사용하지 않아도 되어서 좋았습니다. 웹기술이 다양하다보니, 약한 부분을 다른 기술이나 프레임워크로 매우는 경우가 종종 생길수 있다고 생각하는데, 기본에 집중한 설명과 실습이 있어서 좋았습니다. 자바스크립트도 필요한 부분을 간결하게 설명을 해주셔서 이해가는데 도움이 되었습니다. 물론 개인적으로 추가로 더 공부가 필요하지만 실습과 연계되니 기억하는데, 도움이 되었습니다. 강의에서 구현한 실습이 작아서 현직자 같은 경험이 적을수는 있지만, 기본적인 기능에 대한 구현 방법이나 아이디어를 얻을수 있어서 좋았습니다. 상반기에 오픈 예정인 Vue도 기대하겠습니다. 바닐라 JS로 구현하는 부분을 Vue로 사용하면 어떻게 편하게 구현할 수 있는지 비교하는 방식으로 강의를 만들어 주시면 저 같은 초심자들이 배우기에 도움이 많이 될 것 같습니다. 꼭 반영해 주시면 좋겠습니다. ^^ 참고로 개인적인 경험을 말씀드리면 파이썬 기본강좌 들으시고, 파트1, 파트2 순으로 들으시는걸 추천드립니다. 그후에 웹서버에 크롤링이나 데이터분석등의 기능을 추가하고 싶으시면 해당 관련 강좌를 들으시면 좋을것 같습니다.

    • 좋은 수강평 감사합니다. 본 강의는 거의 밑바닥부터 한땀한땀 그럴듯한 모던 웹페이지를 만드는 것이라서, 이미 만들어져있는 한두줄의 코드로 화려한 UI를 따라서 만드는 강의와는 다르기는 해요. 그런 기술들은 이후에 필요할 때, 사용하면 되지만, 현업에서 그런 기술을 사용하지는 않습니다. 특히나, 규모가 있는 웹페이지를 만들때는요. 완벽하게 만들어보기 위해, 한땀한땀 만들어보며, 기본기를 탄탄히 쌓아야 하고, 그런 부분이 꼭 도움이 되었으면 좋겠습니다. 너무 IT 관련 정보가 많고, 강의가 많고, 광고가 많다보니, 단지 따라서 코드를 치면, 이런 화려한 것이 된다? 라는 강의도 많은데, 저도 그런 강의 예전에 들어봤는데, 저에게 남는 것이 하나도 없더라고요. 그래서 완전히 따로 다 오랜 시간 정리해가며 익혔었던 기억이 있습니다. 이런 학습 방법이 훨씬 좋고 역량있는 개발자가 되는 지름길이 되길 희망합니다.

  • spiderman님의 프로필 이미지
    spiderman

    수강평 7

    평균 평점 5.0

    5

    63% 수강 후 작성

    잘 들었습니다! 프론트엔드 개발자로 취준 중인데 많은 도움이 되었습니다 이제 제것으로 만들기 위해 복습을 열심히 해야겠습니다..ㅎ 다음 강의도 기대되네요!!

    • 맞습니다. 제것으로 만드시도록 연습도 해보시고, 또 이제부터는 비로소 프론트엔드 관련해서는 클론코딩? 같은 다른 강사님들의 강의도 한번 들어보신다면, 제 것으로 만드시는데 도움이 되시지 않을까 생각합니다.!!!!

  • 나두원님의 프로필 이미지
    나두원

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    다른 강사님의 프론트 강의를 듣고 프로젝트를 진행하려 하였으나 막막해였는데, 친구의 추천으로 잔재미강사님의 강의를 보게 되었습니다. 기초부터 천천히 강의해 주셔서 하나도 빠짐없이 이해하며 넘어갔어요. 그 결과, 막막했던 프로젝트도 깔끔히 마무리 하였고 덕분에 자신감도 얻었습니다. 아직 고민 중이시라면 꼭 듣길 추천드립니다!! 정말 감사합니다 강사님~!

    • 와우 정말 기쁩니다. 자신감 정말 중요합니다. 뭐 완벽하지는 않을지라도, 나도 이제 할 수 있을 것 같고, 이대로만 꾸준히 한다면, 잘할 수 있을 것 같다라는 자신감! 이것이 느껴지셨다면 정말 큰 단계를 넘으신거예요. 정말 축하드리고, 도움이 되어서 저도 굉장히 기쁩니다. ㅎㅎ

  • 박상호님의 프로필 이미지
    박상호

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    사랑합니다 선생님

    • ㅎㅎㅎㅎㅎ 감사합니다. ㅎㅎ 위트가 있으시네요 ㅎㅎ

잔재미코딩 DaveLee님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!