Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
(4.8)
14개의 수강평 ∙ 258명의 수강생

16,500원

지식공유자 : 1분코딩
총 15개 수업˙총 1시간 40분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 269 공유
이은혜 프로필

줌인 상태일 때 이은혜 1달 전
줌인 상태일 때, 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로 적용이 아닌 스크립트로 적용하고싶은데.. 이럴 땐 어떻게 코드를 개선해줘야할지..답변 부탁드립니다!!

1
이은혜 프로필

이벤트 위임 방식 질문 이은혜 1달 전
이벤트 위임 방식으로 하게되면 현재 2F를 감싸는 page 에도 page-flipped 클래스가 추가가 됩니다.  2F를 감싸는 page 에는 page-flipped 클래스가 추가가 되지 않게 하려면 data- 속성을 이용해 적용하면 될까요 ??

1
Dongwoo Ha 프로필

이사람 누군지 아세요..? Dongwoo Ha 2달 전
누구지.... 왜 물어 보지.... :0 몰라서 구글링 해 보았어요. 엥...? 강사님이랑 닮았네요.... ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ :) 잘 듣겠습니다. ㅎㅎ

1
반가우면반갑다고해 프로필

선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요, 반가우면반갑다고해 2달 전
그럴경우 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();       // }     });  }, []);

1
반가우면반갑다고해 프로필

질문있습니다. 반가우면반갑다고해 2달 전
forwards 를 작성안해줘도 애니메이션이 제대로 동작하는데요. 어떤 현상 때문에 적용을 하신것인지 궁금합니다! 그리고 menu-item을 클릭하혀 줌인이 되었을때 다른곳을 클릭하면 레이아웃(?)이 다른데로 이동되는현상이있는데요 이런경우 어떤식으로 접근해줘야 이같은 현상을 방지 할 수 있을까요?

1
김동 프로필

선생님 질문잇습니다. ㅠ 김동 4달 전
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요? 백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ? 백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?

1
kha2858 프로필

줌인이 왜 안되는지를 모르겠어요.. kha2858 4달 전
(() => { 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); } }); })();

1
김 코딩왕 김챡씨 프로필

질문이 있어요 김 코딩왕 김챡씨 4달 전
각 페이지마다 transform-style: preserve-3d로 설정해주면 .page-face의 backface-visibility : hidden이 없어도 앞, 뒷면 확인이 잘 되니까 backface-visibility : hidden 을 넣어야하는지 잘 모르겠어요.. ㅠㅠ 

1
정우진 프로필

질문 있습니다. 정우진 5달 전
body에 perspective를 주었고 leaflet에 preserve-3d를 아직 해주지 않았는데 어떻게 page는 rotateY의 3d 효과가 적용된건가요?? body의 perspective효과가 html태그 단계를 거치면 적용이 안된다고 하셨는데  page는 왜 leaflet에 preserve-3d를 해주기도 전에 rotateY의 3d효과가 적용될수 있었는지 궁금합니다.

2
개발자 프로필

선생님 질문 있습니다! 개발자 5달 전
안녕하세요 궁금한점이 있어서 질문 드립니다 ㅠ.. 제가 지금까지 선생님 강의를 봐왔을시에는, 항상 부모 태그에 position: relative 를 적용 해 주신다음, 자식 태그에 position:absolute를 써주신 걸로 알고 있습니다. 하지만 이번에는 부모 tag에 바로 absolute를 써주신 이유가 궁금합니다. 제가  relative 를 적용하고, 써 보았는데, 가로는 정렬 되는데 세로는 안되더라구요.  정렬의 위함때문 인건가요?

2
송지훈 프로필

쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠? 송지훈 7달 전
화면 줄이면 이렇게 글자들이 삐져나오는걸 해결을 못하고 잇어요 ㅠㅠ 일단은 혼자서 해결해보도록 하겟습니다!! 강의 감사해요~ 아 그리고 해결하고싶은 문제들이 몇가지 더 있는데 예를들어 줌인 상태에서 다른 곳 클릭하면 화면이 완전히 다른곳으로 전환되는 것들은 지금은 제가 혼자 해결해보겠습니다. 제가 이강의를 여러번 돌려보면서 공부할거라서 나중에 정 모르겟으면 그때  질문할게요~ 감사해요~~

2
조재영 프로필

소스코드 압축이 풀리지 않습니다. 조재영 8달 전
반디집으로 풀었는데 파일 압축이 풀리지 않아 소스코드를 볼수가 없습니다. 혹시 파일을 메일로 받을수 있는지 여쭤봅니다. damanegi1979@naver.com  입니다. 수고하세요~

4

16,500원

내 목록 추가 269 공유
지식공유자 : 1분코딩
총 15개 수업˙총 1시간 40분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스