쉽고 빠르게 만드는 다양한 이미지 이펙트!

Name: 쉽고 빠르게 만드는 다양한 이미지 이펙트!
Price: 23100 KRW

자바스크립트와 CSS로 흩어진 이미지 조각을 하나의 이미지로 완성하는 다양한 패턴의 이미지 이펙트를 따라 만들고 랜덤으로 나타나도록 처리합니다. 이 수업을 응용한다면 수강생 여러분의 독창적인 이펙트를 만들 수 있을 거라 생각되네요!

(5.0) 수강평 9개

수강생 154명

깡코딩

JavaScript HTML/CSS 인터랙티브 웹 jQuery

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

자바스크립트와 CSS를 활용해 여러 가지 이미지 이펙트를 구현하고 구현한 이펙트를 하나로 묶어 랜덤으로 나타나도록 처리, 함수로 만들어 UI에 적용시켜 몰입도 높은 인터렉션을 만들어봅니다.
흩어진 이미지가 한곳으로 모여 하나의 이미지를 이루는 이펙트 개발
UI가 독특한 웹사이트 제작

쉽고 빠른 이미지 이펙트 만들기, 다양하게 응용해보세요!

강의 미리보기

^{▲ 영상으로 확인하면 수업 내용을 더 자세히 볼 수 있습니다.}

💡 강의 소개

수업 포인트 1

흩어져 있던 이미지가 순차적으로 실행되면서 하나의 이미지를 이루는 효과를 만들어 봅니다.

^{▲ 순차적으로 실행되는 이펙트}

수업 포인트 2

개발자 입맛에 맞게 속성을 변경해 더 다양하고 자유로운 이미지 이펙트를 만듭니다.

^{▲ 커스텀 이펙트}

수업 포인트 3

3D 효과를 추가해 조금 더 입체적인 효과도 만들어 봅니다.

^{▲ 3D효과 적용}

수업 포인트 4

위에서 구현한 모든 이펙트를 하나로 묶어 랜덤으로 나타나도록 만들고, 오픈소스 슬릭 슬라이더에 이펙트를 적용해 슬라이드될 때 다양한 이펙트가 랜덤으로 노출되도록 함으로써 더욱 화려하고 몰입도 높은 슬라이더를 만들어 봅니다.

^{▲ 슬라이더에 이펙트 적용}

TIP. 이미지 이펙트를 다양하게 응용하는 방법!

스크롤 인터랙션에 이미지 이펙트를 적용해본다면, 스크롤에 반응해 랜덤으로 나타나는 스크롤UI 이펙트까지 구현할 수 있습니다.

※ 스크롤 UI를 만드는 수업은 해당 강의에 포함되어 있지 않습니다.

▶스크롤 인터렉션 강의 바로가기

💡 강의 특징

실무에서 사용할 수 있는 다양한 이미지 이펙트를 만듭니다.
빠르고 간단한 수정으로 약 15개의 이펙트를 만듭니다.
여러분만의 아이디어를 덧붙여 응용해본다면 100개 이상의 다양한 이펙트도 만들 수 있을 거라 생각합니다 :D
코드의 양을 최대한 줄이려고 노력했습니다.
코드가 너무 길어지면 배우기도 힘들고 습득하는데도 시간이 오래 걸리죠? 최대한 짧고 간결하게 만들려고 노력했습니다.
잡담을 최소화합니다.
여러분의 시간은 소중하니까요! 불필요한 설명, 잡담 등은 과감히 버렸습니다.
예제코드 줌인/줌아웃 편집
예제코드 줌인 편집으로 모바일 기기에서도 코드를 알아보기 쉽게 만들었습니다. 등교길, 출근길에 잠깐씩 시간을 투자해보세요 :D

💡 알려드립니다

사용한 언어 및 라이브러리

CSS, JavaScript(자바스크립트), jQuery(제이쿼리)

크로스 브라우징

시스템과 브라우저에 따라 약간의 차이가 있을 수 있습니다.

수업 난이도

CSS 및 JavaScript의 기본기가 있어야 원활하게 강의를 진행할 수 있습니다. (초급 이상)

응용해보세요!

수업 내용을 응용한다면 수강생 여러분만의 독창적인 이펙트를 만들 수 있을 것입니다.

💡 예상 질문 Q&A

Q. 비전공자도 들을 수 있나요?
A. 전공자/비전공자 상관없이 CSS, JavaScript의 기본기를 안다면 충분히 학습하고 활용할 수 있습니다.

💡 지난 강의 함께 보기

초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
스크롤 인터렉션에 필요한 다양한 모션 이펙트를 배워보세요.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

UI/UX에 관심 많은 분들
모션 이펙트에 관심 많은 분들
창의적이고 개성 강한 홈페이지에 관심 많은 분들
특별한 포트폴리오를 만들고 싶은 취준생 분들
디자이너지만 인터렉션에 관심 많은 분들
인터렉션 스킬을 추가해 연봉 올리고 싶은 분들!

