묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
visibility:hidden; 적용 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="nav"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/1200-1.jpg" alt="slide-1"></a> <a href="#none"><img src="images/1200-2.jpg" alt="slide-2"></a> <a href="#none"><img src="images/1200-3.jpg" alt="slide-3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; } .container { margin: auto; width: 1200px; border: 1px solid #000; } header { display: flex; justify-content: space-between; } header > div { height: 100px; border: 1px solid #000; } .header-logo { width: 200px; } .nav { width: 600px; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; border: 1px solid #000; } .slide > div { font-size: 0; } .slide > div > a { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; opacity: 0; } .slide > div > a:nth-child(2) { animation-delay: 3.5s; } .slide > div > a:nth-child(3) { animation-delay: 7s; } @keyframes slide { 0% { opacity: 0; visibility: hidden; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* slide */ .items { display: flex; } .items > div { height: 200px; border: 1px solid #000; flex:1; } footer { display: flex; } footer > div { height: 100px; border: 1px solid #000; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .copyright > div { box-sizing: border-box; border: 1px solid #000; height: 50%; }현재 섹션8-5번 강의 수강중입니다.강의에서 말씀하신대로 세번째 슬라이드 사진이 투명도 0 상태로 최상위 계층에 있는 상태여서 visibility: none; 속성을 주었는데, 속성을 넣어도 다른 슬라이드 사진을 눌러도 세번째 슬라이드사진이 클릭 되는데 어떤부분이 잘못되었을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
타이포그래피 토큰 개발팀에서 적용 시 문제 관련해서 질문드립니다!
안녕하세요! 현재 아래와 같이 베리어블을 등록했는데, 개발팀에서 타이포그래피가 정상적으로 적용이 안 되는 것 같다고 하셔서 질문드립니다! 컬러(시맨틱까지)타이포그래피(프리미티브까지 적용 후 스타일에 적용함)간격/패딩 값(시맨틱까지)토큰 스튜디오 사용해서 깃허브에 푸시해 드렸는데, 다른 건 문제 없는데 타이포그래피가 정상적으로 안 뜬다고 하셔서요.다트에 검색하셨을 때 검색이 안 되는 것 같습니다..!여러가지로 시도해 보았지만 제대로 적용이 안 돼서 기존 스타일 사용 시처럼 직접 조합해서 사용하신다고 하셨는데 혹시 제가 뭘 잘못 전달드린 걸까요?플러터로 앱 개발중이라 css는 사용하시지 않으신다고 하셨습니다!등록한 베리어블과 스타일, 토큰 스튜디오에 임포트 한 상태 이미지 첨부합니다! 확인 부탁드립니다. 감사합니다!! !
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
라이브러리 publish 에러 관련
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다. 안녕하세요. 섹션5의 "컴포넌트 만들기전 라이브러리 세팅하기"를 듣고 있습니다.Foundation과 UI Kit을 @boldux에서 가져온뒤에 팀프로젝트를 "Design System"으로 넣어주고첫번째로 Foundation으로 들어가서 publish를 하면 아래와 같이 에러가 발생합니다 Publish를 눌러보면 이 대상들이 안되는거 같습니다. 이대로라도 수업을 듣고 싶어서 UI Kit쪽에서 add까지 했었는데, add는 되는데 아이콘들을 눌러봐도 강의와는 달리 연동이 안되어 있는 상태입니다. 검색을 해봤는데도 달리 답을 찾지 못해서 이렇게 올려봅니다. 저와 같은 분들이 계셨을까요?
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
교육 예시 파일들이 다운로드 안됩니다.
info 작성 예시 다운로드info 탬플릿 다운로드 두개의 파일들이 권한이 없네요???
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
텍스트 베리어블 오류 문제
텍스트 스타일 베리어블 등록이 첨부이미지 처럼 오류?가 나는데, 제가 텍스트 스타일 등록 내용을 볼드님이랑 다르게 하고 베리어블은 강의 내용대로 따라해서 그런걸까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
AI
안녕하세요, 볼드님 강의 업데이트 해주셔서 정말 감사합니다. 기존 피그마 버전을 사용하고 있는데, 볼드님 강의를 듣는 도 중 AI기능이 쓰는 방식을 배울 수 있었는데요. Ai 기능을 쓰고 싶으면 업데이트를 해야할 것 같아서요 .. 찾아보니 맨 하단에 토글을 켜야 쓸 수 있는 것 같습니다. ㅜㅜ아마 못 쓰는 것이겠죠 ㅜㅜ 방법이 있을지 궁금합니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
서브도메인 이름은 아무거나 해도되나요?
서브도메인 이름은 아무거나 해도되나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
완전 생초보
수강전 문의 했을때강사님께서 프로그램은 비주얼스튜디오코드 무료 다운받아 쓰라고만 하셔서 다운 받아서 겨우겨우 따라하고 있는데요.1. HTML5 핵심 태그 사용법(문단, 텍스트 서식)강의를 들으려고 하니 Brackets 이라는 프로그램으로 강의를 하십니다.어찌어찌 Brackets 이라는 프로그램을 찾아서 깔긴 했지만시작을 또 어떻게 해야할지를 모르겠네요.비주얼스튜디오코드에서는 했던 새파일 만들기? html, css 그것부터Brackets 이라는 프로그램은 만들려고 하니 이미 만들어져 있다고 하고만들어져 있는것을 지우려하니 에러가 발생했다하네요.프로그램이 맞게 깔렸는지도 모르겠지만어떻게 시작을 해야할까요?분명 초보라 말씀 드렸는데초보를 위한 강의는 아니신듯 해서 난감합니다.
-
미해결미드저니 비법 클래스, 현직 AI 디자인 전문가의 이미지 프롬프트 엔지니어링 핵심 정리
미드저니 결재
안녕하세요. 강의를 모두 듣고 열심히 연습중인데요,혹시 미드저니를 사용할때 웹브라우저상이 아닌 디스코드를 이용해야 하는건 아닌가 해서요미드저니에서 결재를 하려고 하면 카드가 거부되어서 사입을 할수가 없어서요카드 여러개로 바꿔 해봤는데도 카드거부가 나와서요혹 강의 내용처럼 브라우저상이 아니 디스코드로 해서 뭘 해야 하는건지 해서요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
대시보드, 차트 디자인 같은 부분도 다뤄주시면 좋겠어요!
수업 너무 유익하게 잘 듣고 있습니다! Saas에 들어가는 다양한 컴포넌트 만들어볼 수 있어서 정말 유익해요. Saas에서 대시보드나 차트 같은 데이터 시각화 부분도 많이 필요한데, 혹시 강의 주제로 다뤄주실 수 있을지 궁금해서 질문 남깁니다 ! 늘 좋은 강의 감사합니다!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
수업노트가 나타나지 않아요
수업노트를 확인할수 있는 방법이 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
배리어블 순서 바꿀 때 안바뀌는 오류
배리어블 순서를 바꿀 때 드래그 드랍해도 안 바뀌는건 왜 그런건가요..? ㅠㅠ배리어블 복사하면 순서가 뒤엉켜있는 경우가 너무 많은데 그럴때마다 순서를 바꾸려고 드래그 드랍을 하면 몇개는 바뀌다가 안바뀝니다..배리어블이 너무 많아서 그런건가요? 이럴 때는 어떻게 해야할까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
SF Symbols 윈도우
강사님!SF Symbols 다운로드 받았는데 윈도우라 파일이 호환이 안되는 거 같습니다. 윈도우에서 어떻게 활용하는지 알려주실 수 있으신가요?
-
미해결애플 웹사이트 인터랙션 클론!
drawImage(objs.videoImages[sequence], 0, 0); error
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이러한 에러가 나요.이미지 파일은 여기에 저장되어있슴돠.
-
해결됨모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
자바강의도 하나짜리 full버전이 나오나요?
자바강의 신청하려고하는데 이전사례처럼 하나짜리 통으로 풀버전으로 편집되서 출시될지 궁금해요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
NavBar 인스턴스 컴포넌트 셀렉티드 불린 프로퍼티 ON/OFF 시 아이콘 컬러 변경
강의처럼 NavBar 인스턴스 컴포넌트에서 Selected 불린 프로퍼티를 끄고 켬에 따라 컬러의 변경을 주고싶은데 아이콘 인스턴스 스왑한 아이콘들은 컬러가 안바뀝니다ㅠ디자인 패널에서 NavBarItems-1은 셀렉트에 따라 바뀌는데 2번같이 아이콘을 Person 아이콘으로 스왑한 아이콘에 대해선 셀렉트 상태에도 컬러가 변하지 않는데요, 원래 이런건가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
navbar 인스턴스 selected on/off
강의처럼 NavBar 인스턴스 컴포넌트에서 Selected 불린 프로퍼티를 끄고 켬에 따라 컬러의 변경을 주고싶은데 아이콘 인스턴스 스왑한 아이콘들은 컬러가 안바뀝니다ㅠ디자인 패널에서 NavBarItems-1은 셀렉트에 따라 바뀌는데 2번같이 아이콘을 Person 아이콘으로 스왑한 아이콘에 대해선 셀렉트 상태에도 컬러가 변하지 않는데요, 원래 이런건가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
칩
안녕하세요 볼드님 강의 너무 잘 듣고 있습니다. 다름이아니라 아이콘을 변경하려고 할 때 색깔이 변경이 안 되는 경우, 아이콘 굵기가 다르게 나올 때가 있는데 어떤 부분이 문제인지 궁금합니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
SelectOption 컴포넌트에서 체크 On/Off
강의에서는 체크박스를 Boolean으로 처리하면 껏다가 켜는게 동시에 작동해서 따로 만드는걸 추천한다고 하셨는데, 지금 만들면서 테스트해보니까 복사한 인스턴스 각각에서 켰다가 끄는게 각자 동작하는데 혹시 동시에 동작하는게 어떤 상황에서 발생하는걸까요 ? 감사합니다 !!!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Component group 이름에 접두사로 part/를 붙이면 왜 검색이 안되나요 ?
이전 강의 자료에서 설명해주셨던 것 같은데 까먹었습니다.. 왜 검색이 안되고 어디에서 검색이 안되었던거였죠..?
