월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
반복문 코드에 대하여 궁금합니다.
안녕하세요. 강의 보면서 재밌게 공부중에 있습니다. 다름아니라 pointBtn구현부에서 선생님이 올려주신 코드와 제가짠 코드에 대해서 뭐가 다른지 조금 궁금합니다. 저렇게 짜도 정상작동 하더라고요. 1. 반복문이 계속 돌고 있는건가요? 해당 인덱스번째가 click되는지 알기 위해서는 반복문이 계속 돌고 있어야 할거 같은데, 로그 찍어보면 첫 실행시 total개수만큼만 돌고 이후에는 안도는데, 그래서 예상으로는 클릭 Eventlistner가 전체개수만큼 생성되는걸까 추측해봤는데 맞는건가요? 2. 선생님이 올려주신 코드에서는 for문 안에 idx로 인자를 받는데, 이때 idx는 어떤 값을 가지고 있는건가요? 3. for문안 function(idx) { .... }(i) 이렇게 되는데 function자체가 언제 실행되는건가요? 함수가 리턴되지 않는데 (func)(i)이렇게 사용하는게 가능한가요? js문법자체가 아직까지 헷갈려서 이해가 명확히 되지 않아서 질문드렸습니다! 감사합니다.
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
안녕하세요. addEventListener에서 인자로 event의 역할
강의 소스코드에서, addEventListener에서 function(event) { } 에서 인자로 event를 넘겨주는데 이때 이 인자는 어떤 역할을 하게 되는건가요? 인자를 주지 않아도 정상 작동하는거 같아서요
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이지 고정에서 즉시 실행 함수 관련해서...
안녕하세요. 즉시 실행 함수와 관련해서 뭐좀 여쭙고자 질문드립니다. 질문 1. 페이지 고정 프로젝트 중, li를 이용해서 pointBtn을 만들고, pointBtn을 누르면 해당 페이지로 자동 스크롤 한다. 를 위와 같이 구현하셨습니다. 근데, 작동 로직이 잘 이해가 안됩니다. 제가 이해한 바에 따르면, 아래 4번 과정이 이해가 안됩니다. 1. 페이지 로드된 후 window.onload 실행 2. 소스 코드 평가 3. 소스 코드 실행(for문 동작함) 4. for문이 돌기 시작해서 처음 인덱스부터 끝 인덱스까지 돌고 탈출함. 이후 사용자가 pointBtn을 클릭해도 for문을 탈출한 상태이기 때문에 다시는 들어갈 일이 없음. 근데 예상과는 다르게 동작함... 어떻게??... 질문 2. 위 질문에 이어서 저 코드가 동작하는 이유가 이해가 안되는게, 어찌저찌해서 for문이 다시 도는게 가능하다고 하더라도, 즉시 실행 함수가 바로 실행이 돼서 내부 코드에 따라 index에 해당하는 li에 click이 발생했는지 확인할텐데, 클릭을 누르는 순간 for문이 돌기시작하면서 index가 클릭을 누른 li의 인덱스에 정확하게 도달하는게 어떻게 가능한지... 질문 3. 프로젝트와 동일한 로직으로 li 내부 button이 눌리는지 확인하고자 위와 같이 구성해봤습니다. 그래서 같은 로직이라고 생각되어 아래와 같이 구현을 했는데요. alert('hi')작동이 안되네요.. 혹여나 설명이 길어지신다면 해답이 될 수 있는 키워드로 알려주시면 감사하겠습니다. 직접 찾아볼게요. 감사합니다.
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
Ios 분기처리에 대한 질문입니다.
isIos를 통한 분기처리를 하고 크롬에서 테스트한 결과 다음과 같은 오류가 발생하며 정상 작동이 되지 않고 있습니다. 그러나 ios 분기처리를 주석처리한 후 mobileOrientationChk() 함수 안의 내용만 실행시켜주면 크롬에서 정상적으로 작동하는 모습을 볼 수 있습니다. 개발자도구 테스트 결과는 이러한데 실제 디바이스에서도 똑같은 현상이 발생하는지 궁금합니다.
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
TweenMax 적용 시 hover가 안되나요?
임의로 카드들을 회전하게 하여 화면이 bottom으로 이동했을 경우 다시 원래대로 카드를 회전시키는 기능을 추가하였습니다. 그러나 이 경우에 마우스 커서를 가져다대어도 카드가 움직이지 않습니다. 카드가 회전을 마친 후 마우스를 가져다 댔을 때 hover 동작까지 수행하게 하려면 어떻게 바꿔야 하는지 궁금합니다. TweenMax.to("li", 2.5, { rotateY: 0, delay: 2.2, ease: Power3.easeInOut }); js 파일에서는 이 부분만을 추가하였고 scss 파일에서는 다음과 같이 변경하였습니다. ul { perspective: 400px; li { display: inline-block; margin: 0 2%; width: 130px; height: 200px; border-radius: 6px 6px 6px 6px; box-sizing: border-box; padding: 10px; transform: rotateY(45deg); cursor: pointer; p { font-size: 40px; color: #fff; border-bottom: 2px dashed #fff; } &:nth-child(1) { background: linear-gradient(45deg, #f7b733, #fc4a1a); } &:nth-child(2) { background: linear-gradient(45deg, #FC00FF 0%, #401241 100%); } &:nth-child(3){ background-image: linear-gradient(45deg, #ce713b 0%, #F7CE68 100%); } &:nth-child(4){ background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); } transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); &:hover { transform: translateY(-20px); } } }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
자바두개
안녕하세요! 수업너무 유익하게 잘듣고있는학생입니다! 선생님이 수업하신 album과 별이빛나는밤 코드를 한페이지에 두개다 응용하려고하는데 안되서요..원래안되는건가요????
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이지 스크롤링 제가 이해한게 맞을까요 ..?
//두번째 방법 for(var i=0; i<totalNum; i++){ //console.log(i) if(scroll > section[i].offsetTop - window.outerHeight/2 && // 스크롤 올릴때 2/1 지점을 넘어가면 scroll < section[i].offsetTop - window.outerHeight/2 + section[i].offsetHeight){ //스크롤 내릴때 2/1 지점을 넘어가면 섹션을 바꾸고 새로운 섹션의 높이를 더해줘서 스크롤Y 값과 비교 될수 있도록 한다. pageNum = i; console.log(section[i].offsetTop - window.outerHeight/2,scroll,section[i].offsetTop - window.outerHeight/2 + section[i].offsetHeight) //scroll = 스크롤 위치 값 //section[i].offsetTop = 해당 섹션의 가장 위의 위치 값 //window.outerHeight = 화면에 보이는 height 값 //section[i].offsetHeight = 해당 섹션의 height 값 break; }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
강사님 사진같은건 어떻게 구하시는 편이신가여?
강의에 활용되는 이미지들은 강사님이 직접 구하신건가여? 인터넷에 다른 이미지로 해보려니까 이미지에 배경이 입혀져있어서 좀 에러 사항이 생기네요.. 이런 경우 포토샵으로 배경삭제(누끼닦기?)를 해줘야하는건가여? 궁금합니다!
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이지 전환시 패럴랙스 기능 질문있습니다!
강사님이 강의 잘 보고 있습니다 !! 제가 그 씨디 관련 파트에서 응용해서 cd랑 커버가 밑에 next 버튼 클릭할 때 바뀌는데 바뀌면서 텍스트가 올라오고 버튼을 한 번 더 누르면 기존 텍스트는 없어지고 다른 텍스트가 올라오는 방식으로 구현을 해보려고 하는데 방법이 있을까요??
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
쌤.. hover시 css적용을 해주고싶은데 어떤 방법이있을까요?
greensock 홈페이지에서 번역기 돌려가며 찾아도보고 나름대로 구글검색도 해봤는데 잘 모르겠습니다. 현재 혼자 복습겸 이미지api를 이용해서 랜덤으로 이미지를 뿌려주고, 이미지에 마우스를 올릴시 css변경을 해주었습니다. section { position: relative; height: 100vh; width: 100vw; .image { position: absolute; cursor: pointer; width: 110px; height: 110px; border-radius: 50%; &:hover { opacity: 1; width: 300px; height: 300px; animation: up-down 2s infinite; transition: all 0.3s ease-in-out; } } } 근데 다른 css는 먹는데 opacity값은 f12에서 확인해보면 적용이 안됩니다. 그러면 TweenMax에서 어떤식으로 해줘야할지 감이 잘 안잡힙니다 ㅠㅠ 도움 좀 부탁드려도될까요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
여기에 나오는 강의들 리액트로 작성하기 쉬운편인가요?
안녕하세요! 리액트는 직접적으로 dom을 건드리면 안된다고 알고 있습니다. 그래서 인프런에있는 인터랙티브 강의들을 보고 리액트에서 동작 해주게끔 하고싶은데, 제가 리액트에대한 지식이 부족해서인지 조금 어려움이 있는데요.. useRef()를 사용해주는 방법이 있지만, 너무 사용이 잦은것 같아 고민이고, 또 다른 강사님들은 어떤식으로 구현을 하는지 들여다보고싶습니다. 나중에 리액트로 인터랙티브하게 만드는 강의를 내주실 계획이 있으신지 혹은 리액트로 인터랙티브하게 만들어보신 코드가 있다면 한펀 살펴보고싶습니다!
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
TweenMax 질문있습니다.
js파일안의 TweenMax.from 이런식으로 이벤트설정을 해주셨는데요 TweenMax를 어느 변수로 설정(?) 한건지 안적어놨는데도 가져올수있는게 html파일의 cdn 덕분인건가요? TweenMax.to(window, 2, { scrollTo: { y: '.bottom', //autoKill: true }, delay: 1.7, ease: Power4.easeInOut, }); 위의 코드에서 TweenMax 부분을 임의로 다른 식으로 고쳐서 사용해도되나요 예를들면 아래 처럼요 Tween.to(window, 2, { scrollTo: { y: '.bottom', //autoKill: true }, delay: 1.7, ease: Power4.easeInOut, });
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
선생님 간단한 질문이있습니다.
section { position: relative; width: 100vw; &.top { min-height: 160vh; h1.title { position: relative; color: #fff; text-align: center; padding-top: 35vh; font-size: 40px; font-weight: 100; } } 위의 코드에서 섹션과 h1에 포지션 relative를 주신이유는 z-index와 연관이 있는거 맞나요? 포지션을 지우고 테스트하면 별 이미지가 요소를 가리는것같더라구요
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
질문 들고왔어요!
위의 코드에서 .innerWrap에서 z-index를 써준 이유가있을까요? z-index를 지우고 테스트해봐도 뭐가 바뀐것인지 잘 모르겠습니다 ㅠ또 만약 반응형으로 짜고싶을경우 .imageWrap에서 width값을 모바일, 테블릿, pc등등에 따라서 값을 다르게 줘야하는건가용? 선생님이라면 어떤식으로 적용하실건지 선생님 생각이 궁금합니다!
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
아 혹시.. 이 강의 중급 강의인가요?
안녕하세요. 다름아니라 페이징개념익히기 파트에서 스크롤부분을 들으면서 좀 어렵다..고 느껴져서요 ㅠㅠ 속도감있게 알려주시는건 좋은데 어느순간 띠용?! 이런 기분이에요 ㅋㅋㅋㅋ 우선 강의 듣기전에 코드 훑어보고 " ? " 를 찍게만드는 코드는 따로 검색 & 그 부분 집중해서 들으려고 하고있고, 혼자 처음부터 다시 만드는 식으로 학습하고있는데요 ( 이 부분은 거의 코드를 보며 따라 치는 수준임 ㅠㅠ) 괜찮은 학습 방식인가요? 근데 스크롤 부분은 수학공식이 들어가는건지.. 조금 머리가 아픕니다 !! ㅠㅠ
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
이 코드를 이렇게 바꿔도될까요?
var scroll = this.scrollY; 위의 코드를 let scroll = winodw.scrollY; 이렇게 바꿔줘도 문제없을까요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
헉 너무 어려운거같아요!
if (scroll > section[i].offsetTop - window.innerHeight / 1.5 && scroll < section[i].offsetTop - window.innerHeight / 1.5 + section[i].offsetHeight) { pageNum = i; console.log(section[i].offsetHeight) break; } if문 안에있는 조건들..수학문제인거죠? 공식같은걸까요?? 하.. 아무리 이해해보려고해도 .. 콘솔을 찍어가면서 해봐도 모르겟습니다 흑흑.. 모자란 제 머리가 이해할 수 있는 예시같은게 있을까요?.......
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
자바스크립트 const,var와 script 위치
저의 얕은 기억으로는 .. script위치는 body태그가 끝났을때(?) 적어주는게 가장 좋다고 알고있는데 맞을까요? 또 강의에선 var를 사용해주셧는데 const를 사용해도 별 탈 없더라구요 괜찮나요?
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
안녕하세요~ 레퍼런스 사이트의 코드 문의드립니다.
안녕하세요~ 올려주신 레퍼런스 사이트 코드를 살펴보던 중에 이해가 가지 않는 부분이 있어서 여쭤봅니다. function mainMotionFunc() { for (var t = 0; t < $(".card").length; t++) { var e = $(".card").eq(t); TweenMax.set(e, { rotation: randomReturn(-50, 50) }) } for (t = 0; t < $(".card").length; t++) { e = $(".card").eq(t);a TweenMax.from(e, .5 * Math.random() + .5, { y: 650, yPercent: 100, x: randomReturn(-250, 250), rotation: randomReturn(-250, 250), delay: .7 * Math.random() + .3, ease: Power2.easeOut }) } } 두번째 for 문 선언 시 사용된 .5 * Math.random() + .5 <- 이 부분이 이해가 가지 않아서요. 트윈맥스 공식사이트에서 검색하면 .from(e, {...}) 형식으로만 나와있어서 코드 해석이 막혔네요 ㅎㅎ. 이게 어떤걸 의미하는 건지 궁금합니다 : )
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
pointALL 부분 for문 질문
for( var i = 0; i < pointBtnAll.length; i++ ){ (function(idx) { pointBtnAll[idx].onclick = function() { // alert(idx); pageNum = idx; pageChangeFunc(); } })(i); <<이부분 여기 i가 무슨 의미인가요? }