묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
zMove 를 1000으로 설정하는 이유에 대하여.
안녕하세요 1분 코딩님.영상에 6:10에 zMove 변수의 값을 설정할 때 0 - 1 의 비율이 너무 작은 수 이기 때문에 * 1000 을 해주신다고 하셨는데요.houseElem 요소가 0 - 1000vw 만큼 이동해야 하기 때문에 * 1000을 해주신것이 아닌지 여쭙습니다.만약 0 - 1 로 가능하다면 배수로 사용해야 한다고 생각이들고 0- 100 으로 가능하다면 %로 사용할 수 있지 않을까 하는 생각에 질문합니다.실제로 값을 작게 사용했을 때 조금밖에 움직여지지 않는 현상을 테스트 해봤습니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
use client
안녕하세요 ㅎㅎ강의 너무 잘 듣고있습니다.use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 ,그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
tailwind.config.ts
tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다.다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ이렇게해서 생성을 진행했구요.잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요npm error code EACCES그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
(사진)
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
6.8 강의 drawer닫기
안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다.Header쪽에 <DrawerClose><Logo/></DrawerClose>이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요.혹시 useState를 사용하신 이유가 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
GSAP 가이드 Part.02 강의 > 01 > practice html 맨처음 시작시 강의랑 동일하지 않을 경우
웹 애니메이션을 위한 GSAP 가이드 Part.02에advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다.혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
-
미해결쉽고 빠르게 만드는 다양한 이미지 이펙트!
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
ggang_effect.jsfunction ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
advanced 수업자료 문의
Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
key.svg 이미지
안녕하세요 !강의를 열심히 따라가고있는 학생입니다:)key.svg 가 데이터 폴더에 있긴한데 강사님이 직접 자르신 키 사진(쇠 모양이없음) 과는 다르던데,저는 어도비 일러스트 유료버전이없어서 그런데 어떻게 해야할까요 ?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
shadcn 라이브러리
shadcn는 next.js에서만 사용가능한 라이브러리 인가요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶❤ 화살표함수란 ?함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨.정리Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨화살표 함수 ver.run = () => { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run); };Bind 메소드 ver.run() { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run.bind(this)); }
-
미해결인터랙티브 웹 개발 제대로 시작하기
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
안녕하세요. 이벤트 위임 연습하다가 변칙적으로 연습하고 있는데요. 동적으로 html 생성 된 후에 버튼에 ''-active"클래스 추가 하면 실제로 클래스가 추가가 안되네요. 그런데 elem을 consol 창에 찍어보면 "-avtive"클래스가 추가된 요소로 나오는데 이건 무슨 문제일까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스크립트 연습</title> <style> *, *::before, *::after {margin:0; padding:0; box-sizing:border-box;} h1 {padding:20px 0;} h2 {padding-bottom:20px;} li {list-style:none;} .container {max-width:1000px; margin:0 auto; padding:0 20px; background-color:#f1f1f1;} .wrap {padding:40px; border:1px solid #888;} .wrap + .wrap {margin-top:50px;} .btn-list {display:flex; justify-content:space-between; gap:20px; width:100%; padding:20px; background-color:dodgerblue;} .btn-list li {width:calc(100% / 3);} .btn-list__item {width:100%; padding:10px;} .btn-list__item.-active {background-color:darkkhaki;} </style> </head> <body> <div class="container"> <h1>스크립트 연습</h1> <section class="wrap btn-wrap"> <h2>버튼 연습</h2> <ul class="btn-list"> <!-- <li class="asdf"><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> --> </ul> </section> <script> window.addEventListener('DOMContentLoaded', initHandler) function initHandler() { buttonListHandler(); } function buttonListHandler() { const btnWrap = document.querySelector('.btn-wrap'); const btnList = document.querySelector('.btn-list'); let currentItem = null; function clickHandler(el) { let elem = el.target; while (!elem.classList.contains('btn-list__item')){ elem = elem.parentNode; // console.log(elem) if(elem.nodeName === 'BODY'){ elem = null; return; } } if(currentItem){ currentItem.classList.remove('-active'); } if(elem.classList.contains('btn-list__item')){ elem.classList.add('-active'); currentItem = elem; } console.log(elem); } btnWrap.addEventListener('click', ()=> { const htmlStr = ` <li><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> `; btnList.innerHTML = htmlStr; }) btnWrap.addEventListener('click', clickHandler); } </script> </div> </body> </html>
-
미해결인터랙티브 웹 개발 제대로 시작하기
rotateY()에서 deg에 따른 차이
오른쪽 벽에서 transform을아래와 같이 설정하면 브라우저를 통해 보여지는 길이가 다릅니다. 이유가 뭘까요?transform: rotateY(-90deg) translateZ(400vw);
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?
imac에서 mesh의 크기를 원하는 크기로 맞춰놓았습니다.그런데 일반 노트북이나 다른 모니터를 이용해서 작업할려고 보니까 imac에서 맞춰놓은 mesh의 크기값이 다르게 보이는 이유가 뭔가요?
-
미해결애플 웹사이트 인터랙션 클론!
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
다중요소 제어시 질문드립니다.
vs코드에서 코드를 입력하고 확인을 해보면 강사님 영상처럼 자연스럽지가 않고 ....gsap.to('.box',{y:-200, stagger:0.5});예를 들어 위에처럼 소스 입력하면 5개의 컬러박스가 있으면 강사님 영상에서는 첫번째것부터 차례대로 stagger가 되는데요, 근데 제가 확인을 할땐 첫번째 박스는 이미 위에 올라가있는 상태고 2번째거 올라가는걸로 확인이 됩니다. 아래 비슷한 질문이 있어서 함수로도 해보고 duration 을 해봐도 동일해서....
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout 모바일 터치
강의 내용에선 fullpage.js 대신 직접 gsap을 활용해서 원페이지 형식을 만드는 방법을 알려주셨는데 물론 fullpage보다 직접 gsap으로 구현시 원하는 기능을 커스텀하기는 좋지만 모바일 환경에서(터치관련해서) 대응하기 쉽게 fullpage를 사용해는 경우가 많아서 혹시 강의에서는 원페이지 관련해서 터치 이벤트에 대한 내용이 없어서 따로 사용하시는 방법이 있으신가요?모바일에서 터치 드래그시 일정부분 섹션이 따라서 스크롤 되다가 터치를 놓은 시점에서 얼만큼 비율을 넘기는지에 따라 원래섹션으로 아니면 다음섹션으로 가는 기능을 추가해야하는데 gsap기능을 혼합해서 사용시 onLeave시 충돌이 생길것 같아서.. 물론 직접 만들면 되지만 혹시 참고할만한 예시코드가 있으신가요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
Vue.js 적용 방법
안녕하세요. 강의 정말 재밌게 보았습니다 :)강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다.js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..?😥😥
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
live server와 localhost:8080
언제는 live server로 실행하고 언제는 http://localhost:8080 으로 실행하는데 차이가 뭘까요??
