묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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 ===> 목록 묶음용이렇게 이해하면 될까요???
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
선생님
알려주신 수업예제로 웹사이트 만들어도 되는건가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
캔버스내 클릭 무반응
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 커스텀하여 만들고있는데 캐릭터를 아래로 이동시키고자 화면 하단을 클릭하면 데스티네이션 포인트가 안생기고 클릭이 안되는부분이 있습니다. 캐릭터 가 위치한 높이 아래로 어느정도 거리 이상 클릭시 클릭자체가 안되는것같은데 어떻게 해결해야할까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
localhost:8080 에서 콘솔 창에 오류 메세지 해결방안좀 알려주세요
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform 화면 캡쳐 첨부 합니다
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검 방지턱(?) 현상
안녕하세요 코딩 1달차 뉴비입니다... 선생님의 지도에 따라 수리검 만들고 화면 밖을 벗어나면 수리검이 없어지는 효과까지 구현을 하였습니다만... 화면밖에서 사라질때 스크롤바가 뜬금없이 나와 방지턱에 걸린 마냥 hero가 올라갔다 내려갔다 합니다... 아래 그림처럼 말이죠... 브라우저 문제일까요?? 구글크롬 사용하고 있습니당..
-
미해결애플 웹사이트 인터랙션 클론!
도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ
안녕하세요. 알려주신 인강 내용을 토대로 메인 화면을 만들었고 html 로컬 화면에서는 제대로 작동하는 것을 확인했습니다. 그런데 실제로 도메인을 사고 웹호스팅 하는 방법을 찾아서 연결했더니 js에 적용된 이미지들과 텍스트가 나타나질 않습니다.ㅠㅜ html과 css에 연결된 내용은 큰 덩어리들은 뜨는 것 같은데 왜 js에 연결된 인터랙션과 이미지, 콘텐츠 내용은 나타나질 않는 것일까요? 도메인/images/이미지이름.png <<이런 식으로 이미지가 연결되어 있는지 확인하면 해당 이미지가 뜨긴 합니다.실제 포트폴리오 사이트를 만들어보고 싶어서 맨 땅에 헤딩 중입니다. 디자이너라서 퍼블 이후 개념들은 잘 모르기도 하고요ㅠㅜ 근데 작업한 게 아까워서라도 제대로 구현되도록 만들고 싶습니다...이런 경우의 문제 아시는 분은 제발 알려주시면 감사하겠습니다.
-
해결됨Three.js 3D 인터랙티브 바로 시작하기
이미지 클릭 시 페이지 이동
강의대로 const dataArr = [ { "image": "https://i.postimg.cc/ZqSD48GC/image.jpg", "link": "https://gokweol13.yikyung.repl.co", },코드를 사용하여 페이지에 삽입한 이미지를 클릭하면 새 창으로 페이지가 새로 만들어지는데, 혹시 한 웹사이트 내에서 페이지 간 이동 할 수 있도록 하려면 어떡해야하나요?
-
미해결디자이너의 스킬업을 위한 Lottie 완벽 이해하기
최신버전으로 하고 다 해봐도 bodymovin 에 아무것도 안떠요
최신버전으로 하고 다 해봐도 bodymovin 에 아무것도 안떠요
-
미해결애플 웹사이트 인터랙션 클론!
load 이벤트시 첫 비디오 이미지가 뜨네요.
window.addEventListener('load' ... 중략sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);안녕하세요.작업하다 이상해서, 강의자료도 같이 확인해보니 중간에 새로고침시 videoImages의 첫 이미지가 잠시 뜨는데, 아마 위의 코드 때문이 아닌가 합니다. 저 부분은 첫 scene의 장면임에도 불구하고, 뜬다는 것은 찰나이긴 하지만, 첫영역부터 순간적으로 중간으로 이동하면서 나타나는 현상같기도 한데, 이게 컴퓨터의 성능차이일수도 있다는 생각이 들기도 합니다. 저만 이런건지 모르겠습니다만..저 코드를 제거하고 중간에서 새로고침해보니 안보여서 문제가 없지만, 최상단 첫화면에서 새로고침하면 이미지가 안보이니 또 문제더군요.그래서 위 코드를 제거후, 새로고침시 조금 스크롤되는 코드에서 추가 조건문(else)를 붙여서 아래와 같이 수정해보았습니다. if (tempYOffset > 0) { let siId = setInterval(() => { scrollTo(0, tempYOffset); tempYOffset += 5; if (tempScrollCount > 20) { clearInterval(siId); } tempScrollCount++; }, 20); } else { sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); } 이렇게 처리하니 문제가 없는 듯 한데, 이게 저한테만 생기는 문제인지, 아니라면 제가 위와 같이 처리한 방법이 맞는것인지 궁금합니다.
-
해결됨몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
리뉴얼 이전 강의 파일
안녕하세요!강의 잘 듣고 있습니다! 이번에 강의가 리뉴얼되면서리뉴얼 되기 이전의 강의 영상과 파일이 사라져있는데이전 강의 파일이 필요한데 혹시 이전 강의 파일은 어디서 받을 수 있을까요..? ㅠ3ㅠ