묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결애플 웹사이트 인터랙션 클론!
#scroll-section-3 부분 질문입니다!
#scroll-section-3 부분이 나오기 전에 강의예제는sticky 에서 sticky로 넘어가잖아요근데 제가 변형시켜서 normal로 바꾸고 그안에비디오를 넣어주었습니다!근데 #scroll-section-3 부분의 패딩값때문인지너무 뒤늦게 #scroll-section-3신이 등장을 하여 여백이 너무 커서normal부분에 나오는 비디오 부분을 scrollRatio로 지정해서픽스해주고 opacity로 자연스럽게 없어지고 #scroll-section-3이 자연스럽게 나올수 있게 하였는데모바일화면에서 기기별로 뚝뚝 끊겨서 픽스가 되어버려서 scrollRatio 를 만져줘야하는지 어디부분을 손데어야 하는지 도무지 모르겠어서 질문 남깁니다!제 설명이 이상해서 그부분 소스를 올려보겠습니다!case 4: // 비디오 고정되는 부분 if (scrollRatio <= 0.37) { $('.tetest').removeClass("fix-test"); } else { $('.tetest').addClass("fix-test"); } if (scrollRatio <= 0.06) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); } if (scrollRatio <= 0.99) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); } if(scrollRatio >= 0.65) { console.log('닿기전'); const objs = sceneInfo[5].objs; const values = sceneInfo[5].values; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(values.rect1X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(values.rect2X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); } break; -------------------------------------------case 5: // #scroll-section3 console.log('닿은후'); // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요) let step = 0; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; const gradient = objs.context.createLinearGradient(0, 0, 0, 1000); let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY){ // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; console.log(values.rectStartY); values.rect1X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect2X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } //좌우 박스 크기 const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); // Add three color stops gradient.addColorStop(0, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.3, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.5, "rgba(13, 12, 17, 0.1)"); gradient.addColorStop(0.6, "rgba(13, 12, 17, 0.3)"); gradient.addColorStop(0.8, "rgba(13, 12, 17, 0.7)"); gradient.addColorStop(1, "rgba(13, 12, 17, 1)"); if (scrollRatio < values.rect1X[2].end){ step = 1; // console.log('캔버스 닿기 전'); objs.canvas.classList.remove('stickyy'); } else { step = 2; // console.log('캔버스 닿을때'); // imageBlendY: [ 0, 0, { start: 0, end: 0 }] values.blendHeight[0] = 0; values.blendHeight[1] = objs.canvas.height; values.blendHeight[2].start = values.rect1X[2].end; values.blendHeight[2].end = values.blendHeight[2].start + 0.2; const blendHeight = calcValues(values.blendHeight, currentYOffset); // Set the fill style and draw a rectangle objs.context.fillStyle = gradient; objs.context.fillRect(0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight, 0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight); objs.canvas.classList.add('stickyy'); objs.canvas.style.top =`${-(objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2}px`; if (scrollRatio > values.blendHeight[2].end){ objs.canvas.classList.remove('stickyy'); objs.canvas.style.marginTop = `${scrollHeight * 0.2}px`; } else { objs.canvas.style.marginTop = 0; } // index2 추가 코드 values.messageA_opacity_in[2].start = values.rect1X[2].end; values.messageA_opacity_in[2].end = values.blendHeight[2].start + 0.1; values.messageA_opacity_out[2].start = values.messageA_opacity_in[2].end + 0.1; values.messageA_opacity_out[2].end = values.messageA_opacity_out[2].start + 0.1; if (scrollRatio < values.messageA_opacity_in[2].end + 0.05) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); } else { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); } } // index2 추가 코드 if (scrollRatio <= values.messageA_opacity_in[2].start) { objs.messageA.style.opacity = values.messageA_opacity_in[0]; } if (scrollRatio >= values.messageA_opacity_out[2].end) { objs.messageA.style.opacity = values.messageA_opacity_out[1]; } // section-7 그라데이션 클래스 주기 if (scrollRatio <= 0.93) { $('.linear1').removeClass("linear-1"); $('.linear1').removeClass("linear1-1"); $('.tetest').removeClass("fix-test"); } else { $('.linear1').addClass("linear-1"); $('.linear1').addClass("linear1-1"); } break;
-
미해결[입문자를 위한 UE5] Part2. 언리얼 엔진 2D 게임 개발 입문
y값 다를시 충돌이 안되어 재질문..
앞전에 질문은 너무 장황하게 해서 답변을 못해주신거같아서 다시 질문드려요 ㅠ각 오브젝트의 y축이 다를경우충돌이 일어나지 않는데요이럴떈 영상처럼 카메라 세팅가서 투영모드를 Orthographic로 바꾸고Ortho Width의 값을 수정하면 된다고 하는데저는 이상하게 수정을 해도 충돌이 안되더라구요찾아보면서 다른 강의를 봐도영상처럼 하면 충돌이 되던데 왜 저만 안되는 걸까요?
-
미해결더 자바, Java 8
Map의 가장 큰 특징이 key는 null이 아니다
안녕하세요Optional 소개 강의 13분쯤에 "Map의 가장 큰 특징이 key는 null이 아닙니다"라고 하셨는데 HashMap은 key값으로 null이 가능한 것으로 알고 있는데, (Hashtable은 key로 null이 불가능하고요) 혹시 제가 뭔가 잘못 알고 있는걸까요?
-
미해결실전 인공지능으로 이어지는 딥러닝 개념 잡기
알아두기 2.3.8 이진 교차 엔트로피 함수 식 괄호 여부 질문
안녕하세요. 알아두기 2.3.8 이진 교차 엔트로피 함수의 손실을 나타내는 식에서 마지막 괄호가 짝이 없는데 뒤에 나오는 차랑 보유 유무 문제 예시에서 유추해 보았을 때 식에서 시그마 뒤에 여는 괄호가 누락 된 건가요?
-
미해결10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
8주차 개념강의 - 3653번 질문입니다.
http://boj.kr/4bf036e939474a3a89f75c5f0163382c같은 로직의 코드여도 벡터를 넘겨서 트리를 만들면 시간 초과가 발생합니다.벡터를 선언하고 초기화하는 게 시간복잡도에 영향을 많이 미치나요?
-
해결됨실전! 스프링 데이터 JPA
changeTeam ... ArrayList [9:11]
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]생각해봤는데 예제라서 상관은없지만 Team에 @OneToMany(mappedBy = "team") private List<Member> members = new ArrayList<>();이 부분에서 하나의 팀에 똑같은 회원이 중복안되도록 Set<Member>로 하는것도 괜찮을까요?아니면 제가 모르는 뭔가 때문에 상관 없을까요?
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
BasicItemController 질문입니다
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]basic/items.html 을 동적으로 수정하는 과정에서 저장된 아이템 목록이 뜨지 않습니다.이게 컨트롤러 부분이고이게 html입니다.컨트롤러 부분의 PostMapping 부분이 동작해야 아이템이 추가될거라 생각해서 포스트맨으로 post 요청을 보내보니 아이템 목록에 itemA와 itemB가 뜨더군요하지만 영한님의 강의 영상에선 바로 뜨던데 post 요청이 어떻게 들어간건가요? 제가 빼먹은 부분이 있는건지 궁금합니다
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
PRG 패턴에서 리다이렉트 하는 이유?
이유가 무엇인가요 ?post 후에 redirect가 아니라 서버에서 응답으로 201 상태코드와 함께 get 메소드로를 이용해서 PG패턴으로 만들 수는 없는건가요?
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
최상위 태그 html 태그
검색해도 여러 태그들만 나오는데.. 혹시 스타일 태그 맨 위에 선언한 html 태그는 무슨 태그인가요?이 html 태그에 스타일을 적용하면 html 파일에 있는 전체가 바뀌는 형식인건가요?<html>태그가 궁금합니다!!
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
저장시 줄바꿈
이상하게 선생님처럼 한줄로 태그랑 컨텐츠가 뜨는게 아니라 노트북 화면도 충분한데 저장하면 막 줄바꿈이 되는 경우들이 생기는데 뭐가 문제일까요 ㅠㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
`<List header={header}` 에서 header 같은 String 타입들도 useMemo 처리를 해주는 것이 좋은가요?
<List header={header} 에서 header 같은 String 타입들도 useMemo 처리를 해주는 것이 좋은가요?
-
미해결저작권 걱정없는 나만의 음악 만들기 - Studio One
라이선스
스튜디오원은 구매를 해야하는거죠? free 버전은 없지요?
-
미해결실전! 스프링 데이터 JPA
쿼리 힌트 Page 추가 예제 질문
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]자료에 forCounting에 대한 설명을 적어주셨는데,"Count쿼리도 쿼리 힌트 적용"한다는 설명이@QueryHints의 forCounting값이 false이면 Count쿼리가 나가지 않는다는 말씀이신가요?[자료 위치]파일명 : "실전! 스프링 데이터 JPA -v2022-12-18.pdf"위치 : "JPA Hint & Lock" > "JPA Hint" > "쿼리 힌트 Page 추가 예제"영상 : "실전! 스프링 데이터 JPA" > "JPA Hint & Lock"자료에는 "쿼리 힌트 Page 추가 예제"가 있지만 영상 11:44 이후 Lock으로 바로 넘어가서 저는 잘 이해가 안가네요.. ㅠㅠ
-
미해결실전 프로젝트로 배우는 타입스크립트
소스질문
캡틴판교님이 인강 하시면서 작성하신 [코로나 상황판 프로젝트] 소스는 어디에 있나요?
-
미해결저작권 걱정없는 나만의 음악 만들기 - Studio One
사운드 출력 문제
PC에서 볼때 왜 왼쪽헤드폰으로만 나올까요? 모노로만 출력됩니다. (참고로 같은PC에서 유튜브 재생시 스테레오로 정상재생 됩니다)
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
멀티 클래스 데이터를 coco data 포멧으로
제가 직접 모은 이미지 데이터 셋을 기반으로 MaskRCNN을 사용하여 object detection 과 segmentation 을 수행하려 합니다.올려주신 예제에는 CVAT을 통해서 Yolo3 포멧으로만 출력하는 예제가 있는데요, xml 이 아닌 COCO format json 으로 출력하려고 합니다.Balloon 강의를 보면 single class 만 인식하는 예제인데요, 멀티클래스를 학습하고 사용하려면 어떤 동영상 파일을 시청해야 하나요 아무리 찾아봐도 못 찾겠습니다. 너무 고통스럽네요 3일째입니다..Multi-class 학습가능한 MaskRCNN 모델 예제가 있는지Tensorflow2 버전에서 구동가능한지GPU를 자꾸 tesla4 를 잡는데 더 좋은 버전의 GPU를 제가 따로 지정할 수 있는지.. (프리미엄사용중입니다)감사합니다.
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
코코 데이터셋트에 나오는 설명문장들...
강의 항상 잘 보고 있습니다. 또 항상 질문에 빠르고 상세한 답변해주셔서 감사드려요!갑자기 든 의문인데 COCO데이터 셋 웹사이트를 보면 이미지 설명하는 데이터들도 같이 있더군요..(이걸 image captioning 이라고 하나요?)이러한 정보들은 coco data json에서 어떻게 구현이 되나요? 이미지에 대한 설명 문장을 저도 자동으로 만들어 보고 싶네요.. 또한 input 을 문장으로 넣었을때 이미지를 출력해주는 것두요. 이러한 실습을 해보려면 선생님강의중에서 참고할 만한게 있을까요? 혹은 링크나 관련 내용 알려주시면 감사드리겠습니다.. COCO dataset 의 매력중에 하나가 image captioning 인것 같기도 한데.. 어떻게 사용하면 좋을까요? 감사합니다.
-
미해결Spring Cloud로 개발하는 마이크로서비스 애플리케이션(MSA)
RandomPort
랜덤 포트를 설정해도 Port가 0번으로 고정이 됩니다.한 개는 Intellij에서 Run 버튼을 이용해서 실행 시켰고한 개는 ./gradlew build 후 Intellij의 terminal에서java -jar first.jar를 이용해서 실행을 시켰습니다.instance-id도 추가를 해주었습니다. 혹시 몰라서 노트북 재시작까지 해보았는데도Eureka에서는 Port가 0번으로 고정이됩니다. 위의 사진은 Eureka 서버의 application.yml입니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
선수지식 관련 질문입니다.
선생님 안녕하세요강의를 수강하기 전에 선수지식 관련해서 질문드립니다. 파이썬은 비교적 능숙하게 사용하고, 다른 장고 강의를 몇개 들어서, 기본적인 작동 원리는 이해한다고 생각합니다.다만, 리액트에 대한 지식이 전무하고 아주 기초적인 JS 지식만 있는 상태인데, 이 강의를 바로 들어도 무리가 없을까요?목표는 풀스택 개발자 라기 보다는, 장고에 대한 보다 깊은 이해 입니다. 즉, 리액트를 자유자재로 다루기보다는, 리액트가 어떻게 돌아가는지만 "이해"하고, 그것보다는 리액트를 곁들인 "장고"가 어떻게 돌아가는지를 이해하는 것이 목표입니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
프론트준비생에게 노드익스프레스 필수 사항 인가요?
server 폴더 부분 익스프레스로 만드시는거프론트준비생에게도 필수 사항 일까요?궁금합니다