선수 지식,
필요할까요?

HTML, CSS, JavaScript

안녕하세요
깡코딩입니다.

1,307

명

수강생

개

수강평

163

개

답변

4.7

점

강의 평점

개

강의

안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)

10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.

저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요

많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.

제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.

그럼 수업에서 뵙겠습니다 :)

커리큘럼

전체

11개 ∙ (1시간 41분)

해당 강의에서 제공:

수업자료

섹션 1. 학습 준비

4개 ∙ (2분)

수업 미리보기
01:01
수업 폴더 구조 파악하기
01:07
수업자료 다운로드(미완성 코드)
수업자료 다운로드(완성된코드)

섹션 2. 이미지 행과 열 만들기

1개 ∙ (11분)

이펙트 구조 만들기
11:27

섹션 3. 기본 이펙트 만들기

2개 ∙ (24분)

기본 이펙트 만들기1
15:54
기본 이펙트 만들기2
08:57

섹션 4. 커스텀 이펙트 만들기

2개 ∙ (18분)

섹션 5. 이펙트 랜덤노출 처리

1개 ∙ (23분)

섹션 6. 슬라이더에 적용해보기

1개 ∙ (21분)

강의 게시일: 2020. 10. 13.

마지막 업데이트일: 2024. 06. 02.

수강평

전체

9개

5.0

9개의 수강평

foxball
2024. 06. 25.
∙
수강평 31
∙
평균 평점 4.8
5
64% 수강 후 작성
선생님 swiper.js 에서도 적용하는방법좀 알려주세요 한참해매고 있습니다. ㅠㅠ
- 깡코딩
  지식공유자
  2024. 06. 26.
  안녕하세요 소중한 수강평 감사합니다. :) 스와이퍼 js에 적용할 때도 똑같습니다~! const swiper = new Swiper('.swiper-container', { effect: 'fade', speed: 0, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { slideChange: function () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); } } }); 이런식으로 슬라이드가 변경될 때 호출되는 slideChange 콜백 함수를 사용하면 됩니다. :)
기쁜 도미
2023. 01. 19.
∙
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
낳았습니다.
- 깡코딩
  지식공유자
  2023. 01. 19.
  thanks :D
jinuLee
2022. 01. 07.
∙
수강평 6
∙
평균 평점 4.7
5
100% 수강 후 작성
짧은 시간임에도 꿀팁이 넘쳐나는 너무 좋은 강의 입니다! 다양하게 활용하겠습니다:D
- 깡코딩
  지식공유자
  2022. 01. 07.
  안녕하세요! 팁을 다양하게 활용하실 수 있다면 더 기쁜 일은 없을 것 같네요:) 소중한 수강평 감사합니다:)
정지
2022. 07. 10.
∙
수강평 13
∙
평균 평점 4.9
5
100% 수강 후 작성
굿굿 너무 좋은 강의입니다
- 깡코딩
  지식공유자
  2022. 07. 11.
  안녕하세요 :) 소중한 수강평 감사합니다 :D
Glacier
2024. 01. 16.
∙
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성
간략하게 응용해볼수 있는 강의였어요 감사합니다.
- 깡코딩
  지식공유자
  2024. 01. 17.
  안녕하세요:) 소중한 수강평 감사합니다

깡코딩님의 다른 강의

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

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

₩88,000

초급 / 인터랙티브 웹, JavaScript, HTML/CSS

4.8

(21)

300+

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

깡코딩

₩121,000

초급 / JavaScript, HTML/CSS, 인터랙티브 웹, jQuery

4.6

(40)

800+

단순히 특정 사이트를 따라 만드는 강의가 아니라 지식공유자가 공유하는 스크롤 인터렉션 노하우, 핵심요소를 기초부터 탄탄히 배워 애플 등 국내 기업에서 많이 사용하는 UI 스크롤 인터렉션의 다양한 기법들과 모션 등을 배우고 만들어 봅니다.

초급

JavaScript, HTML/CSS, 인터랙티브 웹

비슷한 강의

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

실전! 웹사이트제작! Step by Step! (쌩초보 코스)

J.영

₩11,000

입문 / HTML/CSS, 웹 디자인

4.9

(8)

100+

실전! 웹사이트제작 Step By Step! 입문 강좌로, 다양한 기초 레이아웃을 제작해 보면서 HTML과 CSS의 개념을 확실하게 배울 수 있는 강의입니다.

입문

HTML/CSS, 웹 디자인

Vanila JS 기반 UI Component - 탭메뉴 만들기

코딩고스트

₩13,200

초급 / HTML/CSS, vanilla-javascript

