20%
44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 완전 초보 질문 하나 드립니다! ㅜㅜ 도와주세요!
(function(){ const parents = document.querySelector('.stage'); function clickEvent(e) { const tar = e.target; const tar2 = tar.parentNode.classList.contains('door-opened'); if(tar2){ // tar2.parentNode.classList.remove('door-opened'); console.log(tar2.target); } if(tar.classList.contains('door-body')){ tar.parentNode.classList.add('door-opened'); } }; parents.addEventListener('click', clickEvent); })(); 이렇게 했을때 마지막 if문은 실행이 되는데요(문 열리는것) 위에 if문은 실행이 안되고 tar2 값을 찾을 수 없다고 나옵니다 ㅠㅠ 문 열리는 if문이 실행되면서 door-opened 클래스가 붙으면 다시 위로 올라가서 위에 if문 실행하면서 tar2값을 찾을 수 있는거 아닌가요? 이해한 줄 알았는데.. 혼자 풀어볼려다 갑자기 머리가 다시 뒤죽박죽이 되버려서요ㅠㅠ 번거로우시겠지만 여쭤볼 곳이 딱히 없어서 죄송함 무릅쓰고 질문올립니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
전진! 3D 스크롤 강의 결과물에서 렉이 너무 많이 걸립니다.
스크롤을 움직이면 캐릭터가 전진하고 벽이 움직이는 과정에서 렉이 너무 많이 걸립니다. 스크린 크기를 작게한 후 캐릭터랑 벽을 움직여보면 렉이 걸리지 않는데, 풀 스크린 모드에서 캐릭터랑 벽을 움직이면 렉이 너무 많이 걸려서 움직이는 동작을 거의 볼 수 없습니다. 현재 구현하는 기능들이 용량을 너무 많이 차지해서 나오는 문제일까요? 개선 방법을 알고 싶습니다. Chrome 99 on macOS (Monterey) 으로 브라우저 모드를 사용하고 있습니다. 브라우저가 오래된 버전이라 발생하는 문제는 아닌것 같습니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
canvas에서 스크롤 값을 이용하려면 어떻게 해야하나요?
만약 canvas에서 스크롤 값에 따라 무언가를 움직이거나 나타나게 하려면 어떻게 해야하나요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
이벤트 위임 보강 영상 파일
delegation.html 이파일로 해당 영상을 진행하신거같은데 강의자료에는 따로 없네요 ㅜㅜ 혹시 올려주실수있으신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
함수 내부에서 this가 자동생성
비주얼스튜디어코드에서 자동완성으로 함수 내부에서 this가 생성됩니다. 왜 이렇게 되는지 궁금합니다.그리고 this가 안생기면 코드가 에러가 생기는지도 궁금합니다. // (function () { // const houserElem = document.querySelector(".house"); // let maxScrollValue = // this.document.body.offsetHeight - this.window.innerHeight; // window.addEventListener("scroll", function () { // // console.log(this.pageYOffset); // // console.log(this.document.body.offsetHeight); // // console.log(this.window.innerHeight); // }); // })(); const houserElem = document.querySelector(".house"); function handleScroll() { console.log(pageYOffset); console.log(document.body.offsetHeight); console.log(window.innerHeight); } window.addEventListener("scroll", handleScroll);
- 미해결인터랙티브 웹 개발 제대로 시작하기
이미지 구하기
안녕하세요 이미지는 어떻게 구하면 되나요?구글에서 스프라이트 png 검색하면 뭐가 많이 나오기는 하는데 가로로 이미지 네 개 정도에에이어지는 이미지가 같은 줄이 아니라 아랫줄로 넘어가서 이어지고 이러더라고요 ㅠㅠ 한줄하고 그 다음줄 이미지로 이어져서 애니메이션 만들려면 어떻게 해야 할까요? 이미지 예시도 알려주시면 감사합니다ㅜㅜ
- 미해결인터랙티브 웹 개발 제대로 시작하기
오늘부터 인터렉티브 공부 시작합니다
평소에도 인터랙티브 강의에 관심ㅇ 있었는데 마침 세일하길래 몽땅 사버렸습니다 오늘부터 천천히 공부를 시작해보겠습니다~~~
- 미해결인터랙티브 웹 개발 제대로 시작하기
li 들의 높이값을 어떻게 구할수있을까요??
ul 안에 있는 li 들의(세로로 쭉 나열되어있음) 각각의 높이가 window.innerHeight/10 보다 값이 작을때 이벤트를 일어나게하는걸 만들고 싶은데요 ! 잘 안되어서 질문을 드립니다.. // 하드 코딩으로는 어떻게든 되는데 아무래도 html에 li를 추가 할때마다 번거로움이 생겨서요ㅜㅜ 답변해주시면 감사하겠습니다 //1. li들의 배열을 뽑고 싶어서 사용한 방법let lists = document.getElementsByClassName("site_img_ul").getElementsByTagName("li"); //2. for문안에 사용하려고 작성한 변수...입니다 //의도는 li 각각의 높이값을 얻기 위함입니다 이렇게 하는게 맞을까요?? let img_lists_h = img_lists[i].getBoundingClientRect().top;
- 미해결인터랙티브 웹 개발 제대로 시작하기
perspective 눈의 위치
눈의 위치에 따라 극적으로 보인다고 하셨는데. 눈의 위치는 어디에 있는 건가요 ..?
- 미해결인터랙티브 웹 개발 제대로 시작하기
가로 세로 모두 있는 경우
안녕하세요. 세로만 있는 경우는 다른 질문에도 답변을 달아주셨듯이 y값 옮기면 될 것 같습니다. 그런데 가로 세로 모두 있는 경우 ex) 0번 1번 2번 3번 4번 5번 6번 7번 8번 의 경우 animation을 줄 때 2->3으로 이동할 때 이미지 자체가 이동해서 중간과정이 이상하던데 혹시 이러한 경우는 안되는 것일까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
애니메이션 스프라이트 이미지 질문입니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.인터랙티브 웹 개발 제대로 시작하기에서 CSS변환과 애니메이션 -> animation3 강의에 스프라이트 이미지가 한줄이 아닌 두줄로 되어있으면 어떻게 해야하나요? 반복해야하는 background-position 위치를 어떻게 잡아야할지 감이 잘 안잡힙니다..
- 미해결인터랙티브 웹 개발 제대로 시작하기
3d wall 이미지, 링크삽입
선생님의 강의에사 나온 3d wall에서 조금 더 추가하여서 벽에다가 동영상 재생 혹은 이미지를 여러가지 걸어 두고 싶은데 어떤식으로 접근을 해야하는지 조금 막막하네요 Wall left,right에 직접적으로 Back ground로 이미지를 넣으면 되긴하지만 벽 끝까지 정렬되지도 않아서 이걸 자바스크립으로 해야하나 하고 생각 중입니다 잘 부탁드립니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
paused를 했을 때
박스에 마우스를 올리면 멈춤과 동시에 크기가 커지게 하고 싶은데 마우스를 올리면 멈추기만하고 상자의 크기에 변화가 없어요ㅠㅠ 뭐가 걸리는게 있는 것 같은데 머릿속에서 감만 잡히고 구체적인 답을 못찾겠습니다ㅠㅠㅠ .box:hover { animation-play-state: paused; transform-origin: 30% 80%; transform: scale(1.3); } 어떻게하면 마우스를 박스위에 올렸을 때 멈추면서 크기가 커지게할 수 있고, 위의 코드에서 잘못된점이 무엇인지 알려주세요! ( transform-origin: 30% 80%;을 지웠을 때도 그대로에요)
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 질문이있어요!
3D wall 예제를 응용해서 이것저것 만들어보고있는데 Quick메뉴를 이용해서 버튼을 누르면 해당 벽으로 이동하는 코드를 만들고있어요. const webMove = document.querySelector('.qWeb'); webMove.addEventListener('click',function(){ window.scrollTo(0,50); }); 이런 식으로 만들었는데 문제는 저 스크롤이 px단위로 되니까... 창이 변하면 저걸 눌러도 저대로 이동되지 않을것같던데 ㅠㅠㅠ 벽면별로 이동을 할만한 방법이 있을까요?! 어헝 모르겠어요 ㅠㅠㅠㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
addEventListener 에대한질문입니다
const ilbuni = document.querySelectorAll('.ilbuni'); ilbuni.addEventListener 처음에 저렇게 변수를 만들었는데 일분이 뒤에는 addeventlistener 가 붙을수없는건가요??? 배열로된거라그런건가요? 그이후 이렇게만들기했는데 All로된건 붙힐수없나싶어서요 질문남겨요 (항상 재밌게 배우고있습니다 고맙습니다) const stage = document.querySelector('.stage'); stage.addEventListener('click', function (e) { let taget = e.target; stage.removeChild(taget); })
- 미해결인터랙티브 웹 개발 제대로 시작하기
제가 하면 이미지가 안나오네요 ㅠㅠ
이 png 파일이 나타나지 않아요. 제 hello.html 파일은 images 파일 안이 아닌 다른 파일 위치에 있구여..
- 미해결인터랙티브 웹 개발 제대로 시작하기
혹시 생활코딩님 앞으로 방향에 있어서 질문을 드립니다
이 강의 수강을 끝나고 css에 대해서 더 배우고 싶은데, 인프런의 css flex 강의를 듣는게 날까요 아니면, 그 강의가 coloso 강의로 듣는게 더 날까요 ?? canvas에 대해서도 알고싶어서 coloso 강의가 조금 더 끌리긴하는데 coloso강의에서도 css flex강의만큼 깊게 css다루는지 몰라서요 !
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문있습니다!
예제 처럼 .characters 에 setAttribute로 data-id 를 적용시켰듯이 만약 탭을 위한 버튼을 만든다고 가정 했을때 <div class="ilbuniBtn"> <ul class="ilbuniBox"> <li class="ilbuni a"> <p>일분이01</p> </li> <li class="ilbuni b"> <p>일분이02</p> </li> <li class="ilbuni c"> <p>일분이03</p> </li> <li class="ilbuni d"> <p>일분이04</p> </li> </ul> </div> 각각의 li의 클래스인 .ilbuni에 data-tab 이라는 명칭과 그 안에 데이터의 값을 증가시켜 넣고 싶은데 그럴 때는 어떻게 하면 되나요?!! 제가 생각했던 방법은 for문으로 돌려 클래스에 개수를 가져오고 그 가져온 개수에 데이터아이디와 값을 증가 시켜 넣으면 되지 않을까 생각했습니다. const ilbutab = document.querySelectorAll('.ilbuni '); for( i=0; i < ilbutabl.length; i++ ){ ilbutab.setAttribute("data-tab", btn[i]); 또는 ilbutab.setAttribute("data-tab", i); } 했더니 에러가 떠서 궁금해서 질문드립니다..!!
- 미해결인터랙티브 웹 개발 제대로 시작하기
제가 spaceship에 hover를 줬는데요
제가 따로 spaceship에 .spaceship:hover를 주고 transform에 scale, rotate, translate를 줘봤는데요. translate했을 때 x축만 적으면 적용이되는데 y축까지 적으면 움직이질 않더라고요. y축은 어떠한 이유 때문에 적용이 안되는건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
코딩 질문
작성해주신 코드를 직접 코딩해보며 예제를 익히고 있는데 코드는 똑같이 쓴 것 같은데 영상에서 설명해주신 노란박스가 안떠서 질문을 드립니다. 어떠한 이유에서 저는 노란박스가 화면에 안나오는 걸까요 ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- <div class="progress-bar-con"> <div class="progress-bar"></div> </div> <div class="select-character"> <button class="select-character-btn select-character-ilbuni" data-char="ilbuni" ></button> <button class="select-character-btn select-character-ragirl" data-char="ragirl"></button> </div> --> <div class="world"> <div class="stage"> <div class="house"> <section class="wall wall-left"></section> <section class="wall wall-left"></section> <section class="wall wall-front wall-front-a"> <div class="wall-content"> <h2 class="wall-title">1</h2> </div> </section> <section class="wall wall-front wall-front-b"> <div class="wall-content"> <h2 class="wall-title">2</h2> </div> </section> <section class="wall wall-front wall-front-c"> <div class="wall-content"> <h2 class="wall-title">3</h2> </div> </section> <section class="wall wall-front wall-front-d"> <div class="wall-content"> <h2 class="wall-title">4</h2> </div> </section> </div> <!--// house --> <!-- 캐릭터 놓이는 곳 --> </div> <!--// stage --> </div> <!--// world --> </body> </html> style.css body { font-family: 'Times New Roman', Times, serif, 나눔고딕; -webkit-overflow-scrolling: touch; color: #555; background: #fff000; } .world { position: fixed; /* 스크롤을 내려도 계속 같은 화면이 보이기 위해서*/ left: 0; top: 0; width: 100vw; height: 100vh; /* 창에 꽉 차도록*/ perspective: 1000px; } .stage { /* 하우스안에 벽이 있고 캐릭터들은 하우스 밖과 월드 사이에 있기 때문에 스테이지 생성 */ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d; /* 월드에서의 3d가 그 밑(자식)의 효과까지 적용되기 위에서 세팅함, ie11에서도 적용안함 webkit적용된 브라우저에서 잘 적용됨 ㅎ*/ } .house { left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d; } .wall { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(255, 255,255, 0.8); }