20%
44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
requestAnimationFrame 추가질문입니다.
안녕하세요. 강의 잘 듣고있습니다. 다름이 아니라 이 회차의 질문들 보다가 [오류가 난 후에 requsetAnimationFrame(self.run(self)); 가 아니라 requsetAnimationFrame(function() {self.run(self)}; 으로 function 안에 self.run(self)를 쓰셨는데 둘의 차이점이 궁금합니다.] 이 질문에 [requestAnimationFrame()의 괄호 안에는 함수 자체가 들어가야 합니다. 즉,function foo() { } 이런 함수가 있다고 가정하면, requestAnimationFrame( foo() ); 가 아니라,requestAnimationFrame( foo ); 가 되어야 하는 거죠~ foo()를 넣게되면, 함수 실행의 결과 값,결국 foo 함수의 리턴값을 requestAnimationFrame의 인자로 넣어 호출하는 것이 되는 것이죠~ self.run(self)도 run 메서드를 호출하는 것이기때문에requestAnimationFrame의 사용법에 맞지 않습니다^^함수 자체를 넣으면서도 self라는 인자를 매개변수에 넣어야 하기에 익명 함수를 활용한 것이고요.] 라고 답변해주신것을 보았는데, 그렇다면 run 메서드에 bind를 사용하여 requestAnimationFrame에서 this값이 변경되는 문제를 해결할 때는 왜 self.rafId = requestAnimationFrame(self.run.bind(self)); 가 되었는지 궁금합니다. 여기서도 함수 자체를 넣기 위해서는 requestAnimationFrame(function() {self.run.bind(self)}) 일거 같은데 아니라서요 self.run.bind(self)는 함수를 호출하여 리턴한 값이 아닌 함수 자체를 나타내는 건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
safari에서
질문입니다. animation-timing-function steps 가 safari 에서 작동이 제대로 되질 않아요 .. 작동하는 방법 없을까요..??
- 미해결인터랙티브 웹 개발 제대로 시작하기
perspective
강의 3개의 문 (2) 9:47 관련 (각각의 요소에 perspective(800px) 로 주는 것이 아닌) .stage의 속성으로 perspective: 800px;을 해줬을 때, 부모에게 perspective를 주었는데 카드 뒤집기와는 달리 그 아래 자식에게 preserved-3d 를 주지 않아도 3D가 적용이 되는 거죠? +) 강의 잘 듣고 있습니다!! 좋은 강의 만들어 주셔서 감사합니다!!~~ :) 얼른 웹사이트 하나 만들어보고 싶네요!
- 미해결인터랙티브 웹 개발 제대로 시작하기
resize에 관해서 질문입니다.
" resize : 창의 최대화 버튼 또는 창의 크기를 조절할때마다 실행 ex) resize안한때 : bodyHeight 1000 - window.innerHeight 100 = 900 창크기 줄여서 ..window.innerHeight 50이 되어도 100으로 계산되어서 문제 발생 " ...이렇게 정리했는데, 이게 맞나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
vw, vh의 크기에 대하여
안녕하세요!!이전부터 css를 다루면서 사소한 궁금증이 생겼는데요,100vw와 100vh라고 크기를 적어주면 브라우저 폭과 높이가 되어야 하는 것으로 알고 있습니다.그런데 실제로 적용해보면 스크롤바가 생기고 실제 브라우저보다 조금씩 크게 되더라고요.혹시 왜 이런 현상이 발생하는지 알려주실 수 있나요?강의 정말 재밌게 잘 듣고 있습니다!! 좋은 강의 만들어 주셔서 감사합니다! :)
- 미해결인터랙티브 웹 개발 제대로 시작하기
너비에 관한 질문입니다!
안녕하세요. 강의 잘 보고 있습니다!! 다름이 아니라 화면 크기를 모바일 기기 크기만큼 줄였을 때 3번째 wall_content인 Hola까지만 보이는데 어떻게 모바일 기기인데도 끝까지 보이게하는지 궁금합니다 !
- 미해결인터랙티브 웹 개발 제대로 시작하기
일부니코딩 선생님 코드 순서 바꿔써도 되는 부분일까요?
위아래 바꿔써도 문제 없을까요? 그리고 인터랙션 디자인을 위해 제이쿼리가 아닌 자바로 하는 이유가 따로 있나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
스맛폰 터치와 마우스 클릭
강의 너무 재밌게 듣고 있습니다. 듣다가 문득 의문이 들어서요... 스맛폰 터치와 마우스 클릭은 같은 효과인가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
문-4 if문
안녕하세요 연관강의 문-4에서, 아래 와 같은 식을 배웠는데, 첫번째 if문 if(currentItem) 를 if(currentItem.classList.contains('door-opened')) 로 작성하면 왜 작동되지 않는지 알 수 있을까요..? 아래에서 currentItem에 .door-opened가 추가된 targetElem.parentNode 가 대입이 됐다면, 다시 돌아오는 currentItem은 .door-opened를 가지고 있을테니까, if(currentItem.classList.contains('door-opened'))이게 적용이 될 수 있다고 이해를 했는데, 적용이 안돼서 그 이유가 궁금합니다. (function(){ const stageElem = document.querySelector('.stage'); let currentItem; function doorHandler (e) { const targetElem = e.target; if(currentItem){ currentItem.classList.remove('door-opened'); } if(targetElem.classList.contains('door-body')){ targetElem.parentNode.classList.add('door-opened') currentItem = targetElem.parentNode; } } stageElem.addEventListener('click', doorHandler); })();
- 미해결인터랙티브 웹 개발 제대로 시작하기
일분이 잔상
안녕하세요 선생님! 선생님께서 주신 이벤트 위임 보강 영상 소스코드를 아래에서 다운받기도 했었고, https://www.notion.so/4efb427f10a141088de833f6ec20ac1e 다른 질문글에서 답변주신대로 <script src="IlbuniPointer.js"></script> 를 html 에 추가하고 IlbuniPointer.js 파일명으로 아래 내용을 추가했습니다. background: url('./images/ilbuni2.png') ㅠㅠ 요부분을 제 사진경로에 맞게 수정도 했습니다. 그런데 왜 아예 클릭해도 반응이 없는건지 잘모르겠어요..ㅠㅠ 콘솔창이나 element 창 둘다 변화가 없어서 뭐가 잘못된건지 모르겠습니다. class IlbuniPointer { constructor() { let elem = document.createElement('div'); let timerId; elem.style.cssText = ` position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: url('./images/ilbuni2.png') no-repeat 0 0 / cover; transform: scale(0); `; document.body.appendChild(elem); window.addEventListener('click', e => { elem.style.animation = 'pointer-ani 0.5s linear'; elem.style.left = `${e.clientX}px`; elem.style.top = `${e.clientY}px`; timerId = setTimeout(() => { elem.style.animation = 'none'; clearTimeout(timerId); timerId = null; }, 500); }); } } 아래는 js 파일만 실행이 되는지 테스트하기 위해 따로 만들었습니다. <!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> </head> <body> <p>클릭테스트</p> <script src="./IlbuniPointer.js"></script> </body> </html> 파일명 : IlbuniPointer.js (맨앞 대문자i 뒤는 l 이 맞습니다.) 무엇이 잘못되어 작동을 안하는것인지 감을 못잡겠어요..ㅠ 알려주세요 선생님... class IlbuniPointer { constructor() { let elem = document.createElement('div'); let timerId; elem.style.cssText = ` position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: url('./images/ilbuni_2.png') no-repeat 0 0 / cover; transform: scale(0); `; document.body.appendChild(elem); window.addEventListener('click', e => { elem.style.animation = 'pointer-ani 0.5s linear'; elem.style.left = `${e.clientX}px`; elem.style.top = `${e.clientY}px`; timerId = setTimeout(() => { elem.style.animation = 'none'; clearTimeout(timerId); timerId = null; }, 500); }); } }
- 미해결인터랙티브 웹 개발 제대로 시작하기
이런 방법은 나쁜건가요
저는 이런 문제가 생길때는 이렇게 코드를 작성했었는데 혹시 나쁜 방식인지 여쭤보고 싶습니다. <!DOCTYPE html> <html lang="en"> <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> <link rel="stylesheet" href="css/reset.css"> <style media="screen"> input[name*="door-trigger"] { display: none; } .stage { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: #333; } .door { position: relative; width: 100px; height: 150px; perspective: 800px; } .door-back { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black; } .ilbuni { position: absolute; bottom: 0; width: 100px; height: 100px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; transform: translate3d(100%, 0, 0); transition: 0.5s 0.5s; } .door:nth-Child(1) .ilbuni { background-image: url('images/ilbuni_0.png'); } .door:nth-Child(2) .ilbuni { background-image: url('images/ilbuni_1.png'); } .door:nth-Child(3) .ilbuni { background-image: url('images/ilbuni_2.png'); } .door-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.5s; transform-origin: 0%; } .door:nth-Child(1) .door-body { background: rgba(255, 0, 0, 0.7); } .door:nth-Child(2) .door-body { background: rgba(0, 255, 0, 0.7); } .door:nth-Child(3) .door-body { background: rgba(0, 0, 255, 0.7); } #door-trigger01:checked ~ .stage .door:nth-child(1) .ilbuni { transform: translate3d(0, 0, 0); } #door-trigger01:checked ~ .stage .door:nth-child(1) .door-body { transform: rotateY(-120deg); } #door-trigger02:checked ~ .stage .door:nth-child(2) .ilbuni { transform: translate3d(0, 0, 0); } #door-trigger02:checked ~ .stage .door:nth-child(2) .door-body { transform: rotateY(-120deg); } #door-trigger03:checked ~ .stage .door:nth-child(3) .ilbuni { transform: translate3d(0, 0, 0); } #door-trigger03:checked ~ .stage .door:nth-child(3) .door-body { transform: rotateY(-120deg); } </style> </head> <body> <input type="radio" name="door-trigger" id="door-trigger01"> <input type="radio" name="door-trigger" id="door-trigger02" checked> <input type="radio" name="door-trigger" id="door-trigger03"> <div class="stage"> <label for="door-trigger01" class="door"> <div class="door-back"> <div class="ilbuni"></div> </div> <div class="door-body"></div> </label> <label for="door-trigger02" class="door"> <div class="door-back"> <div class="ilbuni"></div> </div> <div class="door-body"></div> </label> <label for="door-trigger03" class="door"> <div class="door-back"> <div class="ilbuni"></div> </div> <div class="door-body"></div> </label> </div> </body> </html>
- 미해결인터랙티브 웹 개발 제대로 시작하기
animation step 이 먹히지 않아요..
안녕하세요 애니메이션 스탭이 먹히질 않는데 아무리 찾아봐도 이유를 모르겠어요.. 계속 슬라이드처럼 스프라이트 이미지가 슝슝넘어갑니다. 뭐가 잘못된걸까요... 연관강의는 6강 animation3입니다. <!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> <style> .spaceship { width: 150px; height: 150px; background: url('sprite_spaceship.png')no-repeat 0 0 / auto 150px; animation: ani 1s steps(17) infinite; /* animation: spaceship-ani 0.5s infinite steps(17); */ } @keyframes ani { 0% { background-position: 0 0; } 100% { background-position: -2250px 0; } } </style> </head> <body> <div class="spaceship"></div> </body> <script> </script> </html>
- 미해결인터랙티브 웹 개발 제대로 시작하기
flex를 쓰는 이유
안녕하세요, display: flex를 쓰는 이유나 예시를 알 수 있을까요? 예를 들어 3단 상품 진열을 위해 저는 계쏙 float: left 이렇게 썼는데 flex로 하고 space-between으로 맞춘다거나 그렇게도 사용할 수 있는건가요? 감사합니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
e.keyCode 질문
vscode에서 사용은되지만 줄그어지길래 보니까 duplicated 되었다는데. 최근에는 다른방식으로 사용하나요?? 비슷한 속성값인데 문자열로 출력되는 key 속성이 있던데 이걸많이사용하는지..
- 미해결인터랙티브 웹 개발 제대로 시작하기
헤드 애니메이션이 목이 붕떠버리는 현상.
뭐 뺴먹은거 없는거같은데 캐릭터 방향을 right나 left으로 돌려봤을때 head의 애니메이션이. 이미지처럼 목이 분리되는데.. 혹시 제가 빼먹은게 있을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
옆에 스크롤 바가 안보여서 색상 바꿀 수 있나요?
스크롤바가 너무 연하게 보여서 색상을 변경하고 싶은데 방법이 어떻게 될까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
showValue() 사용
왜 window 이벤트리스너에 showValue()함수를 넣을 때 window.addEventListener('scroll', showValue())로 하면 실행되지않고 showValue()를 함수로 한번 더 감싸 window.addEventListener('scroll', function(){showValue()}) 이렇게 해야 실행이 되는지 궁금합니다! 그리고 항상 강의 잘보고있습니다 ㅎㅎ
- 미해결인터랙티브 웹 개발 제대로 시작하기
스크롤 값?
강의에서 알려주신대로 document.body.offsetHeight 값이 전체 스크롤 되야하지만 스크롤 높이 값을 빼주어야지 실질적인 스크롤 가동범위 값이 나오는것 까지는 이해했는데요.. 실제 나오는 화면 높이를 제외하고 나머지 빈공간 높이를 z축으로 스크롤해서 앞뒤로 하겠다는 것도 이해가 안가고, 나머지 스크롤 높이가 왜 window.innerHeight값(창 높이)이 라는게 이해가 안가네요..
- 미해결인터랙티브 웹 개발 제대로 시작하기
vw 와 % 중 유동적인 반응형에 적합한 건 무엇일까요?
삭제된 글입니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
vh,vw 와 %의 차이가 궁금합니다
80vw 80% 가 다른게 뭔가요?