Thumbnail
BEST 개발 · 프로그래밍 웹 개발
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
(4.8)
20개의 수강평 ∙ 324명의 수강생

16,500원

지식공유자 : 1분코딩
총 15개 수업˙총 1시간 40분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
내 목록 추가 322 공유
중급자를 위해 준비한
[웹 개발] 강의입니다.

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

✍️
이런 걸
배워요!
창의적인 인터랙티브 웹 개발
눈에 띄는 포트폴리오 웹사이트 제작
창의적인 디자인을 코드로 옮기는 일련의 과정
CSS와 자바스크립트를 효율적으로 연계하기

🗒 강의소개

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.


개발을 잘 하고 싶은 디자이너, 디자인에 관심이 많은 개발자들을 위한 시리즈에요.
지루하지 않은 재미있는 예제들을 통해 웹 프론트엔드 기술의 기본기를 탄탄히 확장해 보세요!

첫번째는 입체로 펼쳐지고 확대도 되는
3D 리플릿(leaflet)이에요.


🙌 알려드려요

* 완전히 기초부터 진행하는 수업은 아닙니다. CSS와 자바스크립트 기초는 알고 계셔야 학습을 원활히 진행하실 수 있습니다.

* 체계적인 학습을 위해, 아래 강좌의 전반부(이론 부분)를 학습하신 후 본 강좌를 보시면 더 좋습니다.
인터랙티브 웹 제대로 시작하기 https://www.inflearn.com/course/interactive_web
(자바스크립트 UI 개발에 익숙하시다면 본 강좌를 바로 수강하셔도 무방합니다)

* 자바스크립트와 CSS 기초 정리가 필요하다면 제 유튜브 채널의 기초 정리 영상으로 먼저 공부를 하시면 좋습니다.
https://www.youtube.com/playlist?list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX

* 그 외에 필요한 선수지식은 선행학습 섹션에 관련 영상을 따로 준비해 두었습니다.

* ECMA 2015(ES6)버전의 스크립트를 사용합니다.

* 완성된 소스코드를 제공합니다.

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

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

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

커리큘럼 총 15개 ˙ 1시간 40분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 프로젝트 소개 및 소스코드
섹션 1. 선행학습
템플릿 문자열
requestAnimationFrame으로 루프 처리하기
자바스크립트 이벤트 위임
섹션 2. 3D 리플릿 만들기
3D 리플릿 만들기 #1 미리보기 08:47
3D 리플릿 만들기 #2 12:14
3D 리플릿 만들기 #3 08:42
3D 리플릿 만들기 #4 06:28
3D 리플릿 만들기 #5 10:40
3D 리플릿 만들기 #6 03:53
3D 리플릿 만들기 #7 15:22
3D 리플릿 만들기 #8 07:46
3D 리플릿 만들기 #9 17:53
3D 리플릿 만들기 #10 07:23
강의 게시일 : 2019년 10월 30일 (마지막 업데이트일 : 2019년 10월 30일)
수강평 총 20개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
20개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김디 thumbnail
독특한 웹 구현에 대한 갈증이 항상 있어서 찾아보면 다 해외 자료에..소스만 있고 설명이 부족해서 공부하기가 힘들었는데, 이렇게 예제를 집요하게 하나하나 파고드는 강의가 있어서 너무 좋습니다! 계속 또 만들어주세욬ㅋㅋ
2020-02-14
지식공유자1분코딩
좋은 말씀 감사합니다 :) 또 집요하게 파고들어 보겠습니다~ㅎㅎㅎ
2020-02-18
찡태 thumbnail
재밌어요 ㅎㅎ
2020-09-20
지식공유자1분코딩
감사합니다^^
2020-10-02
호로로롤로 thumbnail
너무 좋아요.이런 강의 많이 올려주세요!! 설명도 자세히 해주셔서 이해하기 좋았습니다. 화면 스크린 계산 하는 것 에 익숙해질수 있는 강의 듣고 싶어요!
2019-11-15
지식공유자1분코딩
감사합니다~ 앞으로도 유용하고 재밌는 수업 만들어 보겠습니다 :)
2019-11-18
lsy_65 thumbnail
너무다 도움되는 수업이었습니다 감사합니다!
2020-11-15
지식공유자1분코딩
감사합니다^^
2020-12-01
반가우면반갑다고해 thumbnail
짧고 간단하지만 유익한 강의 감사합니다. 솔직히.. 어렵네요 ㅠ.ㅠ 계산하는곳에서는 멘붕입니다만, 이 또한 미래의 성장한 내가 해결해주시겠죠(?) 애플 강의 들으러 가봅니다 총총,,💞
2020-10-27
지식공유자1분코딩
애플강의가 제일 난이도가 높긴 한데...ㅎㅎㅎ 그만큼 공부하실게 많을거에요^^ 화이팅입니다!
2020-12-01

16,500원

내 목록 추가 322 공유
지식공유자 : 1분코딩
총 15개 수업˙총 1시간 40분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스