Thumbnail
BEST 개발 · 프로그래밍 웹 개발

인터랙티브 웹 개발 제대로 시작하기

(4.9)
264개의 수강평 ∙ 2765명의 수강생

55,000원

지식공유자: 1분코딩
총 64개 수업 (10시간 48분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

✍️
이런 걸
배워요!
눈에 띄는 포트폴리오 웹사이트 제작
독특한 UI의 웹사이트 개발
CSS 3D를 자유자재로 다루기
자바스크립트 기본기를 확실히 다지기

첫 시작부터 라이브러리 없이 하나하나
직접 구현해서 만드는 인터랙티브 웹 강의입니다. 🧩

라이브러리 없이
바닥부터 만들어나가요 ✨

 

 

 

본 강의는 처음부터 끝까지 라이브러리없이 바닥부터 구현합니다. 실무에서는 생산성이 중요하기에 좋은 라이브러리를 찾아 잘 쓰는 것 또한 중요하지만, 잘 하는 개발자가 되기 위해서는 원천 기술과 구현 원리에 대한 이해가 중요합니다.

첫 시작부터 하나하나 직접 구현하는 방식으로 공부하면 남들과 차별화된 고급 인터랙티브 엔지니어로 성장할 수 있습니다. 눈에 보이는 동작은 같아도, 바닥부터 직접 만드는 법을 훈련한 개발자는 숙련도부터 다릅니다.

이런 고민을 갖고계시나요?

"해외 웹 어워드 사이트에서 자주 볼 수 있는 화려한 웹사이트들처럼,
창의적인 UI 인터랙션을 구현하는 과정을 직접 보고 배우고 싶어요."

"창의력이 넘치는 디자이너인데, 코딩 스킬이 따라가질 못해요.
몸값 높고 귀한 진정한 개자이너가 되고싶어요."

"CSS, JS 열심히 공부했지만 항상 비슷한 내용과 예제만 만들어봤어요.
라이브러리를 활용하는 법 말고 동작 원리를 이해하고 싶어요."

 

이 강의만의 특징은? 🔎

👌 기초부터 진행하는 수업은 아닙니다. CSS와 JS의 기초는 알고 있어야 학습을 원활하게 진행하실 수 있습니다.

👌 기초 정리가 필요하시다면, 제 유튜브의 CSS 레이아웃 / 자바스크립트 기초 정리 영상으로 공부하신 후 이어서 본 강의를 학습하시면 좋습니다.

👌 최종적으로 만드는 3D 스크롤 웹사이트의 소스코드를 제공합니다.

 

연관 로드맵 🚎

"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.
1분코딩님의 인터랙티브 웹 사이트를 만들어보는
강의들로 구성된 로드맵입니다.
이 강의 포함

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
개자이너, 디발자에 대한 로망을 갖고 계신 분들
평소 1분코딩과 스튜디오밀의 강의가 좋았던 분들
📚
선수 지식,
필요한가요?
CSS 기초
자바스크립트 기초

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.

커리큘럼 총 64 개 ˙ 10시간 48분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시작하기
준비 하기 08:57
섹션 1. CSS 변환과 애니메이션
Transform 15:52
Transition 10:01
Animation 1 09:42
Animation 2 05:44
Animation 3 미리보기 14:58
섹션 2. CSS 3D
CSS 3D 1 14:01
CSS 3D 2 15:28
CSS 3D 3 17:49
섹션 3. CSS Flex
CSS Flex 28:26
섹션 4. 인터랙티브 웹 개발을 위한 자바스크립트 시작하기
자바스크립트 워밍업 12:01
DOM 스크립트 1 10:41
DOM 스크립트 2 02:12
DOM 스크립트 3 10:55
섹션 5. 자바스크립트 이벤트 다루기
이벤트의 기본 동작 22:59
this와 이벤트 객체 미리보기 07:00
움직이는 캐릭터 예제로 클릭 이벤트 익혀보기 17:26
이벤트 위임 14:03
이벤트 위임 보강 영상 22:56
섹션 6. 예제) 3개의 문
3개의 문 1 11:16
3개의 문 2 16:43
3개의 문 3 11:21
3개의 문 4 11:45
3개의 문 5 08:16
섹션 7. 객체(Object)
객체 1 08:14
객체 2 08:02
객체 3 07:13
객체 4 15:43
섹션 8. 스크롤 다루기
스크롤 이벤트 다루기 08:44
스크롤 위치에 따라 오브젝트 조작하기 09:52
섹션 9. Transition/Animation 이벤트
섹션 10. 타이밍 제어하기
setTimeout 05:18
setInterval 01:57
requestAnimationFrame 06:50
섹션 11. 종합예제) 전진! 3D 스크롤
전진! 3D 스크롤 1 03:19
전진! 3D 스크롤 2 05:56
전진! 3D 스크롤 3 09:36
전진! 3D 스크롤 4 08:20
전진! 3D 스크롤 5 09:56
전진! 3D 스크롤 6 03:13
전진! 3D 스크롤 7 07:06
전진! 3D 스크롤 8 10:07
전진! 3D 스크롤 9 06:19
전진! 3D 스크롤 10 06:11
전진! 3D 스크롤 11 15:16
3D 캐릭터 구현 컨셉 07:20
전진! 3D 스크롤 12 06:18
전진! 3D 스크롤 13 11:02
전진! 3D 스크롤 14 08:37
전진! 3D 스크롤 15 미리보기 05:40 전진! 3D 스크롤 16 미리보기 06:21
전진! 3D 스크롤 17 07:06
전진! 3D 스크롤 18 11:25
전진! 3D 스크롤 19 06:11
전진! 3D 스크롤 20 15:47
전진! 3D 스크롤 21 10:11
전진! 3D 스크롤 22 10:59
전진! 3D 스크롤 23 13:13
전진! 3D 스크롤 24 07:00
전진! 3D 스크롤 25 07:18
전진! 3D 스크롤 26 05:10
전진! 3D 스크롤 27 10:46
섹션 12. 마치며
마무리 인사말 01:20
강의 게시일 : 2019년 05월 11일 (마지막 업데이트일 : 2020년 07월 19일)
수강평 총 264개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
264개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
펜잡이 개발자 thumbnail
역시는 역시입니다... 라이브 자바스크립트 강의를 듣고 알게되어 인프런까지 따라왔네요. 라이브강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘 해주시고, 무엇보다 수강생들 이해를 돕기위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터렉티브웹은 쌤만 믿고 따라가겠습니다 :) 인터렉티브웹 장인 한번 되어보겠습니다 후후
2019-05-17
지식공유자 1분코딩
좋은 말씀 감사합니다! 앞으로 공부하시는 데에 도움이 될 수 있도록 좋은 강의 많이 만들어 볼게요 :) 감사합니다.
2019-05-19
휴식중인 도미 thumbnail
아 너무 좋아요! 이해도 쏙쏙되고 자바스크립트 기초수업 듣고 이 수업을 들으니 유레카라는 소리가 절로 나옵니다!
2019-05-23
지식공유자 1분코딩
도움이 되었다니 저도 좋네요 :) 좋은 말씀 감사합니다.
2019-05-24
정영훈 thumbnail
강의 너무 재미있고 알찼습니다 ^.^~ 자바스크립트로 여러 예제를 만들면서 실제로 이런 문법을(css에서 속성선택자, 객체 등)어떻게 사용해야 하는지 알 수 있어서 좋았습니다. 특히나 그냥 코드만 보고 설명해주는 게 아니라 직접 그림도 그려주시고(perspective 쪽) 캠으로 종이 등으로 3D쪽(카드뒤집기, 마지막예제) 설명해주셔서 확실히 이해하는데 훨씬 수월하고 좋았습니다~ 그리고 flex에 대해 배울때 오뎅꼬치와 오뎅... 기억에 각인돼서 절대 잊어버리지 않을 거같아요 ㅎㅎ 이제 막 자바스크립트를 끝내고 인터렉티브웹이나 혹은 자바스크립트로 뭘 할 수 있을까 생각하시는 분 들에게 강추 드립니다! 앞으로도 인터렉트웹이나 혹은 백엔드까지 연계해서 다양한 수업들이 나오면 정말 좋을 거 같습니다. 좋은 강의 정말 잘 봤습니다 감사합니다!!
2019-05-31
지식공유자 1분코딩
정말 강의를 자세하게 보고 제대로 공부하셨다는게 느껴지네요^^ 꼼꼼하고 좋은 수강평 정말 고맙습니다! 앞으로도 유익한 수업들 잘 만들어 볼게요 :)
2019-05-31
최우석 thumbnail
프론트/백엔드가 아닌 인터렉션을 위한 최고의 강의입니다!! 학원에서는 js는 건너뛰고 오직 jquery 사용법만 알려주는 경우가 많은데 이 강의는 순수한 js의 구동방식을 자세히 알려주셔서 원천기술에 대한 지식이 차곡차곡 쌓이는 느낌입니다!! 강사님 목소리도 너무 좋으시고 예제도 재밌어서 시간가는줄 모르고 들었네요!! 강의 듣고 실무에서도 라이브러리 없이 작업하는중입니다!!
2019-05-19
지식공유자 1분코딩
도움 받으셨다니 보람차고 좋네요! 좋은 말씀 감사합니다 :) 원천 기술을 잘 이해하고 있으면 라이브러리를 선택하거나 활용하실 때에도 도움이 많이 될거에요^^
2019-05-19
카인드패밀리 thumbnail
이정도로 수준있는 강의를 이정도 가격에 배울수 있다고 생각못했습니다 잘 구성되고 디자인된 예제가 난해하고 햇갈리기 쉬은 개념들을 쏙쏙 이해하게 해주네요 정말 잘 봤습니다 혹시 수강 고민하시는 분들 걱정마시고 시작하세요 ㅋ 최고의 강의입니다 엄지 척 척 척 !!
2019-05-22
지식공유자 1분코딩
개념 이해에 도움을 많이 받으셨다니 좋네요 ^^ 앞으로도 도움 될 만한 수업들 잘 만들어 볼게요. 감사합니다!!
2019-05-22