55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
[#전진! 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 문의하기를 이용해주세요.
- 미해결인터랙티브 웹 개발 제대로 시작하기
브라우저 사이즈에 따라 위치값이 달라지는건 왜일까요..?
안녕하세요전진 3D스크롤 예제를 이리저리 수정해보고 있는데요.옆면 벽에 더해 위쪽 벽도 만들어보고 싶어서 수정하고 있습니다. 브라우저 사이즈가 작을때는 정상적입니다..근데 브라우저를 최대화하면...이렇게 위쪽 벽이 튀어나가버립니다.. html은 실습예제에서 양쪽벽과 위쪽벽만 빼고 삭제했습니다..<div class="world"> <div class="stage"> <div class="house"> <section class="wall wall-left"></section> <section class="wall wall-right"></section> <section class="wall wall-upper wall-upper-left"></section> <section class="wall wall-upper wall-upper-right"></section> </div> </div></div> css는 body world stage house wall는 실습예제와 크게 다른점이 없구요..body { height: 100vh; font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif; color: #555; background: #555;}.world { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; perspective: 100vw;}.stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d;}.house { width: 100vw; height: 100vh; transform: translateZ(-500vw); transform-style: preserve-3d;}.wall { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;} 옆벽과 위쪽벽만 아래처럼 만들어놨습니다...wall-right { background:#6b68ff55; width: 1000vw; transform: rotateY(90deg) translateZ(-400vw)}.wall-upper-left { height: 1000vw; background: #00000055; transform: rotateX(90deg) translateZ(500vw)} 둘다 길이가 1000vw라서 브라우저 가로사이즈에 따라 달라질 요인은 없는거같은데...왜 그럴까요?ㅠㅠ세로로는 브라우저 크기에 영향을 안받고, 오직 가로크기가 변하면 저렇게 어긋나버립니다..
- 미해결인터랙티브 웹 개발 제대로 시작하기
forward 방향은 되는데 backward 방향은 왜 안될까요?
스크롤을 내릴 때는 forward 방향으로 캐릭터가 앞방향으로 보고 앞으로 가는데 스크롤을 다시 올리면 forward 방향으로 계속 유지가 된 상태로 움직입니다.ㅠㅜ 왜 그런 걸까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
3개의 문 3파트에서 if 문이 읽히지 않습니다..ㅠ
안녕하세요 선생님강의를 듣고 하나씩 따라해보고 있었는데요3개의 문 3파트에서 if 문을 넣는 부분을 그대로 따라서 적었는데 if 문이 해석이 안되서.. 질문 드립니다. 이렇게 적었는데 if 문 안에 넣었을 때는 작동이 안되고targetElem.parentNode.classList.add('door-opened');부분을 if 문 밖으로 빼면 작동이 되는 이유가 무엇일까요.. 정말 너무 궁금합니다.제발 알려주세요. ㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
전진 3D 스크롤 13에서 width값과 height값 질문입니다.
전진!3D 스크롤 13에서.character 의 width: (10vw) 와 height: (15.58vw) 가 어떻게 나온건지 이해가 잘 가지 않습니다.화면에서 보니 포토샵 기준 이미지 사이즈가 가로 860px로 보이는거 같은데 가로 vw로 계산해준건가요 ?? 높이 역시 비율 계산 방법이 따로 있는건지 궁금합니다.