묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
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로도 찍어 봤는데 저렇게 뻔히 나오고 있는데 왜 자꾸 오류가 뜨는지 모르겠습니다 ㅠㅠ선생님 코드랑 비교해 봤는데 완성된 코드니까 물론 차이는 있지만 저 부분은 다를 게 딱히 없어 보이거든요..대체 원인이 뭘까요? 작동은 되는데 자꾸 오류가 뜨니까 신경쓰여요
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
캐릭터에 빛이 반대로 비쳐져요
선생님이 만든 캐릭터는 캐릭터에 그림자가 정상적으로 생기던데, 제가 만들면서 빠뜨린 게 있을까요?
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
강사님 transition-delay 질문있습니다
강사님! 수업 css에서 transition-delay가 작성만 돼 있고 사용되지는 않은 거죠?? 딜레이하고자 하는 요소에 똑같이 작성된 delay00 클래스명만 똑같이 붙여주면 되는 거 맞나요??
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
스크롤위치에 따른 페이지 변화에서
왜 scroll2를 넣으신건가요?
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요? body.style이렇게만 작성해도 되지 않나요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!
world(무대)에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 정도(각도)가 정해지는지 궁금합니다!거리에 따라 가운데 card는 기울어지는 각도가 고정되어 있고 다른 카드들은 서로 거리가 멀어질수록 기울어지는 각도의 차이가 커질 줄 알았습니다.그런데 다른 속성은 수정하지 않고 margin 속성만 1em -> 5em으로 변화를 주었는데 가운데 있는 카드도 각도가 더 줄어들었습니다.그래서 world에 perspective를 적용했을 때 어떤 기준으로 각 요소들의 기울어지는 각도가 정해지는지 궁금합니다!
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문
안녕하세요강사님이해가 되지 않아서 질문드립니다.저는 조건을 한글로 생각해서 저렇게 주석으로 정리를 해놨습니다.if문의 조건을 봤을땐 조건이 맞아서 console.log에 scroll 라는 변수도 정상적으로 찍힙니다.제가 궁금한것은 2개의 조건이 스크롤 할때마다 맞는데 어떻게 스크롤 값이 526 이 되거나 넘어가면 pageNum의 값이 증가하는걸까요?많이 헷갈려서 이부분만 여러번 보는듯합니다.아니면 저의 해석이 잘못된 걸까요?// 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가? // 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가? for(let i = 0; i < maxNum; i++){ // 1. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 보다 큰가? = 스크롤의 값이 -250보다 큰가? // 2. 스크롤의 값이 sectionNum의 Top 시작 값 - 화면 높이 값/3 + sectionNum의 전체 높이 값 보다 작은가? = 스크롤의 값이 526 보다 작은가? if(scroll > sectionNum[i].offsetTop - window.innerHeight/3 && scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){ pageNum = i; console.log(scroll); if(scroll > sectionNum[i].offsetTop - window.innerHeight/3){ console.log('큼1') } if(scroll < sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight){ console.log('큼2'); } // console.log(sectionNum[i].offsetTop); // 8 785 1562 2339 // console.log(window.innerHeight/3) // 258 // console.log(sectionNum[i].offsetHeight); // 777 // 8 - 258 = -250 // -236 + 734 = 527 // console.log(sectionNum[i].offsetTop - window.innerHeight/3 + sectionNum[i].offsetHeight); // 526 // console.log(scroll) // console.log(pageNum); // console.log(sectionNum[i].offsetTop - window.innerHeight/3) // -250 // 한번 돌았으면 break; } }
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
화면 높이 관련 질문 있습니다.
섹션1높이 - 화면 높이 = 2539px 이라고 하셨는데요!섹션1높이는 알겠는데...화면높이는 브라우저의 실질적으로 콘텐츠가 보이는 곳을 말씀하시는걸까요...? 그럼 실제 스크롤거리는 어디 부분을 말하는걸까요...?즉, 화면 높이와 2539px의 정확한 설명이 필요합니다 ㅠ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
질문이 있습니다!
파트2 강의를 들을때도 gsap유료버전을 구매하지 않아도 수업을 다 따라갈수 있나용?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
기초 트위닝 질문
기초 트위닝 진행중인데<div class="orange"></div>라고 적었을때 애니메이션이 작동을 안해요 ㅠㅠ<div class="orange">22</div> 이런식으로 태그 안에 내용이 있을때만 작동을 하는데 왜그러는 걸까용...
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
li::after,li::before질문있습니다!
강사님! 수업 8:45초쯤에 .sec5_list li + li:after로 라인을 그어주는데 li:before로 사용해도 차이가 없는 것 같아요 before로 사용해도 괜찮을까요?before는 가상요소를 요소의 앞에 after는 가상요소의 뒤에 사용하는걸로 알고있는데 수업에서는 after를 사용하는 이유가 궁금합니다!
-
해결됨XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
all-menu 질문있습니다!
강사님 navigation layout 만들 때 allMenuWrap ===> 뒤의 흰 배경용allMenu-inner ===> 하위 목록 정렬용allMenu ===> 목록 묶음용이렇게 이해하면 될까요???