강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다.

(4.6) 수강평 139개

수강생 1,728명

  • 코딩일레븐

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

이런 걸 배울 수 있어요

  • 실무에서 자주 사용하는 인터랙티브 개발 스킬

  • 몇 줄로 끝내는 페럴랙스 스크롤 효과

  • mouse 위치값을 이용한 인터랙티브 효과

  • 모션에 감성을 더하는 easing (가속도)

몇 줄의 코딩으로 인터랙티브 사이트를 개발해보자!

웹 인터랙티브 페이지 개발의 핵심 원리를 임팩트 있게 준비했습니다. 짧고 굵게!
한 번 익혀두면 평생 사용할 수 있습니다.


 

2023년 3월 22일부로
강의 리뉴얼을 완료 했습니다!
부족했던 부분 완전 개선 :)

 

강의 특징 💡 

  • 실무에서 활용도 높은 순수 Javascript 사용합니다. (Vanilla JS)
  • 인터랙티브 예제를 함께 만들며 자연스럽게 필수 코드를 익힙니다.
  • 처음에는 어려워 보이는 인터랙티브 효과가 금방 쉬워집니다.

 

강의 소개 📝

인터랙티브를 제작시 필요한 기본기
초보자 눈높이에서 차근차근 알려드립니다.
(트랜스폼, 트랜지션, 이징(가속도) 처리 방법 등)

 

 

▲ 초보자도 이해하기 쉽게 단계적으로 설명

 

 

 

▲ 단 몇 줄의 코드로 구현하는 해외 사이트 클론
(사이트 링크)

 

 

▲ 센스있는 마우스 모션 효과 추가

 

 

▲ 실무에서 바로 사용할 수 있는 예제

 

 

▲ 스크롤 값을 이용한 초간단 페럴렉스 페이지

 

 

 

▲ 다중 레이어 제어를 통한 리얼 페럴랙스 효과
(직접 제작한 이미지를 제공합니다)

 

▲ translateZ 3D 페럴렉스 페이지

 

 

 

이 강의를 완강하시면 ✒️ 

10년 이상 실무에서 반복 사용하고 있는 인터랙티브 스킬 몇 가지를 확실히 배우게 됩니다. 아마 평생 반복해서 사용하게 되실겁니다. (진심!) 

완강하시면 평소에 봤던 멋진 사이트들이 어떤 방식으로 만들어지는지 눈에 보이실 겁니다.

알려드립니다 📖

  • 수업에 사용된 에디터는 VSCODE (비주얼 스튜디오 코드) 입니다.
  • 초반 수업은 온라인으로 진행하셔도 됩니다.
    -> https://jsbin.com/ 

 

다른 강의 보러가기

현업에서 실제 사용하는 인터랙티브 스크립트

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 멋진 포트폴리오 사이트를 만들고 싶은 분

  • 디발자가 되고 싶은 디자이너

  • 디자이너의 감성이 필요한 개발자

  • "이거 구현 가능해요?" 라는 질문에 스트레스 받아본 분

  • 시간이 없으신 분 (짤고 굵게 구성)

선수 지식,
필요할까요?

  • html, css 기초

  • javascript 기초

안녕하세요
입니다.

3,313

수강생

225

수강평

213

답변

4.6

강의 평점

3

강의

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

커리큘럼

전체

53개 ∙ (5시간 45분)

해당 강의에서 제공:

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

수강평

전체

139개

4.6

139개의 수강평

  • kyoo1196210님의 프로필 이미지
    kyoo1196210

    수강평 3

    평균 평점 4.7

    4

    2% 수강 후 작성

    This is an interaction I've been curious about for a while, and I've improved my understanding through repeated lessons. - It seems like the parts where the sound isn't consistent need to be supplemented ^^

    • coding11
      지식공유자

      Thank you for your first class review. The sound quality changed because I got a feel for the microphone settings during the filming. I will pay more attention next time~ - I renewed the lecture. Please watch it again~ Both the sound quality and the picture quality have improved.

  • salary999님의 프로필 이미지
    salary999

    수강평 18

    평균 평점 5.0

    5

    2% 수강 후 작성

    I am a professional publisher and I am a beginner in JS who is learning as much as I can because I feel the need for JS in reality :) The biggest reason I bought this course is... I saw the site that has a straw in the intro video and paid for it right away. I actually used that site as a reference when I was working on a project at work^^;; That is why I paid for it right away.ㅎㅎ For those of you who are considering buying the course, I will share my personal thoughts. (I have currently completed about 50% of the course, and I am also a beginner in JS.. I will share this from the perspective of a beginner.) 1. Really beginner type - Only heard of Vanilla JS - Only heard of the word addEventListener - Don't know how to get a specific element in JS, etc.. If you think you lack basic knowledge, I recommend that you first listen to other instructors' JS theory lectures and then take this course. 2. The type that still produces results - You can't write high-quality code on your own, but you can still produce results even if you use 100 if statements - You can at least understand the flow of code written by others If this applies to you, then you can listen. I personally think that this is a very efficient lecture. In the field, there are times when you need to quickly catch and apply specific technologies, and this lecture feels just like that. It covers all the key points in a short period of time. The problem is that since it only covers the key points, you may feel that the theory is lacking, but the theory... You don't have to worry because Google is here. I also listen while googling the parts that I'm confused about or want to know more about~ Lastly, I have a small request for the instructor! The VSCode font size on the screen seems small. ㅠㅠ If a new course is registered in the future, could you please increase the font size a little? :) And I think it would be good if there was a resize or mobile version lecture mentioned in the course review as a supplementary course for this lecture. In any case, I'll keep listening until the new lecture comes out. Thank you 👍👍

    • coding11
      지식공유자

      Wow, this is my first time writing such a long course review. Thank you so much ^^ I actually chose from the questions I received from acquaintances through messengers and made it into a lecture. It's also something that is often used in the field. The code in the class is short, but if you apply it, you can handle a variety of tasks~ I hope it will be helpful for your work. Hehe. Of course, I'm preparing the next lecture with content that can be used right away in the field. Have a great year~ (I want to do a three.js lecture like the straw site someday!)

  • lizb님의 프로필 이미지
    lizb

    수강평 4

    평균 평점 5.0

    5

    2% 수강 후 작성

    I took a few interactive web classes and they were great for learning the basic principles. Thank you.

    • coding11
      지식공유자

      Thank you for your review, Joonsol! I will think about ways to give you more~ ^^

  • mingj8294182님의 프로필 이미지
    mingj8294182

    수강평 2

    평균 평점 5.0

    5

    2% 수강 후 작성

    Teacher, I was very curious about this, thank you for teaching me. I also want to know in detail how to apply it to responsive and mobile web. It was so fun and not boring that I finished it quickly!! I will continue to watch it repeatedly and master it.

    • coding11
      지식공유자

      Thank you for the review! It's a method for applying to responsive and mobile web... It's roughly similar, but I think I should have made more samples using stageResize. I'll think about the AS method. Thank you.

  • seujuj2827님의 프로필 이미지
    seujuj2827

    수강평 1

    평균 평점 5.0

    5

    2% 수강 후 작성

    It's fun!

    • coding11
      지식공유자

      Thank you for your review! (It really helps me ㅜㅜ) I will do better...

2025 추석맞이 감사할인 중 (7일 남음)

₩26

22%

₩44,000

코딩일레븐님의 다른 강의

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

비슷한 강의

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