월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 스와이프 구현 마지막 숙제
혹시 모바일 cd플레이어 관련해서 function touchFunc(e) { let type = null; let touch = null; switch (e.type) { case "touchstart": type = "mousedown"; touch = e.changedTouches[0]; start_X = touch.clientX; end_X = 0; break; case "touchend": type = "mouseup"; touch = e.changedTouches[0]; end_X = touch.clientX; let chkNum = start_X - end_X; let chkNumAbs = Math.abs(chkNum); if (chkNumAbs > 100) { console.log(chkNum); if (chkNum < 0) { if (pageNum > 0) { pageNum--; } else { pageNum = totalNum - 1; } } else { if (pageNum < totalNum - 1) { pageNum++; } else { pageNum = 0; } } pageChangeFunc(); } break; } }마지막으로 숙제해주신부분에서 pageNum이계속해서 -- 또는 ++ 이면 없는 인덱스까지 튀어나오기때문에 주석해주신 부분에서 pageNum의 컨디션을 넣어주어야 한다고 생각해서 작성했는데 혹시 맞는지 궁금합니다
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
레퍼런스 사이트
안녕하세요. 부분부분 듣다보니, 혹시 말씀하셨을 수도 있겠는데.. 질문 남깁니다. 보여주신 레퍼런스 사이트들이 취합된 곳이나 링크를 공유해주실 수 있을까요? 재밌는 강의 감사합니다.
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
스크롤위치에 따른 페이지 변화에서
왜 scroll2를 넣으신건가요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요? body.style이렇게만 작성해도 되지 않나요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문
안녕하세요강사님이해가 되지 않아서 질문드립니다.저는 조건을 한글로 생각해서 저렇게 주석으로 정리를 해놨습니다.if문의 조건을 봤을땐 조건이 맞아서 console.log에 scroll 라는 변수도 정상적으로 찍힙니다.제가 궁금한것은 2개의 조건이 스크롤 할때마다 맞는데 어떻게 스크롤 값이 526 이 되거나 넘어가면 pageNum의 값이 증가하는걸까요?많이 헷갈려서 이부분만 여러번 보는듯합니다.아니면 저의 해석이 잘못된 걸까요?// 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가? // 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가? for(let i = 0; i < maxNum; i++){ // 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가? // 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가? if(scroll > sectionNum[i].offsetTop - window.innerHeight/3 && scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){ pageNum = i; console.log(scroll); if(scroll > sectionNum[i].offsetTop - window.innerHeight/3){ console.log('큼1') } if(scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){ console.log('큼2'); } // console.log(sectionNum[i].offsetTop); // 8 785 1562 2339 // console.log(window.innerHeight/3) // 258 // console.log(sectionNum[i].offsetHeight); // 777 // 8 - 258 = -250 // -236 + 734 = 527 // console.log(sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight); // 526 // console.log(scroll) // console.log(pageNum); // console.log(sectionNum[i].offsetTop - window.innerHeight/3) // -250 // 한번 돌았으면 break; } }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
페이징.페이지고정2 질문드립니다.
안녕하세요 선생님강의 리소스에는 li가 html에 작성되어있지만저는 자바스크립트를 이용하여 section 갯수에 맞춰서 li도그 갯수에 맞춰서 생성해주고 싶어서 반복문 코드를 짜봤습니다.ex) section 갯수가 8개면 li 갯수도 8개로 자동생성 생성은 되었습니다. 그러나 아직 li의 인덱스를 받아오는 코드를 작성하진 않았어요스크롤을 하였을 시 pageNum 의 i 값이 pageChangeFunc의 함수안에서 remove 혹은 add 가 작동되지 않습니다.(오류가 스크롤 했을 시 뜹니다.)<--- F12에서는 이렇게 뜹니다. --->Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at pageChangeFunc (4.html:120:33) at 4.html:114:17 저는 section 갯수에 맞춰서 li갯수를 생성하려고 appendChild를 사용하였습니다.저의 부족한 지식으로 유추해본 생각이지만 li를 생성하고 난 뒤여서 스크롤이벤트가 안먹혀서 그런건지...아니면 classList 가 작동이 안될까? 라는 생각이 드는데 잘 모르겠네요... 답을 원하지 않습니다만 힌트라도 주시면 감사하겠습니다.<--- 제가 작성한 코드는 이렇습니다. --->var section = document.getElementsByTagName('section'); var pointWrap = document.querySelector('.pointWrap'); var pointBtn = document.querySelectorAll('.pointWrap li'); var pageNum = 0; var totalNum = section.length; for(var s = 0; s < totalNum; s++){ var newli = document.createElement('li') pointWrap.appendChild(newli); } window.addEventListener('scroll', function(event){ var scroll = this.scrollY; for(var i = 0; i < totalNum; i++){ // if(scroll > section[i].offsetTop && // scroll < section[i].offsetTop + section[i].offsetHeight){ if(scroll > section[i].offsetTop - window.outerHeight/3 && scroll < section[i].offsetTop - window.outerHeight/3 + section[i].offsetHeight){ pageNum = i; break; } } pageChangeFunc() }); function pageChangeFunc(){ for(var z = 0; z < totalNum; z++){ section[z].classList.remove("active"); pointBtn[z].classList.remove("active"); } section[pageNum].classList.add("active"); pointBtn[pageNum].classList.add("active"); }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
scrollTo 완성본
scrollTo - 페이지 스크롤 부분완성본 자체가 작동이 안되네요크롬브라우저에서 상하 이동 자체가 안되네요 ..복사해서 붙여넣기 해도요왜그런건가요?다음 페이징 스크롤 이동.html 완성본도크롬 브라우저에서 작동 안합니다콘솔 이거맞죠?console.log(scrollTo());이렇게 하면 아래와같이 나옵니다 아래 저와 같은 분이 있어 https://codepen.io/yahao2512/pen/jOmKgGo\여기서 확인해보니 이동은 하나 크롬에서는 behavior: 'smooth', 이게 안되는것 같아요 ~~
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 3D 입체 카드 제작 아이폰에서 에러
안녕하세요.모바일 3D 입체 카드 제작 강의 최종 완성본 파일을 아이폰에서버튼을 클릭하고 확인했을 때 아래의 이미지처럼 에러가 발생을해서 아이폰에서는해당 화면을 확인할 수가 없습니다. 서버에 올려서도 확인 해봤는데 동일합니다.
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
css 질문 드립니다
.bottom 클래스 스타일에background: url(../image/bottom.png) center bottom/100% no-repeat;로 되어있는데 center bottom/100% 부분은 background-position 속성값일까요?bottom/100% 부분이 이해가 안되서 질문 남깁니다.
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
css 질문
<section class="album"> <div class="disk"> <div class="disk_inner"></div> </div> <a href="https://www.youtube.com/watch?v=nM0xDI5R50E" target="blank" class="coverImg"> <img src="./image/iu_0.jpg" alt=""> </a> </section>강사님 ! html 코드를 css에서 .contentWrap .album .coverImg img 이렇게.contentWrap의 자손 .album의 자손 .coverImg의 자손 img 으로 불러오는 것과.coverImg img로 불러오는것과 값이 같은데 저렇게 불러오는 이유가 따로 있나용?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
pointBtn.addEventListner("click")
선생님.. pointBtn을 가져오는 방법 다른 예시도 알려주실 수 있을까요..? 그리고 저부분은 함수로 안만든 이유가 따로 있을까요? ㅜㅜ pointBtn에는 addEventListner 함수가 인식이 안되는 것 같은데 맞나요??그리고 i와 인덱스 값은 같지 않나요? ㅜㅜ 왜 [idx]가 들어가는지 (i)는 아래 따로 들어가는지 아래 부분이 잘 이해가 가지 않습니당...저 함수 형태는 지역변수 형태같은데..맞나요..? ㅜㅜ제가 가진 기초지식이 부족해서 이해를 잘 못하는 것 같은데어떤 부분을 더 공부하면 좋을까요?(function(idx) { pointBtn[idx].onclick = function() { //alert(idx); pageNum = idx; ...})(i);
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
if문의 첫번째 조건 질문 있습니다~
강사님 작성해주신 if문의 첫번째 조건인 섹션의 시작높이 - 윈도우 창 높이의 1/3이 없어도 작동이 잘 되는데 넣어주신 이유가 혹시 따로 있을까요?? for (let i = 0; i < totalPage; i++) { if ( // scroll > section[i].offsetTop - window.outerHeight / 3 && scroll < section[i].offsetTop + section[i].offsetHeight - window.outerHeight / 3 ) { curPage = i; break; }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
offsetTop, offsetHeight
안녕하세요 강사님.. 강사님 수업 열심히 듣고 있는데요~~ 질문이 있습니다!if(scroll > section[i].offsetTop - window.innerHeight/3 )Y축 스크롤값이 섹션 i번째의 세로 높이 - 윈도우 창의 높이/3 보다 크고,&&( scroll < section[i].offsetTop - window.innerHeight/3 + section[i].offsetHeight Y축 스크롤값이 섹션 i번째의 세로 높이 - 윈도우 창의 높이/3 + 섹션 i번째의 길이보다 작을 때 실행인데섹션 세로 높이랑 길이랑 어떻게 다른건지 잘 이해가 안됩니다...!이부분 참 어렵네용,,, 🧐
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
기존의 축 회전값에 더해서 rotate
안녕하세요~ 혹시 기존의 회전값에서 초기화 시키지 않고한방향으로만 회전시켜주려면 어떻게 해야하나요..?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 드래그 강의 질문드립니다!
혹시 이걸 피씨에서도 드래그가 가능하게끔 할 수 있을까요??혹시 모바일 체크 조건에 피씨도 넣을 수 있을까요??
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
질문입니다.
버튼에 for문을 사용하여 index값을 도출한 부분에서 질문이 있습니다. for문안에 함수를 작성하여 i의 값을 idx라는 매개변수에 넣어 작업을 하셨는데요, i의 값을 그대로 사용하지 않고 변수에 담아 작업하신 이유가 있을까요? 실무에서는 그렇게 사용하는게 좋은지, 아니면 어떤상황에서 사용을 하는게 좋은지 궁금합니다. 제가 생각한 i의 값을 그대로 사용한다는건 바로 아래 작성했습니다. for(let i=0; i < btnItem.length; i++){ btnItem[i].onclick = function(){ console.log(this) } }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
GSAP(트윈맥스) 라이센스 관련 질문 드립니다.
현재 강의에서 사용중인 트윈맥스 CDN은 무료 버전이라고 하셨는데,그럼 웹 에이전시 실무에서 해당 라이브러리를 라이센스 구매없이 프로젝트에 사용해도 문제없을까요?또한 GSAP최신버전을 사용해도 저작권 문제없을까요?GSAP 라이센스 관련 문서에는 (https://greensock.com/standard-license/)"고객이 사이트/제품을 만들기 위해 일회성 비용을 지불하는 경우에는 완전히 문제가 없으며 "무료" 라이선스에 따라 자격이 부여 됩니다. " 라는 문구가 있어서 문제가 없을것 같습니다만..... 오랫동안 실무에서 사용해오신 선생님의 생각을 여쭙고 싶습니다.답변 주시면 감사하겠습니다!
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
wrap 안에 click 이벤트
안녕하세요, 현재 앨범을 클릭하면 유튜브 페이지로 넘어가게 되어있지만 저는 클릭했을 때 음원을 재생하고 싶습니다.그래서 click이벤트를 사용하여 이벤트를 실행하려 했지만, 전체 wrap에 touch이벤트가 걸려서 인지 안에 앨범을 클릭했을때 전혀 반응을 안합니다ㅜㅜ 혹시 전체적으로 감싸져 있는(wrap) 영역 안에 click를 걸게 하려면 어떻게 작성을 해야하나요..?ㅠㅠtouch이벤트는 작성해주신 대로 사용하였고, 제가 따로 작성한 click이벤트는 아래와 같이 작성하였습니다.모바일일때 click 이벤트의 console이 안찍힙니다. 아니면 모바일에서는 무조건 touch이벤트만 사용해야하나요?for(let i = 0; i<totalNum; i++){ if(mobileChk()){ album[i].addEventListener("click", function(){ console.log(this); }) }else{ album[i].addEventListener("mouseover", function(){ var itmes = this.querySelector('audio').play(); if (itmes) { itmes.catch(function(error) { console.error(error) }); } this.addEventListener("mouseout", function(){ this.querySelector('audio').currentTime = 0; // 재생 위치를 처음으로 설정 this.querySelector('audio').pause();//일시정지 }) }) } }
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
greensock을 사용하려면
greenMax 플로그인을 사용할 때 유료인가요?어떻게 사용하나요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
TweenMax 효과 리셋
좋은 강의 감사드립니다. 혹시 해당 객체가 다시 화면에 보였을 때 tweenmax 효과를 다시 적용하게 할 수 있나요? 예를 들자면, 화면 첫 로딩시 글씨에 적용된 tweenmax효과를, 사용자가 화면 아래까지 본 뒤 "TOP" 버튼이나 스크롤을 통해 다시 위로 와서 "별이 쏟아지는 코딩일레븐" 글씨의 tweenmax 효과가 다시 보이고, 다시 화면을 아래로 스크롤 하면 card의 tweenmax효과가 또 나오는 식으로 가능한가요? 요약하면, tweenmax효과가 적용된 것을 리셋시켜 다시 효과가 적용되도록 할 수 있나요? 감사합니다~!