안녕하세요 CSS강의 너무 잘 듣고 있습니다. 강의를 듣다가 폰트 크기 단위에 대해 궁금한점이 있습니다. rem은 html 태그의 폰트크기에 영향을 받아서 html이 16px 이고 p태그가 2rem이면 16px * 2rem = 32px이 된다라고 이해를 하는데 그렇다면 그냥 처음부터 32px이라고 작성하지 않고 2rem 이런식으로 사용하는 이유가 뭔지 궁금합니다.

여기 이 강의를 다듣고 회사 및 기업 홈페이지리를만들고,1. FIREBASE 강의도 들어서 로그인 기능 더 추가하면 되는거죠?2. 결제기능도 넣고 싶은데 강의 만들 계획이 있으신가요? 있다면 언제쯤일까요? 3. 카카오지도 API 끌고와서 호갱노노나 부동산지인 같은 홈페이지도 만들어 보고싶습니다. 한국부동산원 API 이런 API를 들고와서 설정하는 방법도 알고싶어요!아마 1,2,3이 합친다면 웬만한건 다 만들 수 있지않을까요?? 감사합니다

<script> var list =[ { question : "이 중에서 제일 좋아하는 과일을 선택해주세요." options : ["사과", "바나나", "포도", "복숭아", "딸기"] }, { question : "이 중에서 제일 좋아하는 음식식을 선택해주세요." options : ["떡볶이", "짜장면", "파스타", "찌개", "치킨"] }, { question : "이 중에서 제일 좋아하는 반려동물을 선택해주세요." options : ["강아지","고양이","새","토끼","여우"] } ]; console.log(list); </script>작성한 코드에 options에 오류가 나서 코드가 작동이 안되는데 어떤 오류인지 모르겠습니다.

안녕하세요 CSS 강의를 결제해서 듣고 있습니다. 피그마 활용법 - 파일 불러오기 부분에서 파일은 어디서 받을 수 있나요?

4.0 기준으로 학습하고 있습니다.input.css 파일을 아래와 같이 작성하면자동으로 Montserrat 폰트 즉 첫번째 줄 폰트가적용되는건가요?메인 폰트 적용 방법을 모르겠습니다.@theme { --font-mont: "Montserrat", "sans-serif"; --font-noto: "Noto Sans KR", "Arial", "sans-serif"; /* Color */ --color-deepgreen:#6ab04c; --color-deeporange:#f0932b;}

리액트 버젼이 19.0 이상이라서 안된다고하는데 리액트를 다운그레이드해야하나요??...리액트를 다운그래이드 안하고 사용하는 방법은 없을까요?

화면이 안나와요

저는 비전공자로 지금 html,css javascript에 대한 기본적인 지식을 갖고있으며스프링을 응용하여 블로그정도의 웹 페이지를 만들 수 있는 수준이라고 생각합니다하지만 최근 기업 트렌드를 보면 백엔드 개발자만을 원하는 것이 아닌 풀스택개발자를 원하는 것이 추세인것 같습니다. 이 추세에 대비하기위해 어떤 언어를 최우선적으로 학습해야할지 궁금합니다. ex)node.js,next.js, was , docker...개발자로 성장하기 위한 방향성을 알려주시면 매우 감사드립니다. 

App.js, child.js 모두 강의 내용과 같이 작성 후 터미널에서 실행시켜 보았는데 리액트 초기화면만 표시되고 있습니다. 캐시 삭제, vscode 재시작 등을 시켜보았으나 변함이 없습니다. 왼쪽 화면이 App.js 코드 내용대로 바뀌지 않는 이유가 무엇일까요?

비공개 영상인데, 어떻게 영상을 볼 수 있나요?

