25%
41,250원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
코드 작성 순서
안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;;
- 해결됨인터랙티브 웹 개발 제대로 시작하기
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
해당 강의를 진행하기 위해서스프라이트 이미지를 다운받으려고 하는데 제공되는 이미지가 없는 것 같아서요! 따로 다운 받을 수 있는 링크가 있나요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
섹션5에서 제공 중인 파일을 모두 받아 봤습니다.그런데 이벤트 위임 보강 영상에서 보이는 delegation.html이 안 보입니다..혹시 제가 못 찾은걸까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
섹션5 자바스크립트 이벤트 다루기 질문
안녕하세요 유준모 강사님.'움직이는 캐릭터 예제로 클릭 이벤트 익혀보기'에서 10분 30초쯤 "전역변수 회피를 위해서"라고 말하셨는데, 이 말이 어떤 건지 자세히 알 수 있을까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
강좌섹션, 전진! 3D 스크롤 11(5:49) 에서 mousePos 공식 어떻게 나오게 됐는지궁금해 문의 드립니다! mousePos.x = -1 + (e.clientX / window.innerWidth) * 2;mousePos.y = 1 - (e.clientY / window.innerHeight) * 2;이왕 코드 다 작성하고 이해하는 중에,해당 부분도 이해하고 싶어 문의 드립니다 e.clientX(e.clientY) / window.innerWidth(window.innerHeight)브라우저( window.innerWidth , window.innerHeight ) 가로 세로 기준으로현재 마우스 위치(e.clientX/e.clientY)가 어디인지 구하는 수식으로 이해했습니다. mousePos.x = -1 + ..중략.. * 2; mousePos.y = 1 - ..중략.. * 2;그리고 -1과 1은 결과 반환값으로, -1과 1로 나오기 위해서 지정한 것으로 추측되구요,그 이외에- 하는 것, + 하는 것, * 2 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
css 는 직접 작성을 해야하는걸까용?
캐릭터에 대한 css 작성 강의가 없는데 이 부분은 제가 직접 작성하면 되는 부분일까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
transform: translateZ(-490vw); /* 줌아웃 */ .wall-front-a{transform: translateZ(300vw);} .wall-front-b{transform: translateZ(50vw);} .wall-front-c{transform: translateZ(-200vw);} .wall-front-d{transform: translateZ(-500vw);} 이렇게 translateZ 에 px, rem , % 이가 아닌 vw 를 사용하신 이유가 가로축 을 기준으로 원근감을 주기 위해서 이신게 맞을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
안녕하세요 강의들으면서 제가 제대로 이해한게 맞는지 궁금해서 문의 드립니다.강의에서.house{ width: 100vw; height: 100vh; transform-style: preserve-3d; }이렇게 css 를 지정해주신 이유가 스크롤을 했을때 house 안에 있는 자식요소들이 꽉차게 보이기 위해서 그렇게 지정하신게 맞으신걸까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
벽의 위치를 지정하면서 left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
외부에서 JS파일을 불러올땐 무조건 defer를 써도 괜찮은건가요?
예외적으로 플러그인 같이 개별로 작동하는 JS파일은 async로 불러오고 일반적으로 작성한 JS들은 전부 defer로 불러온다고 했을때 발생할 수 있는 문제같은게 있을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문 있습니다~
안녕하세요 선생님:-)강의 끝 부분에 특정 번호를 넣으면그 번호의 문이 열리게 activate 함수를수정해보라고 하셔서 코딩을 해봤는데이 방법처럼 해도 되는지 잘 모르겠어서요~이렇게 해도 되나요? <script> (function(){ const stageElem = document.querySelector('.stage'); let currentItem; //활성화 function activate(elem){ if(typeof(elem) == "number"){ activate(document.querySelector('.door:nth-child('+ elem +')')); return; } elem.classList.add('door-opened'); currentItem = elem; } //비활성화 function inactivate(elem){ elem.classList.remove('door-opened'); } function doorHandler(e){ const targetElem = e.target; //비활성화 if(currentItem){ inactivate(currentItem); } //활성화 if(targetElem.classList.contains('door-body')){ activate(targetElem.parentNode); } } stageElem.addEventListener('click', doorHandler); activate(3); })(); </script>
- 미해결인터랙티브 웹 개발 제대로 시작하기
closest 사용
이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });
- 미해결인터랙티브 웹 개발 제대로 시작하기
이미지 없으신분 제 코드를 보세요 ㅎㅎ
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다.요걸로 테스트 해 봅시다<!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> <style> @keyframes break-egg-ani { /* 0%는 from */ /* 100% 은 to*/ to { background-position: -500px 0; } } .broken-egg { width: 85px; height: 150px; background: url("https://www.shutterstock.com/image-vector/cartoon-dragon-ice-crystal-eggs-260nw-2152129871.jpg") no-repeat 0 0 / auto 150px; animation: break-egg-ani 2s infinite steps(7); } </style> <body> <div class="broken-egg"></div> </body> </html>
- 미해결인터랙티브 웹 개발 제대로 시작하기
부모 컨테이너 갯수
강사님 안녕하세요. 강의 너무 잘 듣고 있습니다.항상 body에서 골격을 만들때 element 들을 몇개의 부모 container로 감싸야 할지 감이 잡히기 않아 고민입니다.3D 스크롤 예제 문제에서는 world > stage > house 3개의 div로 감싸주었는데 하나나 두개 혹은 없이는 구현이 안되는 걸까요?너무 기본적인 질문이라면 어떤 부분의 공부가 필요한지 조언 부탁드립니다. 감사합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!거리에 따라 가운데 card는 기울어지는 각도가 고정되어 있고 다른 카드들은 서로 거리가 멀어질수록 기울어지는 각도의 차이가 커질 줄 알았습니다.그런데 다른 속성은 수정하지 않고 margin 속성만 1em -> 5em으로 변화를 주었는데 가운데 있는 카드도 각도가 더 줄어들었습니다.그래서 world에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 각도가 정해지는지 궁금합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
new 키워드의 역할
강사님! 함수를 생성자 함수로서 실행을 하고 생성자 함수의 this에 개별 객체를 바인딩 하기 위해서 new 키워드를 쓰는것으로 이해를 했는데 제가 이해한게 맞나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문있습니다!
3개의문 2 강의 중에서 일분이 이미지를 가릴 때 transition을 사용하셔서 처음 위치에서 오른쪽으로 100% 이동을 시키셨잖아요?그 때 처음 두개의 문에 있던 일분이는 문 뒤에 가혀 보이지 않게 되었는데 세번째 문에 있던 일분이는 <div class = 'stage'> </div> 위에 보였습니다.그렇다면 처음 두개 문에 있던 일분이는 이동한 후에 레이어 상에서 이웃한 문 뒤에 위치해서 보이지 않는건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
이미지를 넣을 때 div 안에 background-img를 넣으시는이유
저는 어떤 이미지를 넣을 때 바로 img 태그를 이용해 넣을거같은데 강사님은 항상 div 태그 안에 background-img를 넣으시더라구요 혹시 그렇게 하시는 이유가 따로 있으신가요? 궁금합니닷!
- 미해결인터랙티브 웹 개발 제대로 시작하기
event 위임 관련해서 질문있습니다!
여기서 와일문을 돌리면 점점 큰 범위로 menu-btn이라는 클래스가 있는지 찾아가는 게 되는건가요?예를 들어 버튼안에 버튼, 그안에 버튼이렇게 있다면 내가 제일 안쪽에 있는 버튼을 클릭했을 때에, 제일 안쪽의 버튼, 중간버튼, 제일 겉에 있는 버튼 이런 순서로 찾아가게 되는 건지가 궁금합니다 영상 너무 잘보고 있습니다 ㅠ 좋은 강의 감사해요!!
- 미해결인터랙티브 웹 개발 제대로 시작하기
아톰 홈페이지가 안나와요.. 서비스 종료됐다는데
오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데찾아보니 서비스가 종료됐대요 얼마전에,,vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.