55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
일분이 잔상
안녕하세요~ 강의 잘 듣고 있습니다! 이번 강의에서 클릭했을 때 일분이 잔상이 나오는 것은 어떻게 하는 건지 궁금합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
브라우저마다 다른 css, html파일을 제공해야하나요?
보통은 어떤 식으로 구현하는지 궁금합니다. 지원해야할 브라우저들은 브라우저별로 따로 파일을 제공해서 서비스하나요? 지원하지 않는 브라우저들은 alert으로 처리하는 건가요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
창사이즈..?
2:44에서 실제로 스크롤되는 부분이 빨간영역이라는말은 알겠는데 그게 body.offsetHeight - innerHeight를 한게 현재창 사이즈라는게 이해가 안갑니당... ㅠ__ㅠ흑흑
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문입니다 : )
prototype 에 객체를 새로 할당하는 이유를 알 수 있을까요? 제 생각으로는 prototype에 init() 이라는 메소드만 넣어서 구동해도 잘될것같아서요. function Card(number, color) { this.number = number; this.color = color; this.init(); } Card.prototype.init = function () { var ele = document.createElement('div'); ele.style.color = this.color; ele.innerHTML = this.number; ele.classList.add('card') document.body.appendChild(ele); }
- 미해결인터랙티브 웹 개발 제대로 시작하기
클릭 하면 원하는 것 말고 순서대로 사라져요
코드는 이렇게 됐는데 클릭하면 그냥 .stage 안에 쓴 순서로 없어져요. 그렇게 말고 원하는 대로 없어지는 방법이 뭐예요? <script> (function(){ const ilbuniGroup = document.querySelectorAll('.ilbuni'); const stage = document.querySelector('.stage'); function clickHandler(){ this.parentNode.removeChild(this) }; for (let i=0; i < ilbuniGroup.length; i++){ ilbuniGroup[i].addEventListener('click', clickHandler); } })(); </script>
- 미해결인터랙티브 웹 개발 제대로 시작하기
이벤트위임 보강영상 질문
이벤트위임 보강영상에서 질문 있습니다! const menu = document.querySelector(".menu"); function clickHandler(e) { let elem = e.target; while (!elem.classList.contains("menu-btn")) { elem = elem.parentNode; if (elem.nodeName === "body") { elem = null; return; } } console.log(elem.dataset.value); } menu.addEventListener("click", clickHandler); 여기서 제가 대문자BODY말고 소문자body로 작성을 해서 회색부분을 클릭해봤는데요 Uncaught TypeError: Cannot read property 'contains' of undefined at HTMLDivElement.clickHandler 이렇게 에러가 뜨더라구요,,, 그래서 대문자로 바꾸니까 회색부분이 클릭이 안되게 되던데 왜 소문자로하면 안되는건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
ilbuni에 가상선택자로 코딩시 제대로 안되는 이유가 궁금합니다.
저도 ilbuni에 nth-child()로 하니 원하는 이미지가 지워지지가 않고 이미지가 순서대로만 지워지고... 따로 클래스를 주었을때에만 원하는 이미지가 지워졌습니다. 근데 왜 그런건지 궁금합니다. (코딩할때 가상선택자를 많이 쓰는 편이라.. 왜 안되는지 알고 싶습니다. ^^a)
- 미해결인터랙티브 웹 개발 제대로 시작하기
시작할때 문이열리게했을때
시작할때 문이열리게했을때 클릭했을때처럼 부드럽게 쫙 열리면서 시작하게 할려면 어떻게 하면 될까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
브라우져 구분중에
(function () { const useragent = window.navigator.userAgent.toLowerCase(); if (useragent.indexOf('chrome') < 0 && useragent.indexOf('safari') < 0) { document.body.style.cssText = 'height: auto'; document.body.innerHTML = '<p style="padding: 20px; line-height: 1.6">본 예제는 Full CSS 3D가 사용된 페이지로, webkit 기반 브라우저(크롬, 사파리 등)에서 확인하며 학습하시는게 좋습니다.<br>CSS 3D 부분 외에는 브라우저 상관없이 인터랙티브 웹 페이지 개발을 위해 필수적이고 유용한 내용들을 다루고 있으니 꼭 처음부터 끝까지 공부해 보세요! :)</p>'; } })(); 이있는데요.. 엣지는 접속이되고 오류가 나던데.. 먹을 방법이 잇을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
에니메이션 효과 질문
안녕하세요. 혼자서 에니메이션 구현하다가 모르는 부분이 있어서 질문을 드리게 되었습니다. 의도사항 : 0.2초 동안 위에서 아래로 떨어지는 에니메이션 진행 후, 3초 기다렸다가 다시 0.2초 동안 올라가는 에니메이션 결과 : 0.2초 3초 동안 설정한 내용이 적용되지 않고 에니메이션이 동작 어떻게 하면 특정 구간에서 3초 동안 기다리게 할 수 있을까요??ㅠㅠㅠㅠ const NameAni = keyframes` 0% { transform:translateY(-50px); opacity:0.2; } 50% { transform:translateY(0); opacity:1; animation-duration:2s; } 100% { transform:translateY(-50px); opacity:0.2; }`; const Layout = styled.div` h3 { animation: ${NameAni} 3s 0.4s linear forwards; } `;
- 미해결인터랙티브 웹 개발 제대로 시작하기
이벤트 위임 보강 영상 파일
안녕하세요! 강의 너무 잘 보고 있습니다! 다른게 아니고 이벤트 위임 보강 영상을 따라하면서 같이 하고 싶은데 파일이 있을까요? 이벤트 위임 파일 목록에는 보강 영상 파일이 없는거 같아서,, 혹시 제가 못찾은 거면 귀찮게 해드려서 죄송합니다..ㅜㅜ
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문있습니다 !
1.선생님의 예시에서는 class를 직접 삭제해주거나 제거해주는 방식으로 풀어나가셨는데 저는 직접 style코드를 주거나 뺏거나 하는 방식으로 풀어나갔거든요 혹시 이둘의 성능차이가 많이 클까요 ? 2.선생님의 해주신 방식으로하면 각 문을 광클할시 CSS가 삐죽거리면서 튀어나오는데 style을 직접 줬다 빼는 방식으로 할경우는 CSS가 삐죽 나오지않는데 혹시 어떤 차이점이 있는건지 알 수 있을까요 ?
- 미해결인터랙티브 웹 개발 제대로 시작하기
Character
캐릭터 생성자에서 run 함수에서도 사용하는 speed함수나 rafId같은 함수는 character 전역 변수로 선언하는게 이해가 되는데 lastScrollTop이나 scrollState같은 변수는 init 메서드 안에 있어도 될거 같은데 const self 외에 다른 변수들은 왜 선언하지 않고 character 전역변수로 선언하신건지 궁금합니다. 그리고 init 메서드 안에서 run메서드를 생성하고 이벤트 함수 안에서 requestAnimationFrame(run)을 하면 init 함수는 처음에 한 번만 사용하고 또 부르는건 init메서드 안의 run 함수니까 연산낭비가 없을거 같은데 run 함수를 따로 빼신 이유도 궁금합니다. 다른 분 질문에 답변 다신 걸 보니 이렇게 하면 초당 대략 60번씩 초기화가 되신다고 하신거 같아 이해가 잘 안됩니다 ㅠㅠ init 메서드 안의 run 함수를 만들어 사용하면 init 메서드는 한 번만 실행되는게 아닌가요..?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
일분이
일분이 머리 몸통 팔 다리 png파일 받을수 있을까요? 캐릭터 따라 해보고 싶은데 포토샵을 쓸 줄 몰라서 캐릭터를 만들수가 없어요..
- 해결됨인터랙티브 웹 개발 제대로 시작하기
이벤트 위임
body에 바로 이벤트 위임을 하면 전체 다 쓸 수 있는데 그렇게 안하는 이유가 궁금합니다. .stage { width: 100vw; height: 100vh; background-color: #333; } 이랑 body { background-color: #333; } 같아 보이는데 웹 화면 전체를 다 쓰더라도 body에 css를 적용하지 않고 div로 한 번 감싸고 쓰는게 규칙인가요?? 너무 기초적인 질문 같아 죄송합니다..ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
스크롤 한번에 120px
스크롤 한번에 120px 정도 내려가는거 같은데요. 화면높이가 낮을때는 휠 횟수가 줄어드는데.. 스크롤 한번에 휠내려가는 크기는 20px이나 50px이나 이런식으로 제가 원하는 크기만큼 바꿀수잇을까요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
transform-style: preserve-3d
영상에서는 .world에 perspective를 설정하고 .card에 transform-style: preserve-3d를 설정하시면서 .world에 perspective설정하면 .card-side까지 안닿아서(?) 중간단계인 .card에 transform-style를 설정 해준다고 하셨는데 그럼 .card에 transform: perspective()로 설정해주면 fransform-style: preserve-3d 없이 되어야 한다고 생각했는데 해보니까 fransform-style: preserve-3d 없인 안되더라구요. perspective는 원근감을 넣어주는 효과인데 fransform-style: preserve-3d의 정확한 역할은 뭔지 잘 모르겠습니다 ㅠ 그리고 .world에 perspective를 설정 하면 가운데를 기준으로 보는거니까 돌아가는 각도가 조금씩 달랐는데 원하는 각도대로 돌릴려면 .card에 각각 transform: perspective()를 해줘야 하는데 각각 다르게 돌아가는 .world에 perspective를 쓰는 경우는 어떤 경우가 있는지 궁금해요.. 참고 사이트나 예시 같은거 알려주시면 감사하겠습니다!!
- 미해결인터랙티브 웹 개발 제대로 시작하기
그러면 e.currentTarget / This
그러면 e.currentTarget / This 의 차이는 무엇인가요? 같다고 보면 되는건가용??
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님처럼 style 시트 부분 폰트를 변경하고 싶습니다.
지금 다 회색으로 떠서 너무 가독성이 안 좋은데 선생님처럼 바꾸는 방법을 알고 싶습니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
3D스크롤 23강의에서, run 메서드에 대해서 궁금합니다
3D스크롤예제 23강의에서, requestAnimationFrame을 사용하기위해, init 메서드 형제 위치에 run 메서드를 추가해주셨는데요, init: function () { ~~~ }, run: function () { ~~~ } }; 왜 init메서드안에 run메서드 내용을 포함 하지 않으신걸까용ㅠㅠ? 특별한 이유가 있는건지 궁금합니다! (자바스크립트 할때에, 사람들이 대부분 쓰는 패턴이라서 인건지.. 아니면 단순히 리퀘~프레임을 쓰기위해, 복잡하지 않게 하려는 용도로 따로 빼신건지 궁금합니다ㅠㅠ 아니면... 자바스크립트 기초이론중에 기초로 알고있어야 했던 내용이였던건지...ㅠㅠㅠㅠㅠㅠ)