강의를 만들어주셔서 감사합니다.몇가지 질문이 있습니다.Frontend와 Backend폴더를 만든이유가 협업과 소스코드관리를 위한것이라고 생각합니다.그런데 node-modules를 Frontend와 Backend에 각각 설치하신 이유가 있으실까요?company-website에 설치해서 두곳다 이용하는방법도 있을것같은데 Frontend와 Backend를 따로 설치하신이유가 궁금합니다.깃허브에는 node-modules가 저장되게 하지 않았는데요그러면 현재 사용하는 노트북이 아닌 다른 노트북이나 데스크톱에서 현재 개발한것을 이어서하고싶을 경우 Ch0-3과Ch0-4의 설치를 다시 해주면되나요?본강의를 듣고 저만의 웹페이지를 만드는게 목표인데 react에 대해 찾아보다가 Create React App(CRA)로 만드는법과 Vite, Next.js로 만드는방법이 있었습니다. 이중 Vite를 고른 이유가 있을까요?빠르다는 장점으로 선택하신건가요? 선택이유가 궁금합니다.

섹션3에서 simplyscroll Plugin을 사용해서 사진들이 사선을 흘러가는 갤러리 부분에서 질문드립니다.수업자료로 받은 플러그인도 연결하고 소스도 그래도 넣었지만 요소검사를 했을때 아래 클래스가 붙어있어야 하는데 전혀 붙지가 않아서요,갭처한 코드 이미지를 보고 그대로 몇번을 다시 해봤지만 되질않아서요그 부분까지만 완성한 파일을 받아볼수 있을지요?kwanggony@naver.com.simply-scroll .simply-scroll-clip{}

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.이제 못 듣게 된건가요?

노션에 있는 소스코드 다운로드 링크의 접속이 안됩니다. 구글과 네이버 두개의 링크로 접속했을때의 사진을 첨부해드립니다.혹시 코드를 받을 다른방법이있을까요? 깃허브를 알려주시면 거기서라도 다운로드하겠습니다

안녕하세요 선생님. 강의 정말 잘 듣고 있습니다. 다름이 아니라, 가로 스크롤 반응형 제작중갤러리 형태를 세로 방향으로 바꾸는 과정에서 scrollTrigger 를 없애기 위해서 li 를 padding: 0; 으로 바꿔주면 된다고 하셨는데, 저는 적용이 되지 않아 반응형에서도 갤러리들이 가로방향으로 스크롤이 되는 문제가 생깁니다.. 도저히 이유를 모르겠어서 질문 올립니다감사합니다..work { position: relative; height: 100vh; border: 2px solid tomato; } .work ul { display: flex; padding: 3% 30%; box-sizing: border-box; } .work ul li { width: 600px; padding: 100px; box-sizing: border-box; flex-shrink: 0 !important; } @media screen and (max-width: 1024px) { .work { height: auto; } .work ul { padding: 0% 5%; justify-content: space-between; flex-wrap: wrap; } .work ul li { padding: 0; width: 45%; margin-top: 150px; } }

