강의를 만들어주셔서 감사합니다. 몇가지 질문이 있습니다. 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; } }
<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=
안녕하세요 강사님 강의가 거의 대부분 이해가 될 듯 말듯합니다. 강의코드를 다 잘 아시니까, 이게 이런거고 저게저런거다라고 쭈욱 빠르게 얘기해주시는데, 이해시키기보단 강사님이 아시는걸 설명하시는 느낌이에요. 근데, 반쯤 이해되는 상태이고, 코드 따라 안써봐도 되겠죠? 커서로 짜주는 코드를 해석하는 능력을 기르는게 중요하다고 하셨으니까요..!! 일단 정주행해도 될지, 아니면 제가 방향을 잘못잡고있는지 궁금해서 질문남겼습니다!! 열의있게 강의해주셔서 감사합니다.
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 처럼 언더스코어 하나만 사용했을때와 다른 어떤 이유나 숨겨진 미세팁 같은게 있을까요? 아니면 딱히 이유 없이 경력이 쌓이면서 습관화 돼서 사용하시는 관례인건가요?
