묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨애플 웹사이트 인터랙션 클론!
안녕하세요 '현재 활성시킬 씬 결정하기' 강좌편에서 문의가 있습니다.
안녕하세요 다름이 아니라 해당 '현재 활성시킬 씬 결정하기' 에서 코드를 입력하고 있는데 원하는 위치 스크롤 보다 400픽셀 앞에서 currentScene 변수가 변경하고 있어서 질문 드립니다. 아무리 확인해도 문제가 되는 부분이 없는거 같은데 확인 부탁드립니다. index. html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>AirMug Pro</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="css/main.css" /> </head> <body id=""> <div class="contaner"> <nav class="global-nav"> <div class="global-nav-links"> <a href="#" class="global-nav-item">Room</a> <a href="#" class="global-nav-item">Ideas</a> <a href="#" class="global-nav-item">Stores</a> <a href="#" class="global-nav-item">Contact</a> </div> </nav> <nav class="local-nav"> <div class="local-nav-links"> <a href="#" class="product-name">AirMug Pro</a> <a href="#">개요</a> <a href="#">제품사양</a> <a href="#">구입하기</a> </div> </nav> <section class="scroll-section" id="scroll-section-0"> <h1>AirMug Pro</h1> <div class="sticky-elem main-message"> <p>온전히 빠져들게 하는<br />최고급 세라믹</p> </div> <div class="sticky-elem main-message"> <p>주변 맛을 느끼게 해주는<br />주변 맛 허용 모드</p> </div> <div class="sticky-elem main-message"> <p>온중일 편안한<br />맞춤형 손잡이</p> </div> <div class="sticky-elem main-message"> <p>새롭게 입가를<br />찾아온 매혹</p> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="description"> <strong> 보통 스크롤 영역 </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, soluta quia? Soluta repellat consequatur aliquam sit deleniti atque qui nemo, molestiae, veritatis repudiandae, earum tempora mollitia dolores? Ipsa a ea ab nostrum ullam beatae, natus, nulla recusandae praesentium corporis magni, atque impedit error aliquid consequatur. Culpa cupiditate velit molestias sapiente! Aspernatur molestiae facilis repudiandae, fugiat nulla, hic culpa esse impedit eos, quam sapiente? Laboriosam ut perferendis atque velit sint, non mollitia? Provident cum obcaecati ex illo asperiores accusantium harum voluptas doloremque inventore possimus eum tenetur tempora ipsam debitis natus nulla similique veritatis recusandae, voluptatum accusamus quia adipisci perspiciatis. Itaque architecto eius veritatis rem quae facere illo ipsum error, explicabo nesciunt eos quibusdam dolorem magni impedit, magnam amet voluptates fugit assumenda deserunt consequuntur numquam. Quasi hic nisi molestias enim fugiat vel eveniet modi quisquam suscipit? Recusandae voluptates expedita exercitationem excepturi velit repellat error similique porro deleniti architecto tenetur quaerat corporis culpa, libero, neque facilis ullam eius reiciendis itaque et fugiat eum! Magnam totam at commodi nesciunt, quae dolores, praesentium labore, maxime perspiciatis iure omnis sed assumenda laborum harum. Dolor, voluptatem id. Eos qui, quidem assumenda sit asperiores quia beatae consequuntur necessitatibus dignissimos architecto, aspernatur facere ut porro cum repellat. Tempora, minima? </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem main-message"> <p> <small> 편안한 촉감 </small> 입과 하나 되다 </p> </div> <div class="sticky-elem desc-message"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"></div> </div> <div class="sticky-elem desc-message"> <p>디자인 앤 퀄리티 오브 스웨덴,<br />메이드 인 차이나</p> <div class="pin"></div> </div> </section> <section class="scroll-section" id="scroll-section-3"> <p class="mid-message"> <strong>Retina 머그</strong><br /> 아이디어를 광활하게 펼칠<br /> 아름답고 부드러운 음료 공간. </p> <!-- <canvas class="image-blend-canvas" width="1920" height="1080"></canvas> --> <p class="canvas-caption"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at fuga quae perspiciatis veniam impedit et, ratione est optio porro. Incidunt aperiam nemo voluptas odit quisquam harum in mollitia. Incidunt minima iusto in corporis, dolores velit. Autem, sit dolorum inventore a rerum distinctio vero illo magni possimus temporibus dolores neque adipisci, repudiandae repellat. Ducimus accusamus similique quas earum laborum. Autem tempora repellendus asperiores illum ex! Velit ea corporis odit? Ea, incidunt delectus. Sapiente rerum neque error deleniti quis, et, quibusdam, est autem voluptate rem voluptas. Ratione soluta similique harum nihil vel. Quas inventore perferendis iusto explicabo animi eos ratione obcaecati. </p> </section> <footer class="footer"> 2020, 1분코딩 </footer> <script src="js/main.js"></script> </div> </body> </html> main.js (() => { let yOffset = 0; // window.pageYOffset 대신 쓸 변수 let prevScrollHeight = 0; // 현재 스크롤 위치(yOffSet)보다 이전에 위치한 스킄롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; // 현재 활성화된 (눈앞에 보고 있는) 씬(scroll-section) const sceneInfo = [ { // 0 type: "sticky", heightNum: 5, // 브라우저 높이의 5배로 scrollHeght 세팅 scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), }, }, { // 1 type: "normal", heightNum: 5, // 브라우저 높이의 5배로 scrollHeght 세팅 scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-1"), }, }, { // 2 type: "sticky", heightNum: 5, // 브라우저 높이의 5배로 scrollHeght 세팅 scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-2"), }, }, { // 3 type: "sticky", heightNum: 5, // 브라우저 높이의 5배로 scrollHeght 세팅 scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-3"), }, }, ]; /** * 각 씬 마다의 섹션 높이값 지정 */ function setLayout() { // 각 스크롤 섹션의 높이 저장 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[ i ].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } } /** * 현재 보고 있는 화면에서 스크롤 높이 구하기 */ function scrollLoop() { prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { currentScene++; } if (yOffset < prevScrollHeight) { if (currentScene === 0) { // 브라우저 바운스 효과로 인한 마이너스가 되는것을 방지 (모바일) return; } currentScene--; } console.log(currentScene); } window.addEventListener("resize", setLayout); window.addEventListener("scroll", () => { yOffset = window.pageYOffset; scrollLoop(); }); setLayout(); })(); main.css @charset 'utf-8'; html { font-family: "Noto Sans KR", sans-serif; font-size: 14px; } body { overflow-x: hidden; color: rgb(29, 29, 31); letter-spacing: -0.05em; background: white; margin: 0; } p { line-height: 1.6; } a { color: rgb(29, 29, 31); text-decoration: none; } .global-nav { position: absolute; top: 0; left: 0; width: 100%; height: 44px; padding: 0 1rem; } .local-nav { position: absolute; top: 45px; /* .global-nav 보다 1px 위에 */ left: 0; width: 100%; height: 52px; border-bottom: 1px solid #ddd; } .global-nav-links, .local-nav-links { display: flex; align-items: center; max-width: 1000px; height: 100%; margin: 0 auto; } .local-nav-links a:not(.product-name) { margin-left: 2em; } .local-nav-links .product-name { margin-right: auto; font-size: 1.4rem; font-weight: bold; } .local-nav-links a { font-size: 0.8rem; } .global-nav-links { justify-content: space-between; } /* */ .scroll-section { position: relative; border: 3px solid red; padding-top: 50vh; } #scroll-section-0 h1 { position: relative; font-size: 4rem; text-align: center; } .main-message { display: flex; align-items: center; justify-content: center; margin: 5px 0; height: 3em; font-size: 2.5rem; } .main-message p { font-weight: bold; text-align: center; line-height: 1.2; } /* */ .main-message small { display: block; margin-bottom: 0.5em; font-size: 1.2rem; } #scroll-section-2 .main-message { font-size: 3.5rem; } .description { font-size: 2rem; max-width: 1000px; padding: 0 1rem; font-size: 1.2rem; color: #888; } .description strong { float: left; margin-right: 0.2em; font-size: 3rem; color: rgb(29, 29, 31); } .desc-message { font-weight: bold; width: 50%; } .pin { width: 1px; height: 100px; background-color: rgb(29, 29, 31); } .mid-message { padding: 0 1rem; font-size: 2rem; color: #888; max-width: 1000px; margin: 0 auto; } .mid-message strong { color: rgb(29, 29, 31); } .canvas-caption { color: #888; padding: 0 1rem; font-size: 1.2rem; max-width: 1000px; margin: 0 auto; } .footer { display: flex; align-items: center; justify-content: center; height: 7rem; color: white; background-color: darkorange; } @media (min-width: 1024px) { #scroll-section-0 h1 { font-size: 9vw; } .main-message { font-size: 4vw; } .description { margin: 0 auto; } .description strong { font-size: 6rem; } #scroll-section-2 .main-message { font-size: 6vw; } .main-message small { font-size: 1.5vw; } .desc-message { width: 20%; } .mid-message { font-size: 4vw; } .canvas-caption { font-size: 2rem; } } /* */ .sticky-elem { display: none; position: fixed; top: 0; left: 0; width: 100%; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem { display: block; }
-
미해결React로 NodeBird SNS 만들기
리뉴얼 강좌 쿠폰
조현영의 react nodebird에 새로운 리뉴얼 강의가 출시했는데 제가 알기론 새로운 강의가 출실할시 기존에 react nodebird강의가 있는 분은 50% 할인 쿠폰이 있다고 들었습니다. 하지만 쿠폰은 오지가 않아 저만 못받은것인지 아니면 받는데 시간이 걸리는지 잘 모르겠습니다. 확인 부탁드립니다.
-
미해결함수형 프로그래밍과 JavaScript ES6+
강의 내용 정리
안녕하세요 좋은 강의 감사드립니다. 강의를 듣고 개인적으로 정리한 내용을 깃헙이나 블로그에 올려도 괜찮을까요??
-
미해결파이썬 무료 강의 (활용편2) - GUI 프로그래밍 (4시간)
강의를 통해 많은 도움을 받았습니다.
안녕하세요 나도코딩 강좌를 며칠간 저녁 시간을 쪼개어 처음부터 끝까지 보고 따라하면서 정말 많은 도움을 받았습니다. 사실 이미지 합치는 프로그램을 따라하면서 궁금한 점이 있어서 이렇게 게시판에 글을 올리게 되었습니다. 질문 내용은 다음과 같습니다. 이미지 리사이징을 한 후에 높이가 2500 이상이 될 경우에는 더이상 이미지를 합치지 않고 다음 파일명으로 저장을 하고 싶을 때에는 어떻게 하면 좋을까요? 예를들어 이미지 리사이징을 한 후에 파일의 total_height가 10000일 경우에 desk 001.jpg, desk 002.jpg, desk 003.jpg, desk 004.jpg 등으로 가능하게 하려면 코딩을 어떻게 하면 좋을까요? 오늘 하루종일 여기저기 살펴보고 그랬는데 잘 모르겠어서 이렇게 문의를 드리게 되었습니다. 감사합니다.
-
해결됨스프링 웹 MVC
파일 다운로드 OutputStream / ResponseEntity 차이 질문입니다
안녕하세요 기선님, 항상 좋은 강의 감사드립니다. 강의를 들으면서 오늘 처음으로 궁금한 점이 생겨 질문 드립니다. 저는 강의를 수강하기 전에 파일 다운로드 기능을 구현할 때 아래와 같은 형식으로 Stream 관련 api을 사용하여 다운로드 기능을 구현했었는데요. 아래는 강의를 들으면서 한 코드입니다. 강의를 들으며 오늘 처음 ResponseEntity 를 사용해보면서 문득 궁금점이 생겨, 혼자 예제를 만들어 테스트를 해봤습니다. 혹시 위 두 방식 사이에서 차이점이 있는지 궁금합니다. Stream을 통해 다운로드를 구현하는 방식과 ResponseEntity Body에 File Resource 를 넣어 반환하는 방식이 결과적으로 파일 다운로드하는 것은 같고, 단지 구현하는 방식의 차이일까요?
-
미해결누구나 따라하면서 배우는 JSP 커뮤니티 게시판 만들기
user.getUserID() 질문이요
loginAction.jsp 에 있는 int result = userDAO.login(user.getUserID(), user.getUserPassword()); // 여기서 user.getUserID() 한거에서 user. 는 어디에 있는 user인가요? 설마 user는 user패지키 이름 과 일치해야 하고user패키지에 있는 getUserID() 메서드를 실행 시키는거라서 user.getUserID() 라고 적은 건가요?
-
미해결[백문이불여일타] 데이터 분석을 위한 고급 SQL
between 궁금한 점이 있습니다.
between A and B 라면 A <= X <= B 일까요? WHERE 절에서 쓸 때와 JOIN 절에서 쓸 때 모두 A <= X <= B 인지 궁금합니다. 감사합니다!
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
강의 ppt
선생님 안녕하세요, 강의 ppt는 어디서 받아볼 수 있나요??
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진
UI 자동화 #1 강의 부분에서 이해 안되는 부분이 있어 질문드립니다
안녕하세요 UI 자동화 #1 강의 부분을 듣다 이해가 안되는 부분이 있어 질문드립니다 1. UI 자동화 #1 강의 10:03초 부분 33번째줄 _objects.Add(typeof(T), objects); 부분이 있는데 여기서 T는 Button 또는 Text 일텐데 Button, Text 그 자체가 타입일텐데 왜 10:03초 부분에서는 typeof(T)를 했는지 이해가 안됩니다 (타입의 타입??) Button, Text는 타입이 아닌가요? 만약 Button, Text가 타입이 아니라면 Button과 Text의 타입이 뭔가요? Component 인가요?? 2. UI 자동화 #1 강의 19:14초 부분을 보면 if (reculsive == false) { for(int i = 0; i < go.transform.childCount; i++) { Transform transform = go.transform.GetChild(i); if(string.IsNullOrEmpty(name) || transform.name == name) { T component = transform.GetComponent<T>(); if (component != null) return component; } } } else { foreach(T component in go.GetComponentsInChildren<T>()) { if (string.IsNullOrEmpty(name) || component.name == name) return component; } } 이렇게 코드를 작성하셨는데 이해가 안되는 부분이 reculsive == true 일때 component가 null인지 체크해서 component가 null이 아니라면 그 component를 리턴하도록 하였는데 reculsive == false 일때는 component가 null인지를 체크 안하셨는지 이해가 안됩니다 왜 reculsive == false 일때는 component가 null인지를 체크 안해도 되는지 그 이유가 궁금합니다
-
해결됨스프링 시큐리티
다중 보안 설정
안녕하세요. 강의 잘 보고 있습니다~ 이번 강의 보다가 궁금한게 있는데 실제로도 다중 보안 설정 방식을 자주 사용하는지와 사용한다면 어떤 경우에 쓰여지는지가 궁금합니다.
-
미해결자바 프로그래밍 입문 강좌 (renew ver.) - 초보부터 개발자 취업까지!!
result = 0 에서 0의 의미
조건 연산자 부분에서 0을 초기화한다고 하셔서 제가 0이외의 아무 숫자나 넣었는데도 결과값은 똑같았습니다. 0으로 초기화해야하는 특별한 이유가 있을까요?
-
미해결파이썬으로 영화 예매 오픈 알리미 만들기
span.imax
안녕하세요. 그 사이 cgv 페이지 구조가 바뀌었는지 그냥 접속했을때와 아이프레임 소스 주소 따서 접속했을때 보여지는 페이지가 다릅니다. http://www.cgv.co.kr/theaters/?areacode=01&theaterCode=0013&date=20200718 http://www.cgv.co.kr/common/showtimes/iframeTheater.aspx?areacode=01&theatercode=0013&date=20200718 아이프레임 소스 주소로 연결되는 페이지에는 imax관이 포함되어 있지 않아서 강의를 따라갈수가 없네요. 페이지 구조가 어떻게 바뀐건지 잘 모르겠습니다.
-
미해결홍정모의 따라하며 배우는 C++
9:40 throw custom exception
바로 이전강의에서 클래스를 throw시 , catch를 부모클래스로 하면 객체잘림이 발생하여 , 자식클래스의 오버라이딩된 함수가 구현되지 않고 부모의 함수가 구현되는 모습을 볼 수 있었습니다. 그런데 여기서는 throw Custom exception을 하고 아래에서 catch(std::exception &exception) 즉 부모클래스로 받는데도 exception.what()을 하면 자식클래스인 Custom exception.what()이 실행되는 모습을 볼 수있습니다. 왜그런가요?
-
해결됨프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
강의자료 에러 찾기
강의자료 23번줄 print(type(var) 끝에 괄호 하나 없어서 에러납니다. 강의 잘 보고 있어요~ 이제 리스트 들어가는데 어려워 지네요.
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
Database
디비 생성 순서 반드시 새로운 DB를 생성할때는 터미널에서 ./h2.sh 를 다시 실행하셔야합니다. Server 로 JDBC URL : jdbc:h2:~/jpashop 로 연결하여 DB를 생성한다. (초기 딱 1번만 ) Server 로 JDBC URL : jdbc:h2:tcp://localhost/~/jpashop 로 연결하여 작업한다. 여기에서 jpashop 은 custom db name이다. 정리해보았습니다.
-
미해결인터랙티브 웹 개발 제대로 시작하기
궁금한점이 아직 지금 14회까지 봤는데요.
이건 너무 많은 내용이라서 그냥 선생님이 주신 CSS를 복붙하고 그냥 설명을 들으라는 건가요...? 아니면 혹시 뒤에가서 처음부터 적어내려가면서 쓰는 걸 보여주시는건가요..? 사실 11강까지는 괜찮았는데 12강부터는 좀 혼란스러워서요...
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
데이터를 유지 하려면
안녕하세요. 방금 막 완강을 마친 학생입니다. 우선 수업 정말 잘들었습니다. jpa와 함께, 지금까지 배웠던 것을 쭉 다시 복습하고, 2편으로 넘어갈 생각입니다. 이번 질문은 다름이 아니라, 지금 서버를 재시작하면 기존의 데이터가 삭제되고 데이터가 새로 쓰이잖습니까. 이게 application.yml의 ddl-auto:create 때문인지 그래서 테이블을 서버를 run할 때마다 새로 생성하기 때문인지, 아니라면 기존 데이터를 db에 유지하는 방법을 알고 싶습니다. 더 좋은 질문을 가져올 수 있도록 복습하겠습니다. 감사합니다.
-
미해결실무자가 알려주는 Git - 입문편
현업에서 머지후에 브랜치는 어떻게 관리 되나요?
안녕하세요, 깃 강의를 잘 듣고 있는 김선만 수강생 입니다. 예를 들어 develop 브런치에서 A라는 기능을 추가할 일이 생겨 "feature/A기능추가" 라는 브런치를 생성하고 체크아웃하여 기능을 추가하였습니다. 기능 추가한 후 "feature/A기능추가" 라는 브런치를 develop 브런치로 머지를 하였습니다. 머지한 후에는 feature/A기능추가 브런치는 기능개발이 끝났음에도 로컬에도 리모트에도 동시에 존재하는 상황인데요. 브런치를 둘다 삭제하는 건지, 이력을 남기기 위하여 남겨놓을지 의문이 들었습니다. 어떻게 생각하시는지 답변 부탁드려도 될까요? 감사합니다!
-
미해결C 프로그래밍 - 입문부터 게임 개발까지
띄어쓰기
문자열을 입력합니다 쓰실 때 띄어쓰기를 안쓰셔서 써서 해봤는데 띄어쓰기 이후로는 출력이 안되는데 띄어쓰기는 특별한 무언가가 있는건가요?
-
미해결파이썬 데이터시각화 분석 실전 프로젝트
수업 순서가 바뀌어있네요
데이터 추가와 선택의 강의 순서가 바뀌어있습니다. 수정해주시면 좋을것 같습니다.그리고 참고로 1강 강의 소개 영상에도 2강인 환경 설정이 올라가 있습니다.
