공간을 넘어가서 lorem 값이 나오는데 왜 이러는지 알 수 있을까요...?! padding 값이 문제일까요 ??? 문제는 없는 것 같은데 원래 넘어갈 수 밖에 없는 건지 궁금합니다.

일하다가 반복 단순 작업이 있어 웹크롤링을 만들려고 하는데 정보가 없어 질문을 드립니다. 각 태그가 svg안에 rect안에 text안에 tspan태그로 html이 만들어져있는데 이것을 리스트로 뽑아서 각 문자별로 해보려고 하다가 어려워서 질문을 올립니다 tspan 안의 문자로된 글씨를 크롤링하려면 어떻게 해야하는지 설명이 가능할까요?

안녕하세요. 선생님. 잘 지내고 계신가요. 작업을 진행하다가 고민이 생겨 질문 드립니다. 최근 Figma 활용법을 익히며 해당 툴로 필요한 UI를 그리기 시작했는데요. 아무래도 인터렉션이나 다이나믹 구현은 Axure가 훨씬 좋아서 Figma로 그린 UI를 Plugin방식으로 Axure로 가져와 활용하고 있습니다. 그런데 좀 복잡한 UI들은  Axure로 Plugin하는 과정에서 원본과 좀 다른 모양으로 가져와지더군요. 두 개 툴 사이에 기능적 호환성이 그다지 높은 것 같지는 않은데, 일단 이 경우는 Figma에서 그린 UI를 SVG파일로 Export하여 Axure로 불러오고 있습니다. 그런데 Axure 캔버스로 가져온 해당 SVG 파일의 이미지를 확대해보니 마치 PNG파일 마냥 이미지의 아웃라인이 비트맵(Bitmap) 방식으로 쪼개지더군요. Axure Preview나 Cloud에서는 또 안 그런 것 같아서 '그냥 그런가보다' 하고 작업을 진행하고 있는데... 이게 영 찜찜하네요. 이게 Axure 캔버스 상에서 보여지는 단순한 오류인 건지, 아니면 SVG 파일을 Axure로 불러오는 제 방식에 문제가 있는 것인지 잘 모르겠습니다. 답변 주시면 감사하겠습니다. 오늘도 좋은 하루 되세요!          

맥북을 사용하고 있는데 제 컴퓨터 에서는 텍스트 애니메이션이 잘 작동하지만 윈도우로 봤을때에는 폰트적용이 안되고 깨진듯이 나옵니다. 폰트 적용법 알수있을까요!

main-add.js 내용 적용했는데 section-2 부분의 messageC부분이 section3까지 넘어가서 뭔가 이상하다고 생각했습니다. 실제로, 강의 영상에 나온 것이랑 값이 차이나서 수정한 부분 올립니다. sceneInfo의 section2부분의 value만 변경해주시면 됩니다.  values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], },

안녕하세요 선생님 강의 잘 듣고있습니다!! 다름이 아니라 스크롤 섹션 2의 경우에는 비디오 타이밍에 맞춰 텍스트가 나오는데 그 타이밍 설정은 직접 콘솔로 scrollRatio 값을 확인해가면서 정하면 되는걸까요??

안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 스크롤 이벤트를 시작하는 위치 구하는 부분에서 이벤트가 실행될 scroll-section의 offsetTop으로 구하는 것과 이벤트가 실행될 scroll-section 위에 존재하는 scroll-section들의 높이 합으로 구하는 것이 차이가 있는지 궁금합니다.

안녕하세요. 질문이 있는데요 저는 캔버스 화면을 애플 공홈처럼 꽉 채우고 싶은데 innerHeight에 맞춰서 그런가 이런 식으로 나오네요(1920*1080 모니터 기준) outHeight나 그 외 다른 height 값들을 대신 넣으면 화면이 꽉 차는 대신 화면이 안 예쁘게 늘어납니다. f11하면 제가 원하는대로 1920*1080 풀사이즈 정확하게 나오고요. 어떻게 수정해야 할까요?     const heightRatio = window.innerHeight / 1080;     sceneInfo[1].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`;

쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유

강의 8:02에 .local-nav-links .product-name을 하여 .local-nav-links a보다 우선순위를 올려 주셨는데 앞서 작성하신 .local-nav-links a:not(.product-name)에 fontr-size를 정해주고 .porduct-name에 굵기, 크기를 조절해준다면 더 클린한 코드 아닌가요? 사실 크게 상관 없을거 같은데 궁금해서 질의 합니다. 8:02부분과 이 코드를 비교하시면 제질문이 이해되기 쉬울거 같습니다. .product-name { margin-right: auto; font-size: 1.2rem; font-weight: bold; } .local-nav-links a:not(.product-name) { margin-left: 2em; font-size: 0.8rem; }

이미지 경로의 문제가 있는건가요???

검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? case 3: // 가로, 세로 모두 100%로 채우기 위한 세팅(계산 필요) const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { // 브라우저 width < 캔버스 width인 경우 canvasScaleRatio = heightRatio; } else { // 브라우저 height < 캔버스 height 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.drawImage(objs.images[0], 0, 0); // 캔버스 사이즈에 맞춰 가정한 innerWdth와 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; 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 ); break;