스크롤 이미지 영역 넘어갈시 가로가 움직여서 여러개의 이미지영역이 보이는게 안되여ㅠㅠ선생님 완성본 02.html도 안되는거같아요css@charset 'utf-8'; html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption { margin: 0; padding: 0; border: 0; } div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav, h1, h2, h3 { box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul, li { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; height: auto; } html { font-size: 20px; font-family: Roboto; line-height: 1.6; } body { background: dodgerblue; } .wrap{ contain: paint; } .para { padding: 1em; font-size: 50px; } .gallery{ display: flex; align-items: center; position: sticky; top: 0; width:350vw; max-width: 4000px; height: 100vh; border: 10px dashed deeppink; } .gallery-item{ width:70vw; max-width: 800px; flex-shrink: 0; } .gallery-timeline{ height:2000px; border:10px dashed mediumaquamarine; }02.jsimport './scroll-timeline.js' const gallery = document.querySelector('.gallery'); const galleryTimeline = document.querySelector('.gallery-timeline'); gallery.animate( [ {transform : 'translayeX(0)'}, {transform : 'translayeX(-100%)'} ], { fill : 'both', timeline : new ScrollTimeline ({ scrollOffsets : [ {target : galleryTimeline, edge : 'start' , threshold : 1}, {target : galleryTimeline, edge : 'end' , threshold : 1} ] }) } ); 

안녕하세요. 수강해보려고 하는데, 최대한 빠르게 끝내보고 싶습니다.c++ 문법 정도만 알고 있는 수준인데, 공부 기간은 얼마 정도로 예상하시나요?

서브도메인 이름은 아무거나 해도되나요? 

수강전 문의 했을때강사님께서 프로그램은 비주얼스튜디오코드 무료 다운받아 쓰라고만 하셔서 다운 받아서 겨우겨우 따라하고 있는데요.1. HTML5 핵심 태그 사용법(문단, 텍스트 서식)강의를 들으려고 하니 Brackets 이라는 프로그램으로 강의를 하십니다.어찌어찌 Brackets 이라는 프로그램을 찾아서 깔긴 했지만시작을 또 어떻게 해야할지를 모르겠네요.비주얼스튜디오코드에서는 했던 새파일 만들기? html, css 그것부터Brackets 이라는 프로그램은 만들려고 하니 이미 만들어져 있다고 하고만들어져 있는것을 지우려하니 에러가 발생했다하네요.프로그램이 맞게 깔렸는지도 모르겠지만어떻게 시작을 해야할까요?분명 초보라 말씀 드렸는데초보를 위한 강의는 아니신듯 해서 난감합니다.

.link-group li > a { color: #606060; font-weight: 800; } .link-group li > a:visited { color: #000000; font-weight: 800; } .link-group li > a:hover { color:#ff0000; font-weight: 800; } <footer> <div class="link-group"> <h4> 관련 뉴스 </h4> <ul> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> </ul> </div> <div class="link-group"> <h4> 인기 뉴스 </h4> <ul> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> <li><a href="#">뉴스 기사1</a></li> </ul> </div> </footer> </div> </body> </html>영상 보면서 따라 코드를 작성하였습니다. 하지만 밑에 관련 뉴스나 인기 뉴스를 보면 이미 방문한 것처럼 표현 되어있습니다 혹시 무엇이 문제인지 확인 해주실 수 있나요?

노션에 링크에 들어가면 https://tailwindcss.com/docs/installation/using-vite여기로 옮겨지는데 강의 내용과 완전히 다른 터미널 명령어를 알려줍니다. 홈페이지말고 강의 처럼 따라하니깐 init 부분에서 npm error could not determine executable to runnpm error A complete log of this run can be found in: C:\Users\shin\AppData\Local\npm-cache\_logs\2025-02-11T09_22_29_046Z-debug-0.log이런 오류가 뜨는데 새로 변경된 홈페이지를 따라해야하나요?따라해야한다면 어떻게 하면될까요?

선생님 안녕하세요 svg를 vscode에서 불러오기를 했는데, vscode에서 이미지로 열립니다 소스로 안열리는데 소스로 열리게 하는법이 있을까요?

function setCanvasImages() { let imgElem; for(let i = 0; i < sceneInfo.values.videoImageCount; i++) { imgElem = new Image(); imgElem.src = `./images/picdiet 1/${1 + i}.jpg`; sceneInfo[0].objs.videoImages.push(imgElem); } // /home/ibmuser01/src/images/picdiet 1/1.jpg } setCanvasImages(); function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence], 0, 0); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.25) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.57) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.83) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight){ enterNewScene = true; if(currentScene === 0) return; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); })(); main.js:181 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at playAnimation (main.js:181:30) at scrollLoop (main.js:292:9) at main.js:297:9이러한 에러가 나요.이미지 파일은 여기에 저장되어있슴돠.

안녕하세요! 25년 1월에 v4가 새롭게 등장했는데, v4로 해도 상관 없겠죠?

■ 질문 남기실 때 꼭! 참고해주세요.실전 퍼블리싱1 강의 듣고 있는데 표 제작 관련 강의와 예제는 따로없을까요 ?