묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
이미지 없으신분 제 코드를 보세요 ㅎㅎ
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다.요걸로 테스트 해 봅시다<!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>
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
이후에 출시될 강의엔 유료 플러그인이 사용되나요?
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요?궁금해서 질문해봅니다! 🤔
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
Q. FOUC에 대한 보완으로 autoAlpha를 사용하면 효율적인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다.이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
-
미해결애플 웹사이트 인터랙션 클론!
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm 개념 관련 질문
npm node.js의 개념이 명확히 와닿지 않아서 여쭤봅니다.전에 봤던 어떤 기초 강의에서//Basic Tools (VScode, Atom, Intelli J등) //Front End (HTML CSS JS)//Tools (Package Manager- npm,yarn, Module Bundler - Webpack, Rollup, Parcel) //Testing//Publish (Netlify 등)위 순서대로 웹빌딩이 진행된다는 내용을 본 적이 있는데 전에 혼자 웹빌딩을 했을 때는 Front End -> Publish(깃허브) 순으로 진행하고 끝냈어서 중간 단계에 있는 Tools 내용부터는 이해가 잘 되지 않습니다ㅠㅠ npm이랑 webpack이 이번 수업에도 등장했는데 왜 설치를 해야하는지, 설치한 npm은 publish할 때 어떻게 해야하는지 등의 부분이 이해가 되지 않아서 여쭤봅니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
다음강의 Part.03 관련 질문
안녕하세요 part.02 강의 완강했습니다👍너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요?예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
나비가 버튼위로올라가면 버튼의 hover기능이 멈춰버려요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 너무 좋은 강의 잘 듣고 있습니다!mouse 강의 마지막 따라 하고 있는데요강의를 따라해도 조금 다르게 작동하는 경우가 있어서 질문 남깁니다.버튼에 마우스를 올리니 호버기능이 작동하는데 나비가 올라오는 순간 호버 기능이 꺼져버립니다. 이 경우 어떻게 해야할까요?
-
미해결애플 웹사이트 인터랙션 클론!
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
modelMesh 질문있습니다.
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.선생님 현재 물리엔진 적용중, Player에 mass 30적용시 Pillar를 뚫고 밑으로 떨어지는 문제가 발생하고있습니다. 강의를 여러번 다시 되돌리면서 확인도 해보구, 완성된 코드랑 비교도 하면서 오타가있나 복사 붙여넣기를 해봐도 도저히 문제를 찾을 수 없었습니다..ㅠㅠ 어디부분을 수정해야 이러한 문제를 고칠 수 있는지 알려주시면 감사하겠습니다!ㅠㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
mesh 변수 질문
안녕하세요. 선생님 질문있습니다. 강의에 보면 let mesh로 변수를 선언해서 반복문내에서 사용하셨는데const meshes = []; let mesh; for (let i = 0; i < 10; i++) { mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }다음과 같이 반복문 내에 const로 선언하고 사용해도 같은 결과가 나오는데 반복문 밖에서 선언 후 사용하신 이유가 따로 있을까요?const meshes = []; for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math.random() * 5 - 2.5; mesh.position.z = Math.random() * 5 - 2.5; scene.add(mesh); meshes.push(mesh); }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Uncaught TypeError (uuid) 에러
이전 수업에서 ilbuni.glb를 로드했을 땐 정상적으로 작동했는데, test.glb로 바꾸니까 이런 에러가 뜨네요 ...uuid가 토큰같은 id처럼 보이는데 ,, 어떻게 해결해야 할까요? ㅜㅜ
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
perspective에 대해서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 여기 부분하고여기 부분에 모두 perspective가 있는데혹시 css에도 해줘야하는 이유가 있을까요?? 그리고 혹시 영상에서 보였던 끊김현상이 저도 가끔씩 나타나는데 원인이 뭔가요?? 3d를사용해서 그런건가요? 아님 그저 컴퓨터렉인가요??혹시 해결방법도 알려주시면 감사드리겠습니다..ㅠㅠ
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
CSS에서 궁금했던 부분 -실전 페럴렉스 강의 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분이 없어도 잘 되는 것같긴한데혹시 overflow-y : hidden 있는 이유를 알 수 있을까요?이미지들이 height 크기를 넘어도 화면에서 이미지를 자르고 스크롤을 없앤다는 의미 맞을까요?? 또하나 질문이 있습니다.여기서 상위요소에 margin 0 auto를 주고하위요소에 margin auto를 줬는데위에 margin 0 auto를 지워도 하위요소는 가운데 정렬이 잘 되고상위 요소에 margin 0 auto가 아닌 margin auto를 줘도 똑같이 나오는데이게 둘이서 무슨 상호작용이 되는지 알 수 있을까요?? 개발자 도구로 지우면서 확인해봤는데 바뀌는게 안보여가지구요..ㅠㅠ
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } };선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
requestAnimationFrame 질문
선생님 이거 사용하면서 위치값 계속 업데이트해주는걸로 아는데 이걸 사용해서 그러지는 몰라도그 버튼위에 올리면 좀 크기가 나중에 변화되는데 이게 연산을 계속해서 이런문제가 발생 할수도 있나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의노트 관련
강의노트는 어디서 다운 받나요 ?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
클로저 질문
애니메이션 재생, 정지, 재시작 버튼 구현 강의에서 3:55에 클로저를 설명해주신 내용에서let toggle = false; button.addEventListener('click',()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; });이부분을 button.addEventListener('click',()=>{ let toggle = false; return ()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; } });로 변경하셨는데 변경전 코드는 잘 되는데 변경된 코드는 동작을 하지 않습니다혹시 제가 잘못 적은 부분이 있을까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Chapter 9의 커스텀 모델 로드하기에서 오류가 뜹니다.
안녕하세요 1분코딩님 강의에서처럼import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // gltf loader const loader= new THREE.GLTFLoader; GLTFLoader.load( '/models/ilbuni.gltf', gltf => { console.log(gltf) } ); 이렇게 입력했는데, localhost:8080에서export 'GLTFLoader' (imported as 'THREE') was not found in 'three' 와 같은 오류가 뜹니다. three.js의 폴더는 평소에 잘 실행 된 것 처럼 위치해 있는 거 같은데, 무엇이 잘못되었는지를 모르겠습니다.
-
미해결인터랙티브 웹 개발 제대로 시작하기
부모 컨테이너 갯수
강사님 안녕하세요. 강의 너무 잘 듣고 있습니다.항상 body에서 골격을 만들때 element 들을 몇개의 부모 container로 감싸야 할지 감이 잡히기 않아 고민입니다.3D 스크롤 예제 문제에서는 world > stage > house 3개의 div로 감싸주었는데 하나나 두개 혹은 없이는 구현이 안되는 걸까요?너무 기본적인 질문이라면 어떤 부분의 공부가 필요한지 조언 부탁드립니다. 감사합니다.
-
미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.
에러를 보면 8번째와 30번째 줄이 문제라는 것 같은데 둘다 close button에 관련된것들이거든요.getTarget함수를 실행할 때 contains이전부분이 undefined가 나오는 것 같아서, e.target을 console로도 찍어 봤는데 저렇게 뻔히 나오고 있는데 왜 자꾸 오류가 뜨는지 모르겠습니다 ㅠㅠ선생님 코드랑 비교해 봤는데 완성된 코드니까 물론 차이는 있지만 저 부분은 다를 게 딱히 없어 보이거든요..대체 원인이 뭘까요? 작동은 되는데 자꾸 오류가 뜨니까 신경쓰여요
