55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
run과 관련되어 추가 질문있습니다.
해당 강의 다른 질문자 님께서 아래와 같이 질문주셨는데요. ------------------- 3D스크롤예제 23강의에서, requestAnimationFrame을 사용하기위해, init 메서드 형제 위치에 run 메서드를 추가해주셨는데요, init: function () { ~~~ }, run: function () { ~~~ } }; 왜 init메서드안에 run메서드 내용을 포함 하지 않으신걸까용ㅠㅠ? 특별한 이유가 있는건지 궁금합니다! ---------------- 답변으로 선생님께서 ------------------- init은 초기화할 때 한번만 실행하는 용도의 함수이고, run은 requestAnimationFrame으로 계~~속 실행해주어야 하는 함수이기 때문이에요. init으로 다 합쳐버리면, 초당 거의 60번씩 초기화까지 계속 반복하기 때문에, 엄청난 연산 낭비가 일어나겠지요~^^ ------------------------------------- 위와 같이 답변해주셨는데요. 여기서 init은 초기화할 때 한번만 실행하는 용도라는게 인스턴스를 만들때 init에 들어있는 함수들을 인스턴스에 초기 설정으로 넣어준다는 뜻인가요? 그렇다면 run 메서드도 인스턴스에 들어가는 것이라고 생각해서 init에 포함되도 된다고 생각하는데 아닌가요? 초기화의 정확한 뜻이 뭔지 궁금합니다.... init에 들어있는 함수도 계속 사용해야하는 함수 아닌가요 ㅠㅠ? 아니면 그저 한번 이벤트가 발생할때 한번만 실행되는 이벤트(예를 들어 마우스 클릭해주면 좌로 한칸 이동)과 같은 함수는 init에 넣고, 이벤트가 한번 발생할때 계속 반복적으로 실행되는 메서드는 init과 따로 구분해서 넣는게 연산에 이롭다는 말씀일까요? 영상 여러번 봐서 추측이 난무합니다 ㅠㅠ.... 답변부탁드릴게요
- 미해결인터랙티브 웹 개발 제대로 시작하기
invaild property value 오류
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Interactive Web</title> <style> body{ background: #222; } @keyframes spaceship-ani{ to { background-position: -2550px 0; } } .spaceship { width: 150px; height: 150px; background: url('images/sprite_spaceship.png') no-repeat 0 0 / cover; animation: spaceship-ani 1s infinte steps(17); } </style> </head> <body> <div class="spaceship"></div> </body> </html> 이 코드로 실행했을 때, 애니메이션이 돌아가지 않고 이렇게 뜹니다. 무슨 오류인 것인가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
step
그림이 왼쪽방향으로 이동하는데 몇 px을 이동할 건지 없고 steps(17) 이것만 있는데 어떻게 이미지가 이동을 하는 건지 모르겠어요ㅜㅜ
- 미해결인터랙티브 웹 개발 제대로 시작하기
렌더링이 이상하게 됩니다...
안녕하세요, 강의 잘 따라서 진행중입니다만 알 수 없는 오류가 있어서 질문 드립니다. 3개의 문 사이에서 마우스를 굉장히 빠르게 이동하면 위 사진과 같이 문이 브라우저 화면 전체로 늘어나면서(?) 열립니다. 강의에서 작성하신 코드와 전체적으로 동일하지만, 사진파일 대신 텍스트 파일을 사용하고 있으며 해당 영역 CSS는 다음과 같습니다.. .content { position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; display: flex; align-items: center; text-align: center; font-family: 'Times New Roman', Times, serif; color: white; transform: translate3d(100%, 0, 0); transition: 0.5s 0.5s; }
- 해결됨인터랙티브 웹 개발 제대로 시작하기
안녕하세요 질문 있습니다
영상을 여러 번 돌려봤는데 너무 헷갈려서요 제가 제대로 이해한 게 맞는지 확인해주셨으면 합니다. 제가 정리한 내용은 다음과 같습니다. ㅡㅡ 현재 스크롤 상태를 나타내는 scrollState의 기본값은 false이다. 스크롤 이벤트가 실행되면 clearTimeout이 먼저 작동한다. clearTimeout은 setTimeout의 반환값을 매개변수로 하여 setTimeout을 취소시키는 함수이다. 지금은 setTimeout이 실행되지 않았으니 건너뛰고 다음 if문으로 가자. "!(self.scrollState=false)= true", 즉 if(true){} 이므로 if문이 실행된다. running 클래스가 붙어 이제 애니메이션이 작동된다. 다음으로 setTimeout 함수로 가보자. setTimeout은 항상 숫자를 리턴하기 때문에 scrollState는 값을 가지게 되어 true가 된다. setTimeout 안의 내용들은 0.5초 후에 실행되는데 실행되기도 전에 스크롤 이벤트 갱신과 함께 clearTimeout으로 인해 실행되지 못한다. 이제 if문으로 넘어가는데 scrollState가 true이므로 if(!true), 즉, if(false)가 되어 if 문이 실행되지 않는다. 그리고 setTimeout으로 넘어가면 마찬가지로 리턴값을 받아 여전히 true이고, settimeout은 실행되지 않는다. 이렇게 반복되다가 마지막 스크롤일 때 setTimeout이 드디어 실행된다. 왜냐하면 더 이상 스크롤 이벤트가 일어나지 않아 clearTimeout이 동작하지 않기 때문이다. 비로소 scrollstate는 false가 되고 running 클래스는 제거된다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문있습니다.
안녕하세요 1분코딩님 강의 너무 재밌게 잘 듣고 있습니다. 간단한 질문이 있습니다. 강의에서는 if문을 써서 ilbuni 클래스를 포함하는지 확인하고 child를 제거했는데 아래쪽과 같이 this.removeChild(e.target)으로 하면 문제가 발생하는건가요? 코드 바꿔서 테스트 해보니 원하는 대로 작동은 하는데 제가 고려하지 못하는 문제점이 있는가해서 여쭤봅니다..! 답변 기다리겠습니다 감사합니다~! if(e.target.classList.contains('ilbuni')){ stage.removeChild(e.target); } this.removeChild(e.target);
- 해결됨인터랙티브 웹 개발 제대로 시작하기
질문이 있습니다.
function Test() {} new Test(); let haha = new Test(); 이렇게 되어 있다고 했을 때 1, 생성자 함수 = Test() 2. new Test() 생성자를 호출한다 = 인스턴스 생성 3. haha 는 인스턴스 생성과 동시에 하나의 변수로 만듦 이라고 이해하면 되는 걸까요 ??
- 미해결인터랙티브 웹 개발 제대로 시작하기
카드 애니메이션 IE에서 실행되게 하는 법
안녕하세요. 카드 3D 애니메이션을 IE에서 실행되게 할 때 선생님께서 문서구조를 바꾸셨는데 그럼 하나의 html 파일에서 대응하게 하는 건 어려울까요? 강의를 듣다 궁금해서 질문 남깁니다. 크로스 브라우징 너무 어렵네요ㅜ
- 해결됨인터랙티브 웹 개발 제대로 시작하기
스크립트 관련 질문이 있습니다.
style 로 값을 준 후에 addEventListener('transitionend') 이벤트를 주려고 합니다. end가 붙어있으면 제거해주고 없으면 end 추가해주는 식으로 했는데.. 처음 클릭했을 때 end 클래스가 계속 보여졌다 사라졌다 합니다ㅠㅠㅠㅠ if 문 안에 return; 을 적용했는데도 동일한 현상이 보여집니다ㅠㅠ const ballElem = document.querySelector('.ball'); let defult = false; window.addEventListener('click', function(e) { ballElem.style.transform = 'translate(' + (e.clientX - 15) +'px, ' + (e.clientY - 15) + 'px)'; ballElem.addEventListener('transitionend', function(e) { if ( !defult ) { ballElem.classList.add('end'); defult = true; return; } else if ( defult) { ballElem.classList.remove('end'); defult = false; return; } }); });
- 해결됨인터랙티브 웹 개발 제대로 시작하기
스크립트로 style 값을 줄 때 질문입니다.
안녕하세요. 강의 듣는 중에 궁금한 점이 있어서 여쭤봅니다. transform 경우 벤더프리픽스를 해줘야 하는데, 스크립트로 적용할 때엔 벤더프리픽스 작업을 안해줘도 브라우저마다 적용이 되는 건가요?? transform 외에도 벤더프리픽스 해줘야하는 속성들이 있어서 이럴 때엔 스크립트로만 작성해줘도 브라우저별로 실행이 되는 지 궁금해서 여쭤봅니다..
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이 있습니다.
function doorHandler(e) { const targetElem = e.target; if ( !targetElem.classList.contains('stage') && currentItem ) { let tgid = parseInt(targetElem.parentNode.dataset.id); if ( tgid ) { inactivate(currentItem); } } if ( targetElem.classList.contains('door-body') ) { activate(targetElem.parentNode); } }; /* 문이 닫히지 않는 조건을 2개 적용했습니다. 1. stage 클릭했을 때 2. 열려있는 문을 클릭했을 때 1번의 경우, !targetElem.classList.contains('stage') 2번의 경우, let tgid = parseInt(targetElem.parentNode.dataset.id); if ( tgid ) { inactivate(currentItem); } 위 1,2번으로 조건을 적용하였는데 이렇게 적용하면 맞는 걸까요? 기능상으로는 제가 원하는 대로 작동은 합니다만 이 방법이 맞는 건지, 또는 좀 더 나은 방법이 있는 건지 궁금해서 여쭤봅니다. */
- 미해결인터랙티브 웹 개발 제대로 시작하기
기본서적질문입니다..!!
애플강의 듣고 너무너무 유익하고 흥미를 느껴 인터랙티브 웹 개발을 좀 더 기본기있고 탄탄하게 하기위하여 강의를 또 신청했씁니다!! 인터랙티브웹 공부를 좀더 심층적이게 하고 싶은데 이론적인 명령어나 기본 자바코드가 약해서 공부를 하고 싶습니다. 혹시 프론트앤드에 도움이 될만한 자바스크립트 기본 책을 소개해주실 수 있나요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
문이 이미지라면
안녕하세요. 강의 보면서 혼자 열심히 연구 중인데, 예쁘게 바꾸어 보는 중에 문에 이미지를 추가 했더니 실행이 되지 않습니다. door-body 태그안에 넣었는데, 백그라운드는 괜찮은데 img태그를 쓸 경우에는 어떻게 해야할까요? const doorImg = document.querySelector('.door-body img'); 이렇게 변수를 써서 if (targetElem.classList.contains('doorImg')) { 이렇게 해보아도 안되고 , 비슷한 사례가 있는지 구글에 검색을 해보면서 4시간을 고민해보았지만 초보로서 도무지 찾을 수가 없네요 ㅠ_ㅠ 답변 기다리겠습니다. <div class="door"> <div class="door-back"> <div class="ilbuni"></div> </div> <div class="door-body"><img src="images/ilbuni-door_0.png"></div> </div>
- 미해결인터랙티브 웹 개발 제대로 시작하기
강의시작합니다 ㅎㅎ
두근되네요ㅎㅎ 좋은 퀄리티의 영상 감사드리고 잘배우고 가겠습니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
three.js 와 css 3d의 용처에 관하여
최근 강사님 유튜브 영상, 그리고 이 강의를 시청하면서 3d 웹 사이트 제작에 대해 더욱 더 깊이 공부하고 싶은 마음이 생겼습니다. 제가 찾아보니 높은 수준의 3d 웹 사이트 제작을 하려면, 이 강의에서처럼 css 3d를 쓰거나, three.js라는 라이브러리를 쓰는 방법이 있다고 들었습니다. 이 점을 요약하여, 두 가지 질문에 대한 강사님의 고견을 여쭙고 싶습니다. 1. 실제 업계에서 3d 웹사이트를 제작할 때 css 3d와 three.js를 병용하는지. 2. 그게 아니라면 css 3d나 three.js 둘 중 하나를 선택하여 쓰는지, 더 나아가 둘 중 하나를 쓴다면 어느 것이 좀 더 많은 기능을 구현할 수 있으며, 실제 업계에서는 무엇을 더 많이 채택하는지 궁금합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
nth-child(n) 정확히 어느때에 쓰이는건가요??
강의마다 자주쓰이는데 왜 쓰이는건지 잘 모르겠네요... 그냥 css에 child말고 .ilbuni1 { code } .ilbuni2 { code } .ilbuni3 { code } 이런식으로 쓰면 코드중복이 심해져서 nth-child 를 사용하는건가요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
space-between,space-around이 작동하지 않습니다!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container{ display: flex; flex-direction: column; justify-content: space-between; height: 80vh; background: gray; } .items { padding: 2em; border: 3px solid black; background: white; } </style> </head> <body> <div class="container"> <div class="items">AAA</div> <div class="items">B</div> <div class="items">CCCCCCC</div> <div class="items">DDD</div> <div class="items">E</div> </div> </body> </html> 이상하게 between이랑 around만 작동되질않아서 질문드립니다. 혹시 emmet패키지말고도 설치야 정상작동되는건가요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
애니메이션 움직임 도중에 색깔 바꾸기
저번에 질문감사했습니다. 실은 이번에 중간에는 색갈을 바꾸기를 시도해봤는데 검정이 인식이전혀안되네요 어떻게해야하죠?
- 미해결인터랙티브 웹 개발 제대로 시작하기
-2550px에 대해 질문드립니다.
안녕하세요 background-position공부하던 중 여기서는 background-position 0 0;에서 background-position : -2550px 0으로 움직이게 하니 이미지가 왼쪽에서 오른쪽으로 움직였습니다. 하지만 제 생각은 background-position의 x축은 양수일때 왼쪽에서 오른쪽으로 음수일때 오른쪽에서 왼쪽으로 이동한다고 공부하였습니다. 그렇다면 0에서 -2550px로 이동하면 시작 이미지에서 왼쪽으로 하여야 하는것 아닌가요....? 오른쪽으로 이동하여서 질문드립니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
질문이요
오늘 처음 듣기시작한 학생입니다. 이상하게 style치고 tab키를 누르니 link랑 style이회색이 되어버립니다. 무시하고하면 아예인식이 안되는데 어떻게 해야하죠?