44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
질문있습니다~
두가지 질문이 있습니다~ 첫번째는 let curser_item; 을 밖으로 빼줄때 document.getElementsByClassName("curser_item")[0]; 도 같이 빼주지않는 이유가 있을까요?let curser_item = 0; 이라고 안넣는 이유는 무엇인가요?두번째 질문은 document.querySelector(selectors);를 쓰면 [0] 배열을 안써도 되나요?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
전역변수
안녕하세요! 강의듣다가 궁금한 점이 생겨서 질문드립니다! let i = 0 을 전역변수로 놓았을 때는 콘솔창에 1,2,3,4로 숫자가 계속 증가되서 나오는데 지역변수로 loop()함수 안에 두었을 땐 콘솔창에 1만 계속 찍히더라고요! 너무 기초적인 질문 같은데.. 왜 이렇게 되는건지 궁금해서 질문 남겨요 ㅠㅠ! let i = 0 function loop() { console.log(i += 1); window.requestAnimationFrame(loop); }
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
완성파일부탁드립니다
잘 모르겠어서 이해할 때 까지 완성본이랑 제거랑 비교해서 터득해보겠습니다
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
function loop()..
안녕하세요! function loop(){ window.requestAnimationFrame(loop); } 에서 window.requestAnimationFrame(); 안에 인자를 왜 부모 함수인 loop로 받는 것일까요? 부모함수인 loop 안에 존재하는 window.requestAnimationFrame()이 어떻게 loop함수를 다시 받을 수 있는지, 자바스크립트에선 이러한 문법을 뭐라고 부르는지 궁금합니다.
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
이벤트 함수에서 임의의 인자 e의 역할에 대해 궁금증이 생겨서 문의드립니다!
안녕하세요 선생님 :) 바쁘실텐데 죄송합니다. function mouseFunc(e){ console.log(e.clientX, e.clientY); } 이 부분에 인자 e의 역할은 이벤트를 감지하기 위한 인자인 것으로 이해하고 있습니다. 이 부분이 맞을까요?😊 실습하다보니, e를 넣으면 정상 작동이 되나. e를 인자로 넣지 않으면 오류가 뜨는 이유는 무엇인지 궁금해서.. 굳이 임의의 인자를 넣어 이벤트를 감지 시켜야 하는 자바스크립트의 생태계에 대해 좀 더 스터디 해보려고 하는데 뭐라고 검색해야 자료를 찾고 스터디 할 수 있을까요?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
마우스 이동중에 궁금한점이 있습니다.
mouse 움직임에 따라 같이 이동하는 강의에서 배경의 높이를 지정해주고 스크롤할 시, 스크롤과 함께 같이 따라오지않습니다. 스크롤을 하면서 마우스를 움직여도 같이 따라오게 하려면 어떻게해야 될까요? let btn_yes; let btn_no; let cursorItem; let circle; let x = 0, y = 0; let mx = 0, my = 0; window.onload = function () { btn_yes = document.querySelector("#yes"); btn_no = document.querySelector("#no"); cursorItem = document.querySelector(".cursorItem"); circle = cursorItem.querySelector(".circle"); //네 버튼 이벤트 btn_yes.addEventListener("mouseover", function (e) { circle.style.transform = "scale(.3)"; }) btn_yes.addEventListener("mouseout", function (e) { circle.style.transform = "scale(1)"; }) //아니오 버튼 이벤트 btn_no.addEventListener("mouseover", function (e) { circle.style.transform = "scale(.3)"; }) btn_no.addEventListener("mouseout", function (e) { circle.style.transform = "scale(1)"; }) window.addEventListener("mousemove", function (e) { x = e.clientX; y = e.clientY; cursorItem.style.transform = "translate(" + x + "px, " + y + "px )"; }); loop(); } function loop() { mx += (x - mx) * .09; my += (y - my) * .09; cursorItem.style.transform = "translate(" + mx + "px, " + my + "px )"; requestAnimationFrame(loop); }
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
마우스 이동값(X값, Y값)이 undefined로 표시되지 않습니다
window.addEventListener('mousemove', mouseFunc, false); function mouseFunc(e){ console.log(e.ClientX); } 강의 초반 코드를 작성하고 콘솔화면에 확인을 했는데 "undefined"가 출력이 됩니다. 뭔가 버전이 달라서 좌표값이 출력되지 않는 건가요?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
모바일에서 적용하기
강의 잘 들었습니다. 모바일에서 센서를 이용해서 움직이게 하는건 어떤방식으로 작성하면 되는지 팁좀 주시면.. 굽신굽신(__)
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
좀 이상한데 이유를 모르겠네요.
시간이 지나면서 빨간 박스가 커서에 따라붙는데 걸리는 시간이 점점 줄어들고 나중에는 완전히 딱 붙어 다니게 됩니다. 저만 이런건가요? 아니면 강사님 코드도 나중에 그렇게 되나요? 만약에 저만 그런거라면... 코드는 몇번을 재확인 해도 똑같이 친거 같은데 뭐가 문젤까요? let h1, cursorItem; let x = 0, y = 0; let mx = 0, my = 0; let speed = 0.001; window.onload = function() { h1 = document.querySelector('.test-h1'); cursorItem = document.querySelector('.cursor-item'); function mouseFunc(e) { x = e.clientX; y = e.clientY; loop(); } window.addEventListener('mousemove', mouseFunc, false); }; function loop() { mx += (x - mx) * speed; my += (y - my) * speed; h1.innerHTML = `x: ${x}, mx: ${mx}`; cursorItem.style.transform = `translate(${mx}px, ${my}px)`; window.requestAnimationFrame(loop); }
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
선생님 강의 정말 잘 듣고있습니다! 질문할것이 있어서 올립니다.
document.documentElement. 가 어떨때 사용되는것인지 그리고 어떻게 사용하는것인지 정확히 알고싶습니다.
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
앞 강의와 비교했을 때 어느 것이 더 나은가요??
커서를 따라 움직이는 사각형을 구현했잖아요?? 앞에서는 자바스크립트를 이용해서 자연스러운 움직임을 구현했고, 이번 강에서는 transition을 통해서 구현했는데요. 둘의 차이가 뭔가요?? 그리고 현업에서는 어떤 것이 더 낫나요? 그냥 보기에는 자바스크립트를 이용하면 움직이지 않을때도 뭔가가 계속 돌아가고 있어서 메모리 낭비가 아닌가 생각이 듭니다,,
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
<div id="parallax_6"></div>
예제에서 스크립트.js 파일을 통으로 지워도 <div id="parallax_6"></div> 태그에서 패럴렉스가 작동을 하는데,,, 이 기능이 어디에서 작동하는건가요? 강의내용이랑 패럴렉스가 작동하는게 다른거 같아요.. 그럼 답변 기다리겠습니다~~
- 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
Script.js 파일 원본 ㅠㅠ
삭제된 글입니다
- 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
script.js 완성본으로 부탁드립니다!!!
삭제된 글입니다
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
존경하는 코딩일레븐님 이런 것도 가능하신가요?
코딩일레븐님 강의 너무 감사합니다. 많은 것들을 배우고 성장하고 있습니다. 혹시 https://marmont.gucci.com/ 사이트와 같은 것도 구현 가능하신가요? The Dawn Wall 과 비슷하게 구현방식이라 생각이 됩니다.
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
문서 전체 길이
안녕하세요! 수업 잘 듣고 있습니다. 문서 전체 길이 구하실때 document.documentElement.scrollHegiht 대신 $('body').height() 으로 바디의 전체 길이를 구하는 식으로 사용해도 무방한거죠?
- 해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
requestAnimationFrame 과 관련해서 문의드립니다 :)
안녕하세요. 강의를 듣다가 궁금한 점이 생겨서요~ 해당 메서드는 cancelAnimationFrame() 을 호출하지 않는 이상 계속 돌아가는 걸로 알고 있습니다. 현업에서 저 메서드를 이용하여 작업을 할 때 리소스 측면에서는 이슈가 없을지 궁금합니다. (로드가 오래 걸린다거나 과부하가 걸릴만한 이슈가 있는지 등..?) 추가로 강의 잘 보고 있습니다 ^^ 다음 강의도 기대할게요. :)
- 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
마우스를 따라오지 않습니다..
삭제된 글입니다
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
script.js파일이 비어있어요.
예제 완성파일 부탁드립니다.
- 미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
섹션 6. 실전 페럴랙스, 레이어 7개 제어하기 완성된 js파일
강의를 보면서 따라했는데 JS부분 소스코드 오류가 계속 발생하고 있습니다. 업로드된 파일이 보니까 완성된 파일이 아닌 js 소스코드 부분이 비워져있더군요. 강의를 다 따라했음에도 불구하고 소스코드 전체를 설명해주시는게 아니라서 그런지 일부분 오류가 발생하는 부분을 찾기가 힘드네요. 섹션 6. 실전 페럴랙스, 레이어 7개 제어하기 해당 파트 완성된 JS파일 요청 드립니다.