16,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.
에러를 보면 8번째와 30번째 줄이 문제라는 것 같은데 둘다 close button에 관련된것들이거든요.getTarget함수를 실행할 때 contains이전부분이 undefined가 나오는 것 같아서, e.target을 console로도 찍어 봤는데 저렇게 뻔히 나오고 있는데 왜 자꾸 오류가 뜨는지 모르겠습니다 ㅠㅠ선생님 코드랑 비교해 봤는데 완성된 코드니까 물론 차이는 있지만 저 부분은 다를 게 딱히 없어 보이거든요..대체 원인이 뭘까요? 작동은 되는데 자꾸 오류가 뜨니까 신경쓰여요
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
질문 있습니다ㅠ.ㅠ..
지금 1, 3번은 back-btn이 제대로 포커스가 되는데 2번만 계속 page-face가 잡혀요..어떤 이유 때문일까요8ㅅ8
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
클릭 시 자꾸 page element만 인식됩니다.
위 화면에서 BackBtn이 인식이 되지 않고 Page element만 인식이 됩니다. 참고로 강사님이 주신 코드 압축 풀어서 실행했는데도 저래요... console.log로 찍어도 계속 page만 인식되고, backBtn에 z-index: 2000을 줬는데도 backBtn는 인식이 되지 않습니다. 부모 element가 자식 element 영역을 전부 잡아먹는 것 같습니다.
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
가운데 페이지만 줌인이 됩니다
양 옆 페이지의 요소들을 클릭해도 줌인이 안되고, 가운데 페이지의 요소만 줌인이 됩니다. 왜 그런지 모르겠어요... 올려주신 소스코드에서 그대로 해도 양 옆은 줌인이 되지 않습니다. 파이어폭스에서는 작동하는데 이미지가 표시되지 않습니다 (() => { const leaflet = document.querySelector('.leaflet'); const pageElems = document.querySelectorAll('.page'); let pageCount = 0; let currentMenu; function getTarget(elem, className) { while (!elem.classList.contains(className)) { elem = elem.parentNode; if (elem.nodeName == 'BODY') { elem = null; return; } } return elem; } function zoomIn(elem) { const rect = elem.getBoundingClientRect(); const dx = window.innerWidth/2 - (rect.x + rect.width/2); const dy = window.innerHeight/2 - (rect.y + rect.height/2); let angle; switch (elem.parentNode.parentNode.parentNode.dataset.page*1) { case 1: angle = -30; break; case 2: angle = 0; break; case 3: angle = 30; break; } document.body.classList.add('zoom-in'); leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`; currentMenu = elem; currentMenu.classList.add('current-menu'); } function zoomOut() { leaflet.style.transform = 'translate3d(0, 0, 0)'; if (currentMenu) { document.body.classList.remove('zoom-in'); currentMenu.classList.remove('current-menu'); currentMenu = null; } } function closeLeaflet() { pageCount = 0; document.body.classList.remove('leaflet-opened'); pageElems[2].classList.remove('page-flipped'); setTimeout(() => { pageElems[0].classList.remove('page-flipped'); }, 500); } leaflet.addEventListener('click', e => { let pageElem = getTarget(e.target, 'page'); if (pageElem) { pageElem.classList.add('page-flipped'); pageCount++; if (pageCount == 2){ document.body.classList.add('leaflet-opened') } } let closeBtnElem = getTarget(e.target, 'close-btn'); if (closeBtnElem) { closeLeaflet(); zoomOut(); } let menuItemElem = getTarget(e.target, 'menu-item'); if (menuItemElem) { zoomIn(menuItemElem); } let backBtn = getTarget(e.target, 'back-btn'); if (backBtn) { zoomOut(); } }); })();
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다
body에 perspective를 주면 html, body가 높이가 0이 되어서 일단 body에 100vh 주긴 했는데.. 왜 강의와는 다르게 적용되는 걸까요?
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
줌인 상태일 때
줌인 상태일 때, current-menu 클래스가 추가된 menu-item 외에 다른 menu-item을 누르면 leaflet 의 위치가 바뀌면서 틀이 틀어지는 이슈가 생겼습니다. current-menu 클래스가 메뉴 중 1개라도 추가가 되어 있다면 zoomin 함수가 실행되지 않게 하고 싶은데.. 제가 코드를 아는 지식선에서 해봤지만 오류만 나네요ㅠㅠ css로 .zoom-in { pointer-event: none } .current-menu .back-btn { pointer-event: auto } 로 설정을 했더니 current-menu 가 추가가되면 다른 menu-item은 클릭하지 못하게 설정은 되었습니다. css로 적용이 아닌 스크립트로 적용하고싶은데.. 이럴 땐 어떻게 코드를 개선해줘야할지..답변 부탁드립니다!!
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
이벤트 위임 방식 질문
이벤트 위임 방식으로 하게되면 현재 2F를 감싸는 page 에도 page-flipped 클래스가 추가가 됩니다. 2F를 감싸는 page 에는 page-flipped 클래스가 추가가 되지 않게 하려면 data- 속성을 이용해 적용하면 될까요 ??
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
이사람 누군지 아세요..?
누구지.... 왜 물어 보지.... :0 몰라서 구글링 해 보았어요. 엥...? 강사님이랑 닮았네요.... ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ :) 잘 듣겠습니다. ㅎㅎ
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,
그럴경우 useEffect 안에서 함수 처리를 해줘야할까요? 예를들어 이런식으로? useEffect(() => { const leaflet = document.querySelector('.leaflet'); const pageElems = document.querySelectorAll('.page'); let pageCount = 0; function getTarget(elem, className) { while (!elem.classList.contains(className)) { elem = elem.parentNode; if (elem.nodeName === 'BODY') { elem = null; return; } } return elem; } function closeLeaflet() { pageCount = 0; document.body.classList.remove('leaflet-opened'); // 펼쳐졌을때 맨 오른쪽 페이지 닫기 pageElems[2].classList.remove('page-flipped'); setTimeout(() => { // 이후 맨 왼쪽 페이지 닫기 pageElems[0].classList.remove('page-flipped'); }, 500); } leaflet.addEventListener('click', (e) => { let pageElem = getTarget(e.target, 'page'); if (pageElem) { pageElem.classList.add('page-flipped'); pageCount++; if (pageCount === 2) { document.body.classList.add('leaflet-opened'); } } // let closeBtnElem = getTarget(e.target, 'close-btn'); // if (closeBtnElem) { // closeLeaflet(); // zoomOut(); // } // let menuItemElem = getTarget(e.target, 'menu-item'); // if (menuItemElem) { // zoomIn(menuItemElem); // } // let backBtn = getTarget(e.target, 'back-btn'); // if (backBtn) { // zoomOut(); // } }); }, []);
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
질문있습니다.
forwards 를 작성안해줘도 애니메이션이 제대로 동작하는데요. 어떤 현상 때문에 적용을 하신것인지 궁금합니다! 그리고 menu-item을 클릭하혀 줌인이 되었을때 다른곳을 클릭하면 레이아웃(?)이 다른데로 이동되는현상이있는데요 이런경우 어떤식으로 접근해줘야 이같은 현상을 방지 할 수 있을까요?
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
선생님 질문잇습니다. ㅠ
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요? 백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ? 백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
줌인이 왜 안되는지를 모르겠어요..
(() => { const leaflet = document.querySelector(".leaflet"); const pageElems = document.querySelectorAll(".page"); let pageCount = 0; function getTarget(elem, className){ //부모노드까지 위임 while(!elem.classList.contains(className)){ elem = elem.parentNode; if(elem.nodeName =='BODY'){ elem = null; return; } } return elem; } function closeLeaflet(){ pageCount=0; document.body.classList.remove('leaflet-opened'); pageElems[2].classList.remove('page-flipped'); setTimeout(() => { pageElems[0].classList.remove('page-flipped'); },500); } function zoomIn(elem){ const rect = elem.getBoundingClientRect(); const dx = window.innerWidth/2 - (rect.x + rect.width/2); const dy = window.innerHeight/2 - (rect.y + rect.height/2); let angle; switch(elem.parentNode.parentNode.parentNode.dataset.page*1){ case 1: angle = -30; break; case 2: angle = 0; break; case 3: angle =30; break; } console.log(elem.parentNode.parentNode.parentNode.dataset.page); leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`; } leaflet.addEventListener('click',e =>{ let pageElem = getTarget(e.target, 'page'); if(pageElem){ pageElem.classList.add('page-flipped'); pageCount++; if(pageCount ==2){ document.body.classList.add('leaflet-opened'); } } let closeBtnElem = getTarget(e.target, 'close-btn'); if(closeBtnElem){ closeLeaflet(); } let menuItemElem = getTarget(e.target, 'menu-item'); if(menuItemElem){ zoomIn(menuItemElem); } }); })();
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
질문이 있어요
각 페이지마다 transform-style: preserve-3d로 설정해주면 .page-face의 backface-visibility : hidden이 없어도 앞, 뒷면 확인이 잘 되니까 backface-visibility : hidden 을 넣어야하는지 잘 모르겠어요.. ㅠㅠ
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
질문 있습니다.
body에 perspective를 주었고 leaflet에 preserve-3d를 아직 해주지 않았는데 어떻게 page는 rotateY의 3d 효과가 적용된건가요?? body의 perspective효과가 html태그 단계를 거치면 적용이 안된다고 하셨는데 page는 왜 leaflet에 preserve-3d를 해주기도 전에 rotateY의 3d효과가 적용될수 있었는지 궁금합니다.
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
선생님 질문 있습니다!
안녕하세요 궁금한점이 있어서 질문 드립니다 ㅠ.. 제가 지금까지 선생님 강의를 봐왔을시에는, 항상 부모 태그에 position: relative 를 적용 해 주신다음, 자식 태그에 position:absolute를 써주신 걸로 알고 있습니다. 하지만 이번에는 부모 tag에 바로 absolute를 써주신 이유가 궁금합니다. 제가 relative 를 적용하고, 써 보았는데, 가로는 정렬 되는데 세로는 안되더라구요. 정렬의 위함때문 인건가요?
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?
화면 줄이면 이렇게 글자들이 삐져나오는걸 해결을 못하고 잇어요 ㅠㅠ 일단은 혼자서 해결해보도록 하겟습니다!! 강의 감사해요~ 아 그리고 해결하고싶은 문제들이 몇가지 더 있는데 예를들어 줌인 상태에서 다른 곳 클릭하면 화면이 완전히 다른곳으로 전환되는 것들은 지금은 제가 혼자 해결해보겠습니다. 제가 이강의를 여러번 돌려보면서 공부할거라서 나중에 정 모르겟으면 그때 질문할게요~ 감사해요~~
- 미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
소스코드 압축이 풀리지 않습니다.
반디집으로 풀었는데 파일 압축이 풀리지 않아 소스코드를 볼수가 없습니다. 혹시 파일을 메일로 받을수 있는지 여쭤봅니다. damanegi1979@naver.com 입니다. 수고하세요~