상세 자료와 샘플 코드
문법을 보고, 바로 테스트하세요.
기능별 설명과 샘플 코드로 동작을 확인합니다. 문서 자료는 온라인으로 제공하며, 저작권 보호를 위해 문서의 복사 및 다운로드를 제한합니다.
풀스택 로드맵 Part2
탄탄한 프런트엔드기본 부트캠프
HTML·CSS·바닐라 JavaScript + ES6,
기본기를 실제 웹페이지로 연결하세요.
어떻게 배우는지, 강사가 직접 설명합니다.
- 학습 수준
- 입문부터
기본기 정리 - 수강 기간
- 기간 제한 없이
반복 학습 - 실전 프로젝트
- 반응형 웹
인터랙션 구현 - 전체 영상 79개
- 약 17시간 35분
- 함께 제공해요
- 상세 자료
질의응답
네카라쿠배도 사내 강의로 선택하는 공식 강의!
프런트엔드 웹기술 기본기를 다져줄 완성도 높은 강의
본 강의는 HTML5, CSS, 바닐라 JavaScript와 ES6를 체계적으로 익히는 과정입니다. 파이썬 백엔드에 이어 프런트엔드를 배우는 풀스택 시리즈 Part2이며, 프런트엔드 기본기만 따로 정리하고 싶은 분도 시작할 수 있습니다.
문법을 대략 아는 것과 원하는 화면을 만드는 것은 다릅니다. CSS의 세부 기능부터 반응형·호환성, JavaScript의 동작까지 흩어진 지식을 정리하고 실제 웹페이지에 적용합니다.
간결한 설명과 상세 자료, 기능별 샘플 코드를 제공합니다. 빈 파일에서 시작해 화면을 완성하고, JavaScript로 동작을 더하는 과정을 함께 실습합니다.
- 01 · 웹의 구조를 이해
HTML5와
웹 기본기필요한 태그와 시맨틱 구조를 정리합니다. 웹 접근성, 크로스 브라우징, 이미지 포맷 등 화면을 만들기 전에 알아둘 배경지식도 함께 익힙니다.
HTML5 · 시맨틱 · 웹 접근성
- 02 · 원하는 화면을 구현
상세한 CSS와
반응형 레이아웃선택자와 박스모델부터 배치·애니메이션·Flexbox까지 다룹니다. 미디어 쿼리를 적용해 화면 크기에 따라 달라지는 레이아웃을 만듭니다.
CSS · Flexbox · 미디어 쿼리
- 03 · 화면에 동작을 더하기
바닐라 JavaScript와
ES6변수·함수·객체·배열에서 DOM과 이벤트까지 연결합니다. 호이스팅, 스코프와 비동기 처리를 정리하고 웹페이지를 직접 제어합니다.
JavaScript · ES6 · DOM
피드백 반영
강의를 수시로 업데이트하고 있습니다. 학습 중 개선이 필요한 점은 질의응답란에 남겨주세요.
자료와 실제 수업 화면
설명과 코드, 완성할 웹페이지를
수업 화면으로 확인하세요.
실전 웹페이지
빈 파일에서 반응형 웹페이지까지
HTML과 CSS로 화면을 만들고, JavaScript로 동작을 더합니다. 별도 프런트엔드 프레임워크 없이 코드를 한 줄씩 완성하며 각 기술의 역할을 익힙니다.
강의를 조금 더 자세히
무엇을, 어떻게 배우는지
자세히 살펴보세요.
대략 아는 문법을,
실제로 쓸 수 있는 기본기로.
HTML, CSS, JavaScript를 조금씩 써봤어도 원하는 화면을 만드는 일은 쉽지 않습니다. 반응형, 브라우저 호환성, ES6처럼 따로 익힌 지식이 실제 개발에서는 함께 필요하기 때문입니다.
본 강의는 흩어진 프런트엔드 기본 기술을 한 번 정리하는 과정입니다. 웹사이트의 배경지식과 HTML 구조를 이해하고, CSS로 화면을 만들며, JavaScript로 동작을 연결합니다. 필요한 문법을 설명과 예제로 확인한 뒤 실전 웹페이지에 적용합니다.
프레임워크를 익힐 때에도 이 기본기가 바탕이 됩니다. 검색한 코드를 붙이는 데서 멈추지 않고, 각 코드가 화면에서 어떤 역할을 하는지 이해하도록 구성했습니다.
JavaScript만큼,
HTML과 CSS도 중요합니다.
버튼이 동작하더라도 화면 배치나 모바일 레이아웃이 어긋나면 웹페이지를 사용하기 어렵습니다. HTML 태그를 표준과 의미에 맞게 정리하고, CSS의 세부 기능을 이해해야 원하는 화면을 구현할 수 있습니다.
- HTML5 기본 템플릿과 시맨틱 태그, 웹 접근성과 크로스 브라우징
- CSS 단위와 선택자, 박스모델, 배경과 글꼴, block과 inline
- position과 float를 활용한 배치, transition과 animation, transform
- 상속·미디어 쿼리·Flexbox를 활용한 반응형 레이아웃
기능 이름을 외우는 데 그치지 않습니다. 브라우저 호환성과 사용 맥락을 함께 살피고, 실습 화면을 바꾸며 어떤 속성을 적용해야 하는지 익힙니다.
프레임워크보다 먼저,
JavaScript가 하는 일을 이해하세요.
React나 Vue를 사용하더라도 JavaScript 기본기는 필요합니다. 본 강의는 특정 프레임워크보다 바닐라 JavaScript와 ES6를 익히는 데 집중합니다. jQuery를 사용하지 않고 브라우저의 기능을 직접 다룹니다.
변수와 조건문부터 함수·객체·반복문·배열까지 정리합니다. 이어서 호이스팅과 스코프, 동기·비동기 처리와 Promise를 설명합니다. DOM과 BOM을 이해하고, 요소를 만들거나 수정하고 이벤트를 처리하며 화면에 동작을 더합니다.
기본 문법이 실제 웹페이지에서 어떻게 사용되는지 연결해 익히면, 이후 다른 라이브러리와 프레임워크를 배울 때에도 코드를 이해하는 데 도움이 됩니다.
입문자도 차근차근
시작할 수 있습니다.
프런트엔드 입문자도 시작할 수 있습니다. 프로그래밍 자체가 처음이라면 파이썬 입문 과정과 함께 기초부터 익히는 것을 권합니다.
프런트엔드 기술만 정리하고 싶다면 본 강의부터 수강할 수 있습니다. 코드를 읽는 일부터 낯설다면 파이썬 입문과 크롤링 기초로 프로그래밍 기본기를 쌓고, 풀스택 로드맵의 순서에 따라 이어가세요.
강의에서는 간결한 코드와 충분한 설명을 함께 제공합니다. 이해에 필요한 배경지식은 그때그때 짚고, 기능별로 직접 테스트하며 확인할 수 있도록 구성했습니다. 서로 배려하는 질의응답으로 함께 배우는 학습 환경을 지향합니다.
빈 파일에서 시작해,
직접 웹페이지를 완성합니다.
본 강의는 풀스택 시리즈 Part2입니다. 서비스에 사용할 웹페이지를 정하고, 별도 프런트엔드 프레임워크나 라이브러리 없이 HTML·CSS·JavaScript와 ES6로 한 줄씩 구현합니다.
- HTML로 웹페이지의 구조를 만듭니다.
- CSS로 레이아웃과 스타일을 적용하고, 반응형 화면을 구현합니다.
- JavaScript로 요소와 이벤트를 제어하며 웹페이지에 동작을 더합니다.
- 추가 기능과 백엔드·프런트엔드 통신을 확인하며 마무리합니다.
기능별 작은 예제에서 시작해 실제 웹페이지까지 난이도를 높입니다. 기술을 각각 아는 상태에서, 서로 연결해 활용하는 단계로 나아가는 것이 목표입니다.
설명과 샘플 코드를
함께 제공합니다.
기능별 샘플 코드를 프로젝트로 제공하고, 실전 웹페이지의 코드 파일도 제공합니다. 강의 중 직접 코드를 실행해 보고, 익힌 기능을 다시 확인할 수 있습니다.
문서 자료는 온라인에서 확인할 수 있습니다. 문서의 복사 및 다운로드는 저작권 보호를 위해 제한합니다. 제공되는 코드 파일과 문서 자료의 이용 범위를 구별해 주세요.
웹 화면 다음에는,
서비스 전체의 흐름으로.
IT 기술은 서로 연결되어 있습니다. 프런트엔드 화면과 백엔드, 데이터베이스, 서버가 연결되어 하나의 서비스가 됩니다. 핵심 기술을 순서대로 익히며 난이도를 높이면 시스템 전체를 이해하는 데 도움이 됩니다.
같은 강사의 설명과 자료로 이어지는 하단의 풀스택·AI·데이터·CS 로드맵을 참고해 주세요. 앞선 파이썬 백엔드 과정과 연결하거나, 서버 운영·배포와 앱 개발로 학습을 이어갈 수 있습니다.
현업과 병행하며 10년간 10만 명을 강의한 경험을 바탕으로, 수강자의 입장에서 내용을 구성합니다. 처음에는 쉽게 시작하고, 반복과 문제 풀이를 통해 실제 활용까지 이어지도록 설명합니다.
강의 경험은 인프런 외 다양한 교육 플랫폼, 자체 잔재미코딩 사이트와 오프라인 교육을 포함합니다.
하나하나 세심하게 신경 쓰며 강의를 만들어갑니다. 서로 배려하는 질의응답으로 함께 배우는 학습 환경을 지향합니다.
공개된 실제 수강평 확인하기 ↗상세 커리큘럼
총 교육시간 약 17시간 35분
02
모던 웹 기본 기술 이해9개 항목
- 수업 자료와 활용 팁 (꼭 들어주세요~)
- 강의 자료/코드 다운로드
- 학습 효과를 높일 수 있는 꿀팁과 공유사항 (업데이트)
- 웹 기본 기술 이해와 정리
- 모던 HTML 기능과 배경지식 이해 (업데이트)
- HTML5 기본 템플릿 코드 이해
- HTML5 주요 태그 이해와 정리1
- HTML5 주요 태그 이해와 정리2
- 모던 웹을 위한 웹접근성, 크로스 브라우징, 이미지 포맷 이해
03
모던 웹의 핵심 상세한 CSS 기본5개 항목
- 모던 웹을 위한 모던 CSS 단위 이해 및 정리
- 모던 웹을 위한 모던 CSS 배경 지식 이해
- 모던 웹을 위한 상세한 모던 CSS Selector 정리1
- 모던 웹을 위한 상세한 모던 CSS Selector 정리2
- 모던 웹을 위한 상세한 모던 CSS Selector 정리3
04
모던 웹의 핵심 상세한 CSS 기본 프로퍼티7개 항목
- 모던 웹을 위한 CSS 박스모델 이해1
- 모던 웹을 위한 CSS 박스모델 이해2
- 모던 웹을 위한 상세한 CSS background 이해1
- 모던 웹을 위한 상세한 CSS background 이해2
- 모던 웹을 위한 상세한 CSS block과 inline 이해
- 모던 웹을 위한 상세한 CSS font 이해1
- 모던 웹을 위한 상세한 CSS font 이해2
05
모던 웹의 핵심 상세한 CSS 배치와 애니메이션5개 항목
- 모던 웹을 위한 상세한 CSS position 이해
- 모던 웹을 위한 상세한 CSS transition 이해
- 모던 웹을 위한 상세한 CSS animation 이해
- 모던 웹을 위한 상세한 CSS transform 이해
- 모던 웹을 위한 상세한 CSS float 이해
06
모던 웹의 핵심 중급 CSS와 반응형 기능3개 항목
- 모던 웹을 위한 상세한 CSS 상속 이해
- 모던 웹을 위한 상세한 반응형 배경지식 이해
- 모던 웹을 위한 상세한 CSS 미디어 쿼리 이해
07
모던 웹과 레이아웃 핵심 CSS flexbox3개 항목
- 모던 웹을 위한 상세한 CSS flexbox 이해1
- 모던 웹을 위한 상세한 CSS flexbox 이해2
- 모던 웹을 위한 상세한 CSS flexbox 이해3
08
모던 HTML/CSS 로 상용화도 가능한 모던 웹페이지 만들어보기11개 항목
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기1
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기2
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기3
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기4
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기5
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기6
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기7
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기8
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기9
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10
- 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기11
09
모던 웹을 위한 최신 Javascript (VanillaJS) 기본 지식과 변수/조건문4개 항목
- 모던 웹을 위한 최신 Javascript / VanillaJS / ES6 이해
- Javascript 기본 지식과 테스트 방법 (업데이트)
- 모던 웹을 위한 최신 Javascript 변수와 데이터 타입 이해
- 모던 웹을 위한 최신 Javascript 데이터 타입 변환과 조건문 이해
10
모던 웹을 위한 최신 Javascript (VanillaJS) 함수와 객체4개 항목
- 모던 웹을 위한 다양한 Javascript+ES6 함수 선언 기법 이해
- 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해1
- 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해2
- 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해3
11
모던 웹을 위한 최신 Javascript (VanillaJS) 반복문/배열4개 항목
- 모던 웹을 위한 다양한 Javascript+ES6 반복문 이해1
- 모던 웹을 위한 다양한 Javascript+ES6 반복문 이해2
- 모던 웹을 위한 다양한 Javascript+ES6 배열 문법 이해1
- 모던 웹을 위한 다양한 Javascript+ES6 배열 문법 이해2
12
모던 웹을 위한 최신 Javascript (VanillaJS) 중급7개 항목
- 모던 웹을 위한 다양한 Javascript+ES6 추가 문법 이해1
- 모던 웹을 위한 다양한 Javascript+ES6 추가 문법 이해2
- 모던 웹을 위한 Javascript+ES6 호이스팅 이슈와 해결방법 이해
- 모던 웹을 위한 Javascript+ES6 스코프 이해
- 모던 웹을 위한 Javascript 동기 / 비동기 처리 이해
- 모던 웹을 위한 Javascript+ES6 비동기 처리를 위한 Promise 이해1
- 모던 웹을 위한 Javascript+ES6 비동기 처리를 위한 Promise 이해2
13
모던 웹 제어를 위한 최신 Javascript (VanillaJS)4개 항목
- 모던 웹을 위한 Javascript(VanillaJS) 와 DOM / BOM 이해
- 모던 웹을 제어하기 위한 Javascript(VanillaJS) DOM CRUD 이해1
- 모던 웹을 제어하기 위한 Javascript(VanillaJS) DOM CRUD 이해2
- 모던 웹을 제어하기 위한 Javascript(VanillaJS) 이벤트 처리 이해
14
모던 프런트엔드 기술로 상용화도 가능한 모던 웹페이지 만들기6개 항목
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기1
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기2
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기3
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기4
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기5
- 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기6
15
강의 마무리와 추가로 참고하면 좋을 기능 구현4개 항목
- 추가로 참고할만한 반응형 모던 웹페이지 기능1
- 추가로 참고할만한 반응형 모던 웹페이지 기능2
- 추가로 참고할만한 반응형 모던 웹페이지 기능3
- 백엔드와 프런트엔드 통신 기능 구현과 마무리
16
강의 완강 인증서 발급2개 항목
- 강의 수강평 및 제안사항
- 강의 완강 인증서 발급
수강 전 확인해 주세요
학습과 이용 안내
프런트엔드를 처음 배워도 괜찮나요?
프런트엔드 입문자도 시작할 수 있습니다. 프로그래밍 자체가 처음이라면 파이썬 입문 과정과 함께 기초부터 익히는 것을 권합니다.
React나 Vue를 배우는 강의인가요?
본 강의는 HTML·CSS·바닐라 JavaScript와 ES6 기본기에 집중합니다. React·Vue 같은 프레임워크를 배우기 전에 필요한 웹과 JavaScript 기본기를 정리할 수 있습니다.
jQuery를 사용하나요?
본 강의에서는 jQuery를 사용하지 않습니다. 브라우저의 DOM과 이벤트를 바닐라 JavaScript와 ES6 문법으로 직접 다룹니다.
자료와 소스 코드를 제공하나요?
기능별 샘플 코드와 실전 웹페이지 코드 파일을 제공합니다. 문서 자료는 온라인에서 확인할 수 있으며, 저작권 보호를 위해 문서의 복사 및 다운로드를 제한합니다.
이 강의는 풀스택 로드맵의 어느 부분인가요?
파이썬 백엔드에 이어 프런트엔드 기본기를 다루는 Part2입니다. HTML·CSS 화면 구현과 JavaScript 제어, 백엔드와의 통신을 익힙니다. 서버 운영·배포와 앱 개발은 연결된 별도 과정에서 이어갑니다.
전체 분량과 무료 공개 범위는 어떻게 되나요?
전체 79개 영상, 약 17시간 35분 분량입니다. 무료 영상은 4개입니다. 커리큘럼의 무료보기 링크에서 확인해 주세요. 학습 사이트 로그인이 필요할 수 있습니다.
수강 기간·질의응답
수강 기간에 제한 없이 학습할 수 있습니다. 강의 내 질의응답과 수시 업데이트를 제공합니다.
자료·수료증
상세 학습 자료를 함께 제공합니다. 강의 100% 수강 시 공식 수료증을 발급받을 수 있습니다.
결제·학습 환경
기존 자체 사이트의 국내·해외 결제와 LearnWorlds 학습 시스템을 사용합니다. 영상은 스트리밍으로 수강합니다.
계정·환불·문의
1인 1계정을 원칙으로 합니다. 구매 전 이용 약관과 환불 규정을 확인해 주세요. 궁금한 점은 문의하기로 남겨주세요.
환불·수강 기간·계정 이용 규정 자세히 보기
환불 규정
기존 사이트에 안내된 환불 규정입니다. 구매 전 결제 화면과 이용 약관도 함께 확인해 주세요.
- 강의(개별 강의 및 패키지) 구매일로부터 1주일(7일) 이내이며, 5강(유/무료 포함) 미만 수강 시 전액 환불이 가능합니다.
- 구매일로부터 8일 혹은 5강 이상 수강 시: 수강 기간 1/3 경과 전에는 수강료 2/3, 1/2 경과 전에는 수강료 1/2 환불이 가능합니다. 수강 기간 1/2 경과 후 또는 강의 자료 챕터 클릭 시에는 환불이 불가합니다.
- 모든 강의는 수강 기간이 무제한이므로, 환불 시의 수강 기간은 강의 구매일로부터 30일을 기준으로 계산합니다.
학습 규정 및 주의 사항
정상 수강 기간(유료 수강 기간)은 최초 180일이며, 181일 이후 무료 수강 기간은 무제한입니다. 두 기간 모두 동일하게 시청 가능합니다. 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
1인 1계정 원칙
동시 접속과 계정 공유는 시스템적으로 제한합니다. 학습 페이지는 1대에서만 접속할 수 있으며 다른 곳에서 동시 수강할 경우 학습이 자동 제한됩니다. 계정 공유 또는 수강 자료 외부 공개가 확인되면 계정이 즉시 중지됩니다.
수료증·수강 기록·영수증
강의별 100% 수강 시 공식 수료증을 다운로드할 수 있습니다. 발급 기록과 일련번호를 통한 수료증 확인, 로드맵별 수료증·강의 시간 등 별도 수강 기록, 결제 영수증 재발급이 필요하면 수강 계정과 함께 문의하기로 요청해 주세요.
국내·해외 결제 영수증은 결제 완료 화면에서 확인하고 인쇄할 수 있습니다. 해외 결제는 로드맵 및 개별 강의 구매에 지원하며, 계좌 이체는 별도로 문의해 주세요.
본 강의 다음에는
기본기를 쌓았다면,
목표에 맞는 다음 단계로.
IT 기술은 서로 연결되어 있습니다. 연결된 기술의 핵심을 익히고 난이도를 차근차근 높이면, 시스템과 데이터 전반을 이해하는 눈을 기를 수 있습니다.
각 분야의 로드맵은 Dave Lee 강사가 직접 만듭니다. 학습 순서와 강의 간 연결을 고려해, 같은 강사의 설명과 자료로 다음 단계까지 이어갈 수 있도록 구성했습니다.
데이터 분석·과학
가장 빠른 데이터 전과정 로드맵
파이썬과 데이터 수집에서 SQL·NoSQL, 분석·시각화, 머신러닝·딥러닝으로 이어집니다.
자세히 보기웹·앱 개발
가장 빠른 풀스택 로드맵
프로그래밍 기초에서 백엔드·프론트엔드, 서버와 배포, 앱 개발까지 이어집니다.
자세히 보기AI 활용
가장 확실한 최강 AI 활용 로드맵 (2026)
클로드코드 업무 자동화부터 바이브코딩, 데이터 분석과 AI 에이전트 개발까지 익힙니다.
자세히 보기개발·데이터의 기초외부사이트
컴퓨터공학(CS) 풀로드맵
컴퓨터구조·운영체제·네트워크부터 시스템 소프트웨어, 자료구조·알고리즘까지 익힙니다.
자세히 보기풀스택 로드맵 Part2
웹 기본기를 정리하고,
직접 만든 화면으로 확인하세요.
무료 강의로 설명 방식을 먼저 확인하고 시작하세요.
12%₩80,000₩70,000
한 번 결제로 수강 기간 제한 없이