172만명의 커뮤니티!! 함께 토론해봐요.
미해결
애플 웹사이트 인터랙션 클론!
혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다
해결됨
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
코드로보시면 간단합니다. 왠만한건 다돌아가기 때문에 해석할 필요는 없으실겁니다. 테일윈드 backgroundImage 를 단축어로설정하여 bg-sky2 를사용하면 사진이 불러와집니다. 모든것이 정상 작동잘됍니다. 아래는 제가 작성한 코드중 일부분입니다. <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> 이때 absolute 를 사용하였을떄 bg-sky2 이미지가 안보이게됍니다. 일부분 버그인줄 알았습니다. 그래서 다른 백그라운드 색상을 바꾸어보았습니다. bg-sky2 ==>(교체) bg-red-400 동일하게 안보입니다. 하지만 absolute 를 사용하지 않으면 4개가 스택처럼 쌓이지만 정상적이게 원하는퍼 센테이지에 올떄 없어지고 생성됍니다. 고민중 이미지로 만들었는데 정상작동 하였습니다.하지만 저는 backgroundImage 로넣는것이 필터다 backgroundFixed 등 여러가지 활용이 된다고 생각하여 질문드립니다. <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> 요약 absolute을 사용하면 다돌아가던것이 왜인지 안돌아갑니다. 개발환경은 next.js tailwind 입니다.(취업못하고 공부용입니다.) 전체코드는 다음과같습니다 "use client"; import React, { useRef, useEffect, useState } from "react"; import motion_sky1 from "@/../../public/images2/motion_sky1.gif"; function Page() { const [scrollPercent, setScrollPercent] = useState(0); const scrollBody = useRef(null); console.log(scrollPercent); useEffect(() => { const handleScroll = () => { const scrollRealHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollTop = window.scrollY; const percentScroll = Math.round((scrollTop / scrollRealHeight) * 100); setScrollPercent(percentScroll); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <div ref={scrollBody} className="relative left-0 top-0 h-6000 w-full "> <div>내용</div> {/* <img className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-black transition-opacity duration-500 `} src="/images2/motion_sky1.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-teal-500 transition-opacity duration-500`} src="/images2/motion_sky2.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} src="/images2/motion_sky3.gif" alt="motion_moon" /> <img className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} src="/images2/motion_sky4.gif" alt="motion_moon" /> */} <div className={`${ scrollPercent < 25 ? "opacity-100 " : "opacity-0 " }block absolute Fixed z-50 h-full bg-sky1 transition-opacity duration-500 `} ></div> <div className={`${ scrollPercent >= 25 && scrollPercent < 50 ? "opacity-100 " : "opacity-0 " } block absolute h-full bg-sky2 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 50 && scrollPercent < 75 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-red-400 transition-opacity duration-500`} ></div> <div className={`${ scrollPercent >= 75 && scrollPercent < 102 ? "opacity-100 " : "opacity-0 " }block absolute h-full bg-blue-500 transition-opacity duration-500`} ></div> <div className="motion_ggang"> <figure className="ch_body"> {/* 몸 */} <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_body2.png" alt="motion_body2" /> </figure> {/* 손 */} <figure className="ch_hand_right"> <img className="fixed h-40 w-32 top-12 left-7" src="/images2/motion_hand_right.png" alt="motion_hand_right" /> </figure> </div> {/* 달 */} <figure className="motion_moon"> <img className="fixed h-40 w-32 top-12 right-3" src="/images2/motion_moon.png" alt="motion_moon" /> </figure> </div> ); } export default Page;
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다. 안녕하세요 강사님~ 제공해준 수험자 이미지에서 슬라이드 이미지 포토샵 연습하고있는데요..! 새 파일을 만들어서 그 위에 덮어씌워서 크기를 맞추는걸로 아는데 이미지가 짤려도 상관없는건가요 ?? 안짤리게 맞추려다보니까 찌그러져서요...아래 이미지 처럼 짤려도되는걸까요 ?? 아니면 이런식으로 해야하나요 ??
해결됨
[코드캠프] 시작은 프리캠프
이런식으로 코드가 보이지 않습니다. 혹시 뭔가 잘못 가입을 했거나 잘못 들어간걸까요?
미해결
처음 만난 리액트(React)
결과가 이렇게 나오는데 뭐가 잘못된걸까요?
미해결
웹 애니메이션의 새로운 표준, Web Animations API
안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?! https://github.com/flackr/scroll-timeline/issues/64
미해결
인터랙티브 웹 개발 제대로 시작하기
이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });
미해결
웹 애니메이션의 새로운 표준, Web Animations API
1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
안녕하세요 이수업을 듣고 만든 사이트를 도메인 구매하여 개인포트폴리오 홈페이지에 올렸는데 이렇게 주요 메인부분 내용이 전혀 담기지 않아서 질문 올립니다 그외에 따로 만든 것은 모두 잘 실행되는데 저것만 저렇게 실행되네요 혹시 파일 손상인가 싶어서 파일 그대로 다시 옮겨봤는데 똑같은 증상이네요 이유를 모르겠습니다.. 도메인주소로 접속이 아닌 go live로 실행하면 잘켜지는데 도메인경우로 접속하면 저렇게 나옵니다...
미해결
자바스크립트 : 기초부터 실전까지 올인원
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 developer tool 클릭했는데 안떠요 아무 반응이 없는데 왜 그런걸가요 ㅠㅠ
미해결
한국인이 좋아하는 속도로 때려넣는 파이썬
안녕하세요 강의 수강중 python을 설치하여 git bash에서 $ pip를 입력하는 과정에서 bash: pip: command not found가 출력될 경우에는 어떤 조치를 취할 수 있을까요? 완전 처음이라 문의 남깁니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다. 요걸로 테스트 해 봅시다 <!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>
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
이번에 포트폴리오 웹사이트 작업물들을 만드려고 하는데 처음 혼자 만드려고 하니 시작을 어떻게 해야 하나 막막합니다. 혹시 어떤식으로 시작하는지 좋은 방법이 있는지 궁금합니다. 아니면 포트폴리오 웹사이트 만드는 강의 추천도 해주시면 감사하겠습니다
해결됨
[코드캠프] 강력한 CSS
안녕하세요, ㅠㅠ 간단한 부분인데 왜 미디어 쿼리가 적용이 안 되는 것일까요..? 설정이 잘못되어 있는 것일까요?
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
안녕하세요 제 개인포트폴리오 폴더안에 따로 만든 포트폴리오까지 전부해서 3gb가 조금 넘게 나오는데 비즈니스 이상을 구매해야할까요? 동영상은 따로 없는데 node관련 파일떄문인지 용량이 높게 나왔습니다
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요? 궁금해서 질문해봅니다! 🤔
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
Q. FOUC에 대한 보완으로 autoAlpha 를 사용하면 효율적 인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다. 이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
본 강의 중 로그가 나오지 않는 이슈에 관하여 경로 설정에 문제가 있다고 하셨고, grab_market_web/src/App.js의 내용 중 로그 src의 경로를 "./imgages/icons/log.png"에서 -> "/imgages/icons/log.png"으로 변경하라고 하였습니다. 작동은 잘 되는데, 작동 원리가 궁금합니다. / 절대값 root경로의 시작은 어디로 설정되어 있나요? 이전에는 메인 화면에서는 ./ 상대 경로 중, 현재 경로로 설정되어 있었는데 잘 작동했던 이유도 궁금합니다. App.js파일의 내용이니까 App.js가 존재하는 grab_market_web/src 디렉토리가 현재 경로라고 이해되는데, 그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어 grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며 / 절대 경로로 설정시에도 grab_market_web/public/images가 호출되는 것이 잘 이해가 되지 않습니다.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
그 포토샵으로 이미지 사이즈 조절할때 a,b,c유형은 픽셀이 정해져있어서 문제가 없긴한데 d,e유형에선 가로 혹은 세로 사이즈가 100%다보니 임의로 지정한 상태에서 늘리면 되긴할텐데 d,e유형에서 이미지를 적당히 얼마정도로 세팅하면 좋을까요..??
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 자료이메일 요청에 대한 답변이 없어서 두번 요청드렸는데요! 드라이브 승인이 된걸까요? 인프런아이디 el입니다.
