.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 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요이것도 딱 맞게 조정할 수 있는 방법이 있나요?

안녕하세요!강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요아래 순서로 했는데 홈페이지 메인화면에서Blocked request. This host ("5d39-218-159-221-155.ngrok-free.app") is not allowed.To allow this host, add "5d39-218-159-221-155.ngrok-free.app" to server.allowedHosts in vite.config.js.에러가 뜨는데요vite.config.js 파일 수정을 해야되나요? 프론트, 백앤드 서버 실행cmd 창에서 ngrok http 5173 입력index.js 파일에서 아래와 같이 수정 app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, })); ngrok 에러는 아래와 같아요 08:36:45.923 KST GET /favicon.ico 403 Forbidden

IntelliJ 도 현재 최신버전으로 설치했는데 강의 버전에 맞춰 설치해야 하는지요?

이해가 어려운 부분이 있는데요.이 실습에 header main 같은 시맨틱 태그를 사용하지 않은 이유는 웹 페이지 문서같이 최적화를 위한 구조가 필요한게 아니라 오직 시각적인 UI를 만드는게 목표라서 그런건가요?

강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요.혹시 왜그런지 알 수 있을까요?

안녕하세요! 강사님!그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다. <div class="container mx-auto"> <div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12"> <div class="col-span-4"> a </div> <div class="col-span-4"> b </div> <div class="col-span-4"> c </div></div></div> 이런식으로 각 섹션마다 container mx-auto로 컨테이너를 생성해주고 내부 row를 grid-cols로 그리드화하고 그리드 레이아웃에 맞게 컬럼들을 확보해서 하는 방식은 실제로는 잘 사용되지 않는 방법일까요 ?! 여러 군데를 찾아보아도 실제 grid를 사용하는 곳은 카드 UI들을 동일한 간격으로 배치하는 구조로만 사용하더라구요!

크루알라모드 강의수강 했는데자료 다운 받아보니 안에 내용이 없습니다자료요청 드려용rkgml6255@naver.com

 개인적으로 스프링 과정을 기다리고있습니다. 자바는 학원에서 어느정도했기에.... 스프링과정 출시 예정일이 궁금합니다. 이커리큘럼에 남은 단계가 2개맞지요?? 스프링과 스프링 포토폴리오 과정 이렇게 2개 예상되는데.... 둘다 출시예정시기즘 알수있을까요?