Thumbnail
BEST
개발 · 프로그래밍프론트엔드

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

(4.6)
40개의 수강평 ∙ 792명의 수강생
121,000원

월 24,200원

5개월 할부 시
지식공유자: 깡코딩
총 78개 수업 (11시간 23분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가공유
  • 혜미 프로필혜미
    2023-10-251057352

    안녕하세요. 혹시 강의로 설명해주시는 예제 반응형으로도 설명해 주시나요?

    깡코딩
    깡코딩
    깡코딩
    2023-10-26292071

    안녕하세요~ :) 예제 전체를 반응형으로 설명하진 않습니다. 다만 반응형 작업을 위해 필요한 기초적인 부분만 설명합니다. 해당 부분을 이해하면 반응형 작업을 할 수 있어요~ :D

  • 트릴 프로필트릴
    2023-01-12744854

    모든 섹션이 제이쿼리를 자바스크립트로 변환하는 작업을 하나요?

    깡코딩
    깡코딩
    깡코딩
    2023-01-12234352

    안녕하세요 :) 모든섹션에서 사용한 제이쿼리 부분을 바닐라 스크립트로 변환하는 작업을 합니다 :) 수업에서 사용한 제이쿼리는 수업 앞부분에서 모두 바닐라 스크립트로 변경하기 때문에 뒷 부분에 나오는 중복되는 내용은 따로 변경하지 않습니다.

  • 혬이 프로필혬이
    2023-01-06737554

    회사에서 홈페이지 만들때 강의에 있는 소스코드로 만들어도 되나ㅜ? 그대로 써도 되는지 궁금해서 여쭈어봅니다. ㅜ

    깡코딩
    깡코딩
    깡코딩
    2023-01-06233054

    안녕하세요 :) 네 상관 없습니다 수업 코드를 무료로 배포하지 않으면 됩니다

  • 박준호 프로필박준호
    2022-12-16714340

    혹시 이강의듣고 이소스로 응용해서 포폴제작해도 상관이 없는건가요?

    깡코딩
    깡코딩
    깡코딩
    2022-12-16228418

    안녕하세요 :) 네 상관 없습니다 수업 코드를 무료로 배포하지 않으면 됩니다

  • 주석환 프로필주석환
    2022-08-23630986

    HTML, CSS3만 만질줄압니다. 제이쿼리등은 오픈 라이브러리 소스들 가지고 와서 수정 쪼금 해서 사용합니다. 자바스크립트, 제이쿼리 문법을 아예 모르는데, 이 강좌를 들어도 될까요? 아니면 자바,제이쿼리 인문 강의를 먼저 듣고 이 강좌를 들어야 될까요? 인문 강좌를 먼저 들어야 한다면 어떤 강좌를 들어야 될지 추천부탁드립니다.

    깡코딩
    깡코딩
    깡코딩
    2022-08-23207806

    안녕하세요 :) 코드는 초보자분들을 위해 정말 기본적이고 간단한 문법들만 사용해 제작해 두었습니다. 문법을 아예 모르신다면 수업이 조금 어렵지 않을까요? 따라 만드는 수업과 설명 위주의 수업을 모두 만들어 두었는데 수강생분들마다 의견이 다 달라서 딱 이렇다고 말씀은 못 드리겠네요^^; 입문 강의는 추천드리고 싶지만 저는 예전에 책을 보고 공부한 사람이라.. 추천드리기가 애매하네요 죄송합니다. 그럼 건승하시길!

  • dbrjsdml 프로필dbrjsdml
    2022-03-21484916

    수강바구니 - 강의정보에 보면 결제창에 무제한 수강(유료 1개월 + 무료 무제한) 이런식으로 되어있어서 궁금해서 여쭤봤습니다! 선생님의 다른 강의를 구매한 친구에게 물어봤더니 친구도 이렇게 나왔었다고 무제한 맞다네요! 강의잘보겠습니다~~

    깡코딩
    깡코딩
    깡코딩
    2022-03-21177631

    안녕하세요! 그렇군요!^^; 이부분은 제가 인프런에 문의해 보겠습니다.

  • dbrjsdml 프로필dbrjsdml
    2022-03-20484024

    유료 1개월 + 무료 무제한 이라고 되있는데 유료1개월 강의가 따로 있는건가요?

    깡코딩
    깡코딩
    깡코딩
    2022-03-21177342

    안녕하세요. 인프런 수강 기한은 무제한으로 알고 있는데요. 그런 문구를 어디에서 보셨나요?? 말씀하신 내용은 금시초문이라 여쭤봅니다!

  • qkrpjc00 프로필qkrpjc00
    2022-01-25415134

    안녕하세요, 이쪽으로 프로젝트 경험이 전무한 제가 (디자이너이고 앞으로 개발자가 될 생각은 없습니닷..) 어쩌다가 공식적인 학원 웹사이트를 만들게 되었는데 제 머릿속에 그리고 있는 사이트를 실제 구현하려면 이 강의를 들은 후 제가 응용해서 짜기에 충분히 가능할까요? (이 강의의 코드를 절대 그대로 사용하지 않을 겁니다ㅎㅎ) 일단 애플 사이트 강의처럼 인터랙티브한 웹사이트를 만들고 싶은데요, 만약 만들 때 자바스크립트나 html, css 같은 프론트엔드 프로그래밍 정도는 어떻게 배워서 해볼 수 있겠는데 그 이상의 서버 언어 (jsp,asp,java 등등) 수준의 스킬이 요구된다면 외주를 맡기거나 wix 같은 프로그램을 사용해야하지 않을까 고민하고 있습니다. 그런데 제 단편적인 지식(?)에 의하면 아래와 같은 느낌을 가진 인터랙티브 웹사이트 정도는 html,css,javascript 정도로 가능해보여서 한번 여쭤보고 싶어요! 이 사이트에 나오는 모든 인터랙션 스킬을 넣으려고 얘를 선택한건 아니구요, 제가 웹사이트에 넣을 기능들이 데이터베이스랑 연결해서 웹에서 보여지는 내용을 계속 업데이트 한다던가 하는게 아니라 그냥 학원 소개, 소속 사람들, 수상이력, gmail로 연결 등 만들때 적은 글만 보여지는 기능 정도만 들어갈거라서요! 아래의 웹도 그 정도 기술인 것 같은데 맞을까요? https://lamalama.nl/contact/ 그리고 정말 이렇게 만든 소스코드만으로 (학교로부터 서브도메인 받은 후) 누구나 접속 가능한 웹사이트 운영이 가능한지도 궁금하구요! 조금 급한 상황이라 최대한 빠른 답변 주시면 강의 선택에 큰 도움이 될 것 같습니다. 감사합니다^^ +) 아, 그리고 모바일로도 학교 페이지를 접속할 수 있어야 하는데 이 강의로부터 배운 소스코드로도 가능한지도 궁금합니다!

    깡코딩
    깡코딩
    깡코딩
    2022-01-25163934

    안녕하세요 :) 1. 응용해서 짜기에 충분할까요? -> 이 수업은 스크롤 인터렉션에 관련해 섹션2부터 섹션11까지 계속 반복되는 부분이 있습니다. 그부분이 구현된 인터렉션의 핵심 부분이구요. 그런 부분에 대하여 케치를 잘한다면 당연히 응용하여 사용 가능합니다. 하지만 인터렉티브한 요소들을 깊게 들어가게 되면 수학적인 부분들도 많이 요구되니 참고하세요. :) 3. 아래의 웹도 그 정도 기술인 것 같은데 맞을까요? -> 웹사이트 제작순서는 다음과 같습니다. 1.기획, 2.디자인, 3.퍼블리싱, 4.개발. 웹사이트를 제작할때 db연동을 하지 않아도 어떻게 만드냐에 따라 요구하는 기술은 천차만별입니다. html,css,javascript만 사용한다면 3번까지 가능하겠네요. :) javascirpt를 깊게 들어갈 경우 백엔드 개발처럼 어려울 수 있습니다. :) 말씀하신 웹페이지를 자세히 보진 않았지만 html,css위주로 만든 웹사이트라면 특별한 개발 지식이 없어도 만들 수 있지 않을까요?? 4.누구나 접속 가능한 웹사이트 운영이 가능한지? 눈에 보이는 결과물을 만들었다면 내부 코드는 어떻게 만들었던간에 접속 가능합니다. 하지만 누구나 접속가능하다는 말에서 접근성 부분을 고려해야 한다면 마크업 등을 고려한 퍼블리싱 작업이 필요하겠네요 :) 5.모바일로도 학교 페이지를 접속 가능한지? 웹페이지를 만들때 적응형, 반응형중 선택해 개발을 하는데요. 반응형 기준으로 설명드리면 일단 기본적인 html,css 지식이 있어야 하고 미디어쿼리 개념이 있어야합니다. 만약 스크립트에서도 반응형 코드를 구현해야 한다면 난이도가 조금 올라갈 수 있습니다. 수업에서는 모바일 관련 내용을 깊게 다루지 않고 스크롤 인터렉션에 필요한 부분에 대해서만 간략하게 다루고 있습니다.(섹션4~섹션9 골고루 조금씩 진행)

  • mTojs 프로필mTojs
    2022-01-21409881

    안녕하세요~ 지금 이 강의 할인중인데요~ 몇가지 문의드려요. 1. 혹시 언제까지 할인 금액으로 구매가능한지 알수있을까요? 2. 맥으로 강의진행 되나요? 3. 완성 코드 파일로 제공 되나요?

    깡코딩
    깡코딩
    깡코딩
    2022-01-21163044

    안녕하세요 :) 1. 할인 종료 시간은 현재 2022.2.1로 되어있습니다 :) 2. 맥으로 진행되는데요. 맥에서만 들을 수 있는 수업은 아닙니다! 윈도우로 들어도 상관없어요 :) 3. 네 당연히 완성코드는 파일로 제공됩니다.

  • kain74 프로필kain74
    2021-07-20260867

    혹시 쿠폰지원되나요? 할인중이긴한데. 가격이 약간 부담스러워서요...

    깡코딩
    깡코딩
    깡코딩
    2021-07-20124102

    안녕하세요 :) 지금은 쿠폰 할인 기간이 아닙니다. 좋은하루보내세요 :D

  • bigkid young 프로필bigkid young
    2021-04-16194973

    안녕하세요 궁금한것이 있어서 문의드립니다. 저는 현재 html, css, javascript 독학을 하고 있습니다. html, css로는 네이버, 유튜브, 관공서, 병원 사이트 등등 (동적인 기능 제외)레이아웃을 할 줄 알고 javascript는 데이터종류, 변수, 예약어, 함수 , 조건문 dom api, 메소드 체이닝, 데이터 타입 확인, (산술, 할당, 비교, 논리,삼항)연산자, 조건문 if else, 조건문 switch, 반복문for, 형변화,화살표 함수 ,llff, 호이스팅, 타이머 함수, 콜백, 생성자함수,클래스,상속,문자 ,숫자,수학,배열,객체,구조분해할당,전개연산자,복사 Q1.위 작성대로 html과 css 그리고 자바스크립트는 문법만 공부했습니다 이정도 공부 했는데 강의 듣고 충분히 소화 가능할까요? 자바스크립트 책보면 쪽수만 600백쪽 정도 되던데요.. 안되지 않을까요..? Q2.반응형 포트폴리오를 제작할 수 있을까요? +추가 질문있습니다..! q.1 그러면 저정도 문법정도는 알고 또 따로 공부를 어느정도 해야 강의를 듣는게 수월할까요 아니면 저정도면 충분할까여? q2. 그러면 반응형부터 만들줄 알아야 강의듣는게 수월할까요??

    깡코딩
    깡코딩
    깡코딩
    2021-04-16105535

    q01. css기본과 javascript의 기본이 확실하다면 이 수업은 너무나도 쉬울겁니다. (이 수업은 스크롤 인터렉션의 원리를 이해하는게 포인트입니다) q02. 수업에서 중간 중간 반응형 모바일을 처리하는 부분을 설명하는데 딱 필요한 기초적인 부분만 설명하고 필요없는건 설명하지 않습니다. 이 문제는 반응형웹 개발 개념에 따라 받아 들이는 사람에 따라 다를수 있습니다.(입문자라면 어려울 수 있습니다)

  • junguk1403 프로필junguk1403
    2021-03-23177756

    혹시 선생님께서 만든것들을 반응형으로도 설명해주시나요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-23100644

    안녕하세요 :) 반응형에 대해 설명하는 섹션이 있고 아닌 섹션이 있습니다. 섹션4,7,8에서 반응형에 대한 resize시 변경되는 변수와 미디어 쿼리를 간략히 설명하는데 이 부분에 대해 이해하시면 다른 섹션 반응형 작업도 크게 어렵지 않을거라 생각됩니다 :)

  • trust7603 프로필trust7603
    2021-03-18175002

    정말 감사합니다!! 열심히 학습해서 UI개발자가 되도록 노력하겠습니다.

    깡코딩
    깡코딩
    깡코딩
    2021-03-1899779

    조급해하지 말고 천천히 한발 한발 내딛다 보면 좋은 결과 있으실 거예요 :) 화이팅 하세요! :D

  • trust7603 프로필trust7603
    2021-03-18174999

    안녕하세요 (라이센스는 다른 강의에 사용하거나 무단 배포가 금지에요)라는 말씀은 다른 사람들에게 공유하지 않고 저만 알고 있으면 괜찮은건가요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-1899777

    네 :) 웹사이트 제작에 자유롭게 사용해도 되지만 해당 강의 자료를 활용해 유튜브나 무료,유료 강의에 사용하는것을 금지하는거에요! 무단배포는 블로그나 코드펜 등에 올리면 안된다는 말입니다(오픈소스로 배포하면 해당 수업을 수강한 수강생님들에게 큰 손실이거든요) :D

  • trust7603 프로필trust7603
    2021-03-18174957

    안녕하세요^^ UI개발자가 꿈인 4학년 학부생입니다. 질문이 있는데요 1. 스크롤 인터렉션 강의를 수강하면 혹시 기존에 자바스크립트로 제작한 웹 사이트에 적용시킬 수 있을까요? 포트폴리오를 준비하는데 해당 강의에 있는 것들을 추가하면 좋을 거 같아서 문의드립니다. 2. 1편 기능들을 배우고 나중에 나올 2편도 수강한다면 UI개발자를 지원할 때 도움이 많이 될까요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-1899776

    안녕하세요:D 1. 기존에 자바스크립트로 제작한 웹사이트에 적용이 가능합니다.(라이센스는 다른 강의에 사용하거나 무단 배포가 금지에요) 2. 1,2편을 떠나서 UI개발자가 꿈이라면 스크롤에 반응하는 인터렉션의 원리를 알고 계시면 좋을거라 생각됩니다^__^

  • 이정현 프로필이정현
    2021-01-28141293

    제공되는 첨부파일이 완성코드인가요? 완성코드가 제공 안된다는 후기가 있어서 문의드립니다.

    깡코딩
    깡코딩
    깡코딩
    2021-01-2890826

    안녕하세요 :) 모든 섹션의 완성 코드가 첨부되어 있습니다. 감사합니다 :D

  • jeus0630 프로필jeus0630
    2021-01-20134731

    트윈맥스등 라이브러리를 사용해서 구현하나요 아니면 라이브러리 없이 scroll 이벤트와 mousemove이벤트등을 활용해서 구현하나요?

    깡코딩
    깡코딩
    깡코딩
    2021-01-2089355

    안녕하세요 :) 사용하는 라이브러리는 j-query 입니다. 다른 라이브러리는 사용하지 않습니다

  • 무민 프로필무민
    2021-01-17131428

    애플컴퓨터가 아니라 윈도우도 적용되나요?

    깡코딩
    깡코딩
    깡코딩
    2021-01-1788581

    안녕하세요 :) 네 윈도우에서도 작동합니다

  • ᄋᄋ 프로필ᄋᄋ
    2020-11-2595187

    제이쿼리는 써본 적이 없고 자바스크립트만 써봤는데 제이쿼리 기본 문법을 몰라도 수업을 들을 수 있을 지 궁금합니다. 그리고 대부분의 인터랙션을 위한 코드가 제이쿼리로 구성되어있는 지도 궁금합니다. 그리고 2편은 대략 언제쯤에 올라올 예정인 지도 궁금합니다!

    깡코딩
    깡코딩
    깡코딩
    2020-11-2579758

    자바스크립트 언어를 이해하고 있다면 제이쿼리 기본문법은 아주 쉽게 이해할 수 있는데요 이유는 $('.선택자'), addClass, removeClass 등 이런 기초적인 제이쿼리 문법들은 순수 자바스크립트 문법과 대부분 흡사하기 때문입니다. 그리고 엄밀히 말하자면 스크롤 인터렉션 수업은 초보자 분들이 쉽게 배울수 있도록 코드를 상당히 간결하게 작성해 두었기 때문에 문법에 대한 이해보다는 스크롤 인터렉션 원리에 대해 이해하는게 중요합니다.(수식,로직, css애니메이션, 다양한 인터렉션 패턴(수업에서 다양한 패턴의 인터렉션을 다루고 있음)) 마지막으로 제이쿼리 기초 문법이 걱정된다면 제이쿼리 기초 문법을 구글등에 검색해보시고 수업을 수강할지 판단하시면 될 것 같습니다. 검색해 보시면 아시겠지만 제이쿼리 기초 문법은 상당히 쉽습니다^^(다시한번 말씀드리지만 수업에 작성된 예제 코드는 생각보다 간결하게 작성되어 있기 때문에 크게 어려움 없이 배울수 있을거라 생각되네요) 2편은 올해가 가기 전에 나올수도 있고 내년에 나올수도 있습니다. 정확한 날짜는 알려드릴수 없습니다. 감사합니다. 감기조심하세요 :D

  • Wizone 프로필Wizone
    2020-11-2193919

    강의 소개 영상에서 나오는 2편은 꼭 1편의 기본기가 있어야지만 쉽게 할 수 있는지 궁금하고, 또 2편은 언제쯤 올려주실 예정이신지 궁금해요!!

    깡코딩
    깡코딩
    깡코딩
    2020-11-2179338

    안녕하세요 Wizone님 :) 스크롤 인터렉션 1편의 기본기가(기본 수식 개념 등) 없다면 2편의 내용은 어려울 수 있습니다 :) 내용이 이어지거든요! 그리고 2편이 업로드 되는 날짜는 알려드릴 수 없습니다! 감사합니다 :D

채널톡 아이콘