3D리플릿 만들기 - 인터랙티브 웹 프로젝트
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
수강정보
(11개의 수강평)
208명의 수강생
27% 할인, 17시간 남음
12,040원
16,500원
지식공유자 : 1분코딩
15회 수업 · 총 1시간 40분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상

이 강의는

인터랙티브 웹 프로젝트는, 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와 자바스크립트를 효율적으로 연계하기

도움 되는 분들

  • 크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
  • 남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
  • 개자이너, 디발자에 대한 로망을 갖고 계신 분들

선수 지식

  • CSS 기초
  • 자바스크립트 기초

공개 일자

2019년 10월 30일 (마지막 업데이트 일자 : 2019년 10월 30일)

지식공유자 소개

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

4.7
11개의 수강평
default_profile.png
박준호 (호로로로로로롤로) 2019.11.15
너무 좋아요.이런 강의 많이 올려주세요!! 설명도 자세히 해주셔서 이해하기 좋았습니다. 화면 스크린 계산 하는 것 에 익숙해질수 있는 강의 듣고 싶어요!
1분코딩

1분코딩 2019.11.18
감사합니다~ 앞으로도 유용하고 재밌는 수업 만들어 보겠습니다 :)

default_profile.png
조인태 2달 전
재밌어요 ㅎㅎ
1분코딩

1분코딩 1달 전
감사합니다^^

default_profile.png
김디 9달 전
독특한 웹 구현에 대한 갈증이 항상 있어서 찾아보면 다 해외 자료에..소스만 있고 설명이 부족해서 공부하기가 힘들었는데, 이렇게 예제를 집요하게 하나하나 파고드는 강의가 있어서 너무 좋습니다! 계속 또 만들어주세욬ㅋㅋ
1분코딩

1분코딩 9달 전
좋은 말씀 감사합니다 :) 또 집요하게 파고들어 보겠습니다~ㅎㅎㅎ

교육과정

모두 펼치기 15 강의 1시간 40분
섹션 0. 프로젝트 소개 및 소스코드
2 강의 01 : 14
섹션 1. 선행학습
3 강의
템플릿 문자열
requestAnimationFrame으로 루프 처리하기
자바스크립트 이벤트 위임
섹션 2. 3D 리플릿 만들기
10 강의 99 : 08
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
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스