묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
scrollTimeline polyfill 에 관해서
안녕하세요 강의를 듣고 직접 작성하면서 적용을 해보려고 하다가 강의에서 사용하는 scroll-timeline polyfill repo 에서 찾아보니 강의에서 사용했던 scrollOfsets을 앞으로는 사용하지 않는 것 같았습니다. 이러한 부분에 대해서 다른 해결법이 또 있을까요? 아래의 링크에 방법이 있긴 합니다만 조금 더 효율적인 방법이 있는지 궁금했습니다! 추가로 react에서도 사용하려고 했지만 Npm에서는 관련한 패키지가 없는 것 같아서 혹시 react에서 적용해보신 적이 있으실까요?!https://github.com/flackr/scroll-timeline/issues/64
-
미해결인터랙티브 웹 개발 제대로 시작하기
closest 사용
이번에 강의에 추가된 closest를 사용하면 다음과 같이 사용하면 될까요? 동작은 정상적으로 작동합니다 const stage = document.querySelector(".stage"); stage.addEventListener("click", e => { e.target.closest(".door").classList.toggle("door-open"); });
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
아직 강의를 보진 않았는데
1년동안 쇼핑몰 인하우스 간단한 퍼블 업무하다가 이직 준비하면서 공부중인데 궁금한점이있어서요 스크롤 애니메이션할때 간단한 효과는 aos, 디테일한건 gsap을 많이 쓴다고 들었거든요 이 강의의 web api 애니메이션을 습득하면 실무에서 gsap 으로 할수있는건 대부분 할 수 있는건가요? 물론 완전히 대체는 안되겠지만 왠만한건 가능한건가요 제가 gsap도 아직 공부할 예정이라 자세히 몰라서 질문드립니다ㅎ
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
도메인 연결 오류
안녕하세요 이수업을 듣고 만든 사이트를 도메인 구매하여 개인포트폴리오 홈페이지에 올렸는데이렇게 주요 메인부분 내용이 전혀 담기지 않아서 질문 올립니다그외에 따로 만든 것은 모두 잘 실행되는데 저것만 저렇게 실행되네요 혹시 파일 손상인가 싶어서 파일 그대로 다시 옮겨봤는데 똑같은 증상이네요 이유를 모르겠습니다..도메인주소로 접속이 아닌 go live로 실행하면 잘켜지는데 도메인경우로 접속하면 저렇게 나옵니다...
-
미해결자바스크립트 : 기초부터 실전까지 올인원
developer tool 아이콘 클릭했는데 콘솔창이 안떠요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요developer tool 클릭했는데 안떠요 아무 반응이 없는데 왜 그런걸가요 ㅠㅠ
-
미해결인터랙티브 웹 개발 제대로 시작하기
이미지 없으신분 제 코드를 보세요 ㅎㅎ
이미지 없으신 분들 그냥 구글 이미지에서 간단히 가져와서 사용해 봤습니다.요걸로 테스트 해 봅시다<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> @keyframes break-egg-ani { /* 0%는 from */ /* 100% 은 to*/ to { background-position: -500px 0; } } .broken-egg { width: 85px; height: 150px; background: url("https://www.shutterstock.com/image-vector/cartoon-dragon-ice-crystal-eggs-260nw-2152129871.jpg") no-repeat 0 0 / auto 150px; animation: break-egg-ani 2s infinite steps(7); } </style> <body> <div class="broken-egg"></div> </body> </html>
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들
이번에 포트폴리오 웹사이트 작업물들을 만드려고 하는데 처음 혼자 만드려고 하니 시작을 어떻게 해야 하나 막막합니다. 혹시 어떤식으로 시작하는지 좋은 방법이 있는지 궁금합니다. 아니면 포트폴리오 웹사이트 만드는 강의 추천도 해주시면 감사하겠습니다
-
해결됨[코드캠프] 강력한 CSS
@media 미디어 쿼리 적용 안되는 이유
안녕하세요, ㅠㅠ 간단한 부분인데 왜 미디어 쿼리가 적용이 안 되는 것일까요..? 설정이 잘못되어 있는 것일까요?
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
카페24 절약형 관련 질문있습니다
안녕하세요 제 개인포트폴리오 폴더안에 따로 만든 포트폴리오까지 전부해서 3gb가 조금 넘게 나오는데 비즈니스 이상을 구매해야할까요? 동영상은 따로 없는데 node관련 파일떄문인지 용량이 높게 나왔습니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
이후에 출시될 강의엔 유료 플러그인이 사용되나요?
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요?궁금해서 질문해봅니다! 🤔
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
Q. FOUC에 대한 보완으로 autoAlpha를 사용하면 효율적인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다.이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
로그 이미지 주소 중 절대 경로 원리에 관한 질문
본 강의 중 로그가 나오지 않는 이슈에 관하여경로 설정에 문제가 있다고 하셨고, grab_market_web/src/App.js의 내용 중 로그 src의 경로를"./imgages/icons/log.png"에서 -> "/imgages/icons/log.png"으로 변경하라고 하였습니다. 작동은 잘 되는데, 작동 원리가 궁금합니다./ 절대값 root경로의 시작은 어디로 설정되어 있나요?이전에는 메인 화면에서는 ./ 상대 경로 중, 현재 경로로 설정되어 있었는데 잘 작동했던 이유도 궁금합니다.App.js파일의 내용이니까 App.js가 존재하는 grab_market_web/src 디렉토리가 현재 경로라고 이해되는데,그보다 상위 디렉토리에 존재하는 grab_market_web/public이 ./ 현재 경로로 인식되어grab_market_web/public/images가 호출 되는 것도 이해가 잘 되지 않으며/ 절대 경로로 설정시에도grab_market_web/public/images가 호출되는 것이 잘 이해가 되지 않습니다.
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
질문있습니다!
그 포토샵으로 이미지 사이즈 조절할때a,b,c유형은 픽셀이 정해져있어서 문제가 없긴한데d,e유형에선 가로 혹은 세로 사이즈가 100%다보니 임의로 지정한 상태에서 늘리면 되긴할텐데 d,e유형에서 이미지를 적당히 얼마정도로 세팅하면 좋을까요..??
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
자료이메일 요청확인
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 자료이메일 요청에 대한 답변이 없어서두번 요청드렸는데요!드라이브 승인이 된걸까요? 인프런아이디 el입니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
안녕하세요. 탭 부분 보더가 이상합니다.
선생님 안녕하세요. 탭 메뉴를 만들고 있는데공지사항에서는 보더가 없어지는데갤러리는 보더가 안없어집니다ㅠㅠ 왜이러는걸까요?알려주시면 감사하겠습니다. html 입니다.<!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>D-1 실전연습</title> </head> <body> <div class="container"> <div class="container-inner"> <div class="left"> <div class="header"> <div class="logo"><img src="images/header-logo.png"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> <li> <a href="#none">메뉴</a> <div class="sub-menu"> <a href="#none">서브메뉴-1</a> <a href="#none">서브메뉴-2</a> <a href="#none">서브메뉴-3</a> <a href="#none">서브메뉴-4</a> </div> </li> </ul> </div> <div class="login"> <a href="#none">Login</a> <b>l</b> <a href="#none">Logout</a> </div> </div> </div> <div class="right"> <div class="banner"> <div class="image-slide"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> <div class="image-banner"> <a href="#none"><img src="images/banner-01.png"></a> <a href="#none"><img src="images/banner-02.png"></a> <a href="#none"><img src="images/banner-03.png"></a> </div> </div> <div class="shortcut"> <div class="shortcut-inner"> <a href="#none" class="shortcut-left"><img src="images/shortcut-01.png" alt="shortcut"></a> <div class="shortcut-center"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^</p> <em>기간: 2022년 12월 18일 ~ 12월 25일</em> </div> <div class="shortcut-right"> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut arrow"></a> </div> </div> </div> <div class="items"> <div class="items-inner"> <div class="tab"> <a href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="content1"> <a href="#none" class="open-modal"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> <a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a> </div> <div class="content2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery"><span>안녕하세요</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery"><span>안녕하세요</span></a> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="copy"> <b><a href="#none">기업소개 제휴 및 입점 문의, </a> <a href="#none">이용약관, </a> <a href="#none">개인정보처리방침, </a> <a href="#none">이메일무단수집거부, </a> <a href="#none">사이트맵, </a> <a href="#none">인재채용, </a> </b> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p> </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="twitter"></a> <a href="#none"><img src="images/sns-02.png" alt="facebook"></a> <a href="#none"><img src="images/sns-03.png" alt="kakaostory"></a> </div> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br> <br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p> <a href="#none" class="close-modal">X 닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css 입니다. @charset "utf-8"; * {margin: 0; padding: 0;} a {text-decoration: none; color: #333;} li,ul {list-style: none;} .container .container-inner {width: 100%; display: flex;} .left { width: 200px; flex: 1;} .right {width: calc(100vw - 200px); padding-right: 20px;} .header .logo {width: 200px; height: 100px;} .header .navi {width: 90%; margin: auto; } .menu {position: relative; z-index: 1000;} .menu > li > a { padding: 10px; display: block; text-align: center; border: 1px solid #000; transition: 0.5s;} .menu > li:hover > a { background-color: rgba(0, 0, 0, 0.5);} .sub-menu {display: none; border: 1px solid #000;} .sub-menu > a { padding: 5px; display: block; text-align: center; transition: 0.5s;} .sub-menu > a:hover { background-color: rgba(0, 0, 0, 0.5);} .login {text-align: center; margin-top: 20px;} .login a:hover {text-decoration: underline;} .login b {color: #ddd;} /* 슬라이드 배너 */ .banner { width: inherit; height: 400px; overflow: hidden; } .banner .image-slide {width: inherit; height: 3600px; font-size: 0; animation: slide 10s linear infinite; } .banner .image-slide a:nth-child(1) {animation-delay: 0s;} .banner .image-slide a:nth-child(2) {animation-delay: 3.5s;} .banner .image-slide a:nth-child(3) {animation-delay: 0s;} @keyframes slide { 0% {top: 0px;} 5% {top: -1200px;} 35% {top: -1200px;} 40% {top: -2400px} 70% {top: -2400px;} 100% {top: 0px;} } .image-banner {position: absolute; right: 0; top: 0; width: 200px} .image-banner a img { width: 180px; margin-top: 7px;} /* 바로가기 */ .shortcut {width: inherit; height: 200px; margin-top: 13px; margin-left: 20px;} .shortcut-inner { border: 1px solid #000; display: flex; height:calc(100% - 20px);} .shortcut-left {float: left; width:400px; padding-top: 10px; text-align: center;} .shortcut-center {float: left; margin-left: 20px;} .shortcut-center h2 {margin-top: 40px} .shortcut-center p {margin-top: 10px; margin-bottom: 5px;} .shortcut-center em { font-style: normal; color: #bbb;} .shortcut-right { margin-top: 75px; margin-right: 50px; padding-left: 30px; } /* 아이템 */ .items {width: inherit; height: 250px; margin-left: 20px;} .itmes-inner {} .tab {} .tab a { display: inline-block; margin-right: -5px; width: 180px; border: 1px solid #000; text-align: center; padding: 10px; border-radius: 10px 10px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px;} .tab a:active {background-color: #fff;} .content1 {border: 1px solid #000; box-sizing: border-box;} .content1 a {display: block; padding: 10px; border-bottom: 1px solid #000; } .content1 a:last-child {border-bottom: none;} .content1 em {overflow: hidden; text-overflow: ellipsis; font-style: normal; } .content1 b {float: right; margin-right: 20px;} .content2 {height: 200px; border: 1px solid #000; position: relative; text-align: center; display: none; z-index: 0; box-sizing: border-box; background-color: #fff;} .content2 a {display: inline-block;} .content2 a > img {width: 200px; margin-top: 20px; padding: 5px;} .content2 a > span {display: block; margin-top: -5px;} /* 푸터 */ .footer {width: 100%; height: 100px;display: flex;} .footer .logo {width: 200px;} .footer .logo a img{margin-top: 10px;} .footer .copy {width: calc(100vw - 400px); text-align: left; padding: 30px;} .footer .copy p {margin-top: 5px;} .footer .sns {width: 200px;} .footer .sns a img {width: 50px; border-radius: 5px; margin-top: 20px;} .modal { display: none; position: absolute; top: 0; left: 0; background-color:rgba(0, 0, 0, 0.5); width: 100%; height: 100%; text-align: left;} .modal-content {border-radius: 20px; margin-top: -350px; margin-left: -300px; position: absolute; top: 50%; left: 50%; width: 600px; height: 320px; background-color: #fff; padding: 40px;} .modal-content h2 {padding-bottom: 20px;} .modal-content a {border: 1px solid #000; padding: 5px 10px; float: right; margin-top: 20px;}
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
스타일 가이드 관련 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 선생님!강의 잘 보고 있습니다!모바일 웹 강의 중에 스타일 가이드는 실무에서 디자이너와 퍼블리셔 중 누가 주로 맡아서 작업을 하는지가 궁금합니다!답변 미리 감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
맥북 터미널에서 node-v 입력시 나오는 오류
안녕하세요 그랩님!혹시 영상 4:56쯤 단계부터 오류가 떠 다른 분들의 질문과 그랩님 답변도 보고 이것저것 시도해 보았으나 해결이 안되어 질문드립니다ㅜㅜ 혹시 아래의 오류가 제가 지금 사용하는 맥북이 2017년 버전(10.13.1)으로 시스템 업그레이드를 한지 오래되었기 때문에 뜨는걸까요..? 맥에서 지원하는 최신 시스템 업그레이드를 하려면외장하드 구입 후 컴퓨터 내 백업을 준비 후에 OS 삭제>재설치>백업복원 까지 진행해야 하기에 하기 오류가 컴퓨터 백업과 OS 재설치 없이도 해결이 가능할지 혹시 아실까 하여 문의드립니다ㅜㅜ
-
해결됨[코드캠프] 강력한 CSS
35분 강의 내용중 :after 사용관련
구체적으로 :after 를 사용하는 이유는 이미 만들어놓은 item 바로 위에 딱 그 사이즈만큼 쉽게 덮기위해서 인걸까요? :before 가 아닌 :after를 사용한 이유가 궁금합니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?
(사진)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
B4 최종본, 네비 메뉴가 이상해요.
B4 최종본 작성중인데영상에 나온대로 따라했는데네비 메뉴와 서브메뉴가 엄청 크게 출력됩니다 ㅠㅠ 왜 이럴까요..