하나의 웹 페이지를 구성하려면, 부분부분 각 컴포넌트들을 만들 수 있어야 합니다. 순수코딩만으로 UI component를 만들어 봅니다. html,css,javascript를 사용하실 줄 아는 분께 추천드립니다.

초급

HTML/CSS, vanilla-javascript

반응형 웹사이트 포트폴리오(App Official Landing Website)

코딩웍스(Coding Works)

₩61,600

초급 / HTML/CSS, jQuery, 반응형 웹

5.0

(28)

400+

반응형 웹사이트 포트폴리오(App Official Landing) 제작 과정은 HTML+CSS+JQUERY 퍼블리싱으로 반응형 웹사이트 전체 제작과정을 통해 퍼블리싱 중급 실력으로 가는 기본기를 단단히 하고 실전 퍼블리싱의 노하우를 갖게 됩니다. 특히, 웹사이트 전체 제작과정을 충분한 설명과 실전 작업으로 경험하고 개인 포트폴리오 웹사이트 제작에 자신감을 갖게 됩니다. 필수로 사용해야 하는 제이쿼리 플러그인으로 Scroll Reveal Animation과 Slick 슬라이더 사용법을 학습합니다. 반응형 제작 방식은 기존 방식의 float와 position을 이용한 반응형 레이아웃 제작 방식으로 제작합니다. 하지만 어느 특정 요소에서는 Flex를 사용하는 부분도 있습니다.

초급

HTML/CSS, jQuery, 반응형 웹

Tailwind CSS 실전 포트폴리오 퍼블리싱

코딩웍스(Coding Works)

₩55,000

초급 / TailwindCSS, HTML/CSS

5.0

(3)

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

초급

TailwindCSS, HTML/CSS

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

₩49,500

초급 / HTML/CSS, jQuery, 웹 디자인

4.0

(5)

웹디자인기능사 실기 시험을 준비하시는 분들에게 짧고 쉽게 배우는 강좌를 준비했습니다. 단지 시험 때문이 아니더라도, 웹표준 양식에 맞는 사이트 구현에 관심있으신 분이라면 환영합니다.

초급

HTML/CSS, jQuery, 웹 디자인

웹디자인개발기능사 [2025년] 실기전체 A - F (카톡질문가능)

두노피

₩231,000

초급 / HTML/CSS, jQuery

5.0

(2)

전국 합격률 60%중에 우리반 합격률은 90%! 시험요구사항을 파악하면 가능합니다. 실기 책 사지마요 어려워요

초급

HTML/CSS, jQuery

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.1

유용한IT학습

₩42,900

중급이상 / JavaScript, jQuery

4.8

(31)

55,100+

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 1은 자바스크립트의 클래스와 객체지향 프로그래밍의 내용을 다루고 있습니다.

중급이상

JavaScript, jQuery

자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2

유용한IT학습

₩45,100

중급이상 / JavaScript, jQuery

4.7

(27)

54,600+

이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 2은 자바스크립트의 추상화, 캡슐화, 상속, 다형성을 다루고 있습니다.

중급이상

JavaScript, jQuery

클린업 JavaScript: 베이스 빌드업!

김영보

₩44,000

초급 / JavaScript, 면접, 기술면접

5.0

(3)

100+

생각을 다룹니다. 자바스크립트 핵심과 근본을 논리적으로 정리할 수 있습니다. 자바스크립트 경험, 생각을 스스로 정리할 수 있습니다. 자바스크립트 기술 논리를 정립할 수 있습니다. 자바스크립트 전체를 보는 시야를 넓힐 수 있습니다. 자바스크립트 기술 면접 문제에 대비할 수 있습니다.

초급

JavaScript, 면접, 기술면접

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

코드캠프

₩88,000

입문 / HTML/CSS, JavaScript, vanilla-javascript

5.0

(1)

최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

입문

HTML/CSS, JavaScript, vanilla-javascript

가볍게 실전 html (인터넷 업로드까지)

두노피

₩11,000

초급 / HTML/CSS, upload-file

5.0

(1)

입문편에서 연습으로 만들어봤던 VD 사이트 메인페이지를 실전으로 만들어볼거에요~

초급

HTML/CSS, upload-file

쉽고 빠른 스타일링 Tailwind CSS 기초 가이드

The Oreum

₩22,000

초급 / HTML/CSS

4.7

(30)

1,100+

'HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트' 구축을 가능하게 만드는 'Tailwind'를 소개합니다!

초급

HTML/CSS

퍼블리셔 취업 진짜 실전 가이드(PDF)

코딩웍스(Coding Works)

₩35,200

입문 / HTML/CSS

4.9

(38)

600+