안녕하세요 선생님. 여러번 똑같이 따라 쳐보았으나..markers: true 여도 페이지에 scrollTrigger 표시가 되지 않고, 가로 스크롤이 동작하지 않습니다. console 창에 다른 오류 사항은 뜨지 않습니다. 무엇이 문제인지 전혀 모르겠어서 질문 남깁니다..$(function () { // GSAP Plugin gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { // horizontal scroll let list = gsap.utils.toArray(".work ul li"); let scrollTween = gsap.to(list, { xPercent: -100 * (list.length - 1), ease: "none", scrollTrigger: { trigger: ".work", pin: true, scrub: 1, start: "center center", end: "300%", markers: true, }, }); }, }); });

<header> <div class="header-logo"></div> <div class="navi"></div></header>header 밑에 있는 div에 공통적으로 들어가는 속성이 있는 경우, 자식 선택자 혹은 하위 선택자를 통해 접근할 수 있는데 ① header div {}② header > div{}강사님은 ①번을 사용하시는 이유가 있으신가요?②번이 header 태그의 직계 자식 요소 중 div 태그를 선택한다고 직관적으로 알 수 있다고 보는데... 혹시 제가 모르는 이유가 있는지 궁금합니다. 참고로 유투브에서 다른 강의들도 강사님처럼 ①번을 사용합니다

.project-gallery { display: grid; grid-template-rows: 300px calc(100vh - 600px) 300px; } 100vh 뷰포트 높이로 calc를 사용하게 되면 창 높이가 작아졌을 때 레이아웃이 깨지는데 100%나 calc 가 아닌 1fr 로 사용해야하지 않을까 싶은데 맞을까요?아님 다른 해결책이 있는지도 궁금합니다.

안녕하세요$(function(){ gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ '(min-width: 1024px)': function(){ let list = gsap.utils.toArray('.work ul li'); let scrollTween = gsap.to(list, { xPercent: -100 * (list.length - 1), ease: 'none', ScrollTrigger: { trigger: '.work', pin: true, scrub:1, start: 'center center', end: '300%', markers: true, } }); } }) });현재 여기까지 작성을 하였는데 창 새로고침과 동시에 갤러리 가장 끝쪽으로 넘어가버립니다.콘솔에서는 이렇게 뜨구요,,,markers도 안 보이는 걸 보니 플러그인이 작동되지 않는 것 같은데코드를 전부 똑같이 치고 몇 번을 다시 봤는데도 전혀 안 되네요...파일 첨부를 어떻게 하는지 몰라서 제 코드 파일 다운로드 링크를 함께 올립니다.한번 확인 가능할까요?ㅜㅜhttps://bigfile.mail.naver.com/download?fid=JYbZa6JnM6mraAUjKCY9KqvdHqUmKoEmFAU/KxvqKxg/HquXFA2dFAtqaxvjF6UlazKZaztlF4U/FrpSMoUdaAMqaxI0KrtlKA+oFAb=

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문내용: checked 초기에는 선택이 되지만checked가 해제된 상태로 돌아가지 않습니다.  html <header> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <nav class="header__nav"> <ul class="header__nav-list"> <li><a href="#home" class="header__menu-link">HOME</a></li> <li><a href="#profile" class="header__menu-link">PROFILE</a></li> <li><a href="#projects" class="header__menu-link">WORKS</a></li> <li><a href="#resume" class="header__menu-link">RESUME</a></li> <li><a href="#contact" class="header__menu-link">CONTACT</a></li> </ul> </nav> <a href="#home" class="header__top-btn">TOP</a> </header>css .header__nav { position: fixed; top: 0; left: -100%; list-style: none; z-index: 1000; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } /*checked 안된상태*/input[id=trigger]:checked ~ nav.header__nav { transform: translateX(0); left:0 }input[id=trigger] { display: none; } label[for=trigger] { display: block; width: 25px; height: 24px; position: relative; cursor: pointer; } label[for=trigger] span { position: absolute; top: 0; left: 0; display: block; height: 2px; width: 100%; background: #FFD24C; transition: 0.3s; } label[for=trigger] span:nth-child(1) { top: 0; } label[for=trigger] span:nth-child(2) { top: 50%; } label[for=trigger] span:nth-child(3) { top: 100%; } /* 체크박스 선택 시 */ input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { display: none; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg); } 

./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.

안녕하세요 강사님강의가 거의 대부분 이해가 될 듯 말듯합니다.강의코드를 다 잘 아시니까, 이게 이런거고 저게저런거다라고 쭈욱 빠르게 얘기해주시는데, 이해시키기보단 강사님이 아시는걸 설명하시는 느낌이에요. 근데, 반쯤 이해되는 상태이고,코드 따라 안써봐도 되겠죠? 커서로 짜주는 코드를 해석하는 능력을 기르는게 중요하다고 하셨으니까요..!! 일단 정주행해도 될지, 아니면 제가 방향을 잘못잡고있는지 궁금해서 질문남겼습니다!!   열의있게 강의해주셔서 감사합니다.

works together에서 위 아래 padding을 다 주셨는데, top은 이해가 되는데 bottom을 지정하는 이유가 따로 있나요? .banner { padding-top: 216px; padding-bottom: 216px; background-color: #386e38; text-align: center; color: white; 만약 위 코드에서 height: 650px;처럼 세로 길이가 고정되어 있는 배너라면 padding-bottom은 필요 없을까요?

단순 호기심 질문이긴 한데요.클래스명 보면 banner__title처럼 언더스코어를 두개씩 지정하시던데, 단순히 baner_title처럼 언더스코어 하나만 사용했을때와 다른 어떤 이유나 숨겨진 미세팁 같은게 있을까요? 아니면 딱히 이유 없이 경력이 쌓이면서 습관화 돼서 사용하시는 관례인건가요? 

강사님 안녕하세요.gsap강의 소개에 있는 에이전시 합격 포트폴리오는 수강생들 각자 제작한걸까요?아니면 이번 수업중에 있는 내용일까요?너무 잘 만드셔서 참고해서 만들어보고 싶은데 정보를 얻을 수 없을까요.. 문의드립니다.

학습자료 첨부가 안되어있는것 같습니다!

다운로드가 pc에서는 안되나요?자료 녹색버튼을 클릭하면 된다고 하는데 없는데요 

깃 설치 화면과 병행으로 나오니 짤리네요.2:11 ~ 2:16 지나면서 메인클래스 부분이 모듈없음 에서 cp JH로 바뀌었는데 뭘 선택하면 되는지요? 

안녕하세요. 강의 잘 듣고 있습니다강의 중간에 로고 이미지를 교체하시는데 Header 교안에 첨부된 이미지가 없습니다어디서 확인할 수 있을까요?

안녕하세요 선생님수업 잘 듣고 있습니다.강의를 듣는 도중에 sign in 왼쪽선이랑아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요이것도 딱 맞게 조정할 수 있는 방법이 있나요?