퍼블리셔 취업을 위한 진짜 가이드 전자책(PDF)으로 효율적인 퍼블리싱 학습방법, 좋은 퍼블리싱 강의 잘 가르치는 퍼블리싱 강사 고르는 안목, 신입이지만 경력자처럼 퍼블리싱하는 요령, 바람직한 코딩 습관과 원칙, 개인 포트폴리오 홈페이지 제작 방법, 디자이너 개발자와의 협업 요령, 퍼블리셔로 알아야 할 필수 사이트, 포토샵 UI 디자인 실력키우기 등 퍼블리셔 취업을 위해 반드시 알아야 하는 HTML+CSS+JQUERY 퍼블리싱 기본기를 상세하게 알려드립니다. 또한, 국비지원 퍼블리셔 과정에 대해 상세히 설명합니다.

입문

HTML/CSS

타입스크립트 입문 - 기초부터 실전까지

장기효(캡틴판교)

₩55,000

초급 / TypeScript, ES6, JavaScript

5.0

(614)

5,400+

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관점에서 쉽고 재밌게 배워보겠습니다 😄

초급

TypeScript, ES6, JavaScript

[환상의족발] 디자인부터 코딩까지

두노피

₩22,000

초급 / Photoshop, HTML/CSS, 클론코딩

5.0

(1)

맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

초급

Photoshop, HTML/CSS, 클론코딩

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

₩88,000

초급 / 인터랙티브 웹, JavaScript, HTML/CSS

4.8

(21)

300+

초급

인터랙티브 웹, JavaScript, HTML/CSS

Figma 디자인부터 퍼블리싱까지

Michael Kwon

₩66,000

초급 / Figma, HTML/CSS

5.0

(1)

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

Figma, HTML/CSS

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

코딩웍스(Coding Works)

₩61,600

초급 / 포트폴리오, HTML/CSS, jQuery

5.0

(14)

300+

지금까지 200여명의 오프라인 학원 학생들 신입 퍼블리셔 취업 포트폴리오 지도한 경험을 통해 코딩웍스가 심혈을 기울여 만들었습니다. 면접과 취업을 부르는 퍼블리셔 '개인 포트폴리오 홈페이지' 제작 강의는 퍼블리셔 취업을 위해 필수로 준비해야 하는 개인 포트폴리오 홈페이지를 어떻게 어디서부터 준비하는지 알려드리는 충실한 가이드입니다. 강의는 총 19시간 이상의 강의 내용이 담겨 있습니다. 개인 포트폴리오 홈페이지 제작 전 퍼블리싱 관련 필수사항, 취업과 실무에서 최고로 중요한 퍼블리싱 기본기, 취업을 위한 제이쿼리와 자바스크립트 & 코딩 미션, 개인 포트폴리오 홈페이지에 넣을 포트폴리오 결과물 제작 방법, 개인 포트폴리오 홈페이지 섹션 별 콘텐츠 레이아웃 및 상세내용, 지원할 기업 구분하기 & 퍼블리셔 실전 면접 요령 등 신입 퍼블리셔로서 알아야 할 모든 내용을 담고 있습니다.

초급

포트폴리오, HTML/CSS, jQuery

<M.B.I.T> 테스트 페이지 만들기! with Django

제주코딩베이스캠프

₩38,500

초급 / HTML/CSS, JavaScript, Django

4.8

(19)

1,700+

개발 유형을 테스트하는 웹 페이지를 만들어보세요! MBTI아닌 MBIT(My Best IT personalities)! 'MBIT 테스트 페이지'를 직접 만들어보며 웹 개발의 전반적인 프로세스를 익혀볼 수 있습니다. (Django 3.1 버전을 사용합니다.)

초급

HTML/CSS, JavaScript, Django

[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!

치트키 알려주는 남자

₩110,000

초급 / Java, PHP, HTML/CSS, MySQL

4.6

(7)

Update

AI와 그누보드를 활용해, IT 초보라도 아이디어 하나로 ‘나만의 플랫폼 CEO’가 되는 시대! 기획부터 배포까지 실제 개발 과정을 낱낱이 시연하고, 광고·쇼핑몰 등 다양한 수익화 방법까지 알려드립니다. 지금 바로 온라인 비즈니스를 시작하세요!

초급

Java, PHP, HTML/CSS

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

스크롤 인터랙션과 다양한 효과로 만드는 웹사이트

깡코딩

₩23,100

쉽고 빠르게 만드는 다양한 이미지 이펙트!

초급자를 위해 준비한 [프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

💡 강의 소개

💡 강의 특징

💡 알려드립니다

사용한 언어 및 라이브러리

크로스 브라우징

수업 난이도

응용해보세요!

💡 예상 질문 Q&A

💡 지난 강의 함께 보기

이런 분들께 추천드려요!

안녕하세요 깡코딩입니다.

커리큘럼

수강평

깡코딩님의 다른 강의

비슷한 강의

연관 로드맵

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

이런 분들께
추천드려요!

안녕하세요
깡코딩입니다.