묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
하단 네비게이션 메뉴
강의에 대한 질문은 인프런 질문하기나, 1:1 커뮤니티 페이지에서 문의하시면 빠르게 답변 드리고 있습니다.(커뮤니티 주소 https://itconnect.dev/커뮤니티/) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요테마 파일과 CSS, PHP 파일은 아래 링크를 통해 받아보실 수 있습니다.https://drive.google.com/drive/folders/1KtkfsZe2uy5jNMps0F6gnqlEvZnq0mRN?usp=sharin 하단에 네비게이션 메뉴가 잘려보이는데 어떻게 바꿔야하나여?아무리 찾아도 안보여서요 ㅜg
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
scrolltrigger pin-spacer 영역 없애는 법 있나요?
선생님, 사진처럼 gallery를 감싸는 pin-spacer가 생겨서 하단에 하얀 영역이 생깁니다.scrolltrigger에서 자동적으로 만드는 거 같은데 이거 없애는 방법이 있을까요? background를 같은 색으로 하니 괜찮아보이긴 했지만 어쨌든 의도하지 않은 공간이 나타난거니 수정하고 싶어서요...gallery에 height: 100vh ! important를 해도 안 먹히는데 어떻게 하는 게 좋을까요?혹시나 하여 선생님 메일로 제 코드파일 전체를 미리 보내드립니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포에 대해서 질문있습니다
만든파일을 배포하는 과정에 대해 질문이 있습니다.배운기술들로 다른것을 만들어서 ngrok에 배포하는것이 아닌 다른방법으로 배포하고 싶습니다. 상황은 이렇습니다. ・2대의 데스크톱이있습니다.・한대의 데스크톱이 서버의 역할을합니다.・또다른 데스크톱은 클라이언트 역할을합니다. vite와 node.js로 만든경우 vscode로 npm run dev하는것이 아닌 java에서 war파일을 만들어서 war파일만 교체하면되는것처럼 배포 가능한 하나의 번들형태로 만드는방법이 있나요?아니면 vite와 node.js만의 배포하는방법이있나요? 제가 배포를 경험해본 방법이 java에서 Maven으로 war파일을 만들어서 tomcat에 넣어서 사용하는방법밖에 몰라서 node.js는 어떤방법으로 로컬데스크톱에서 실행하게 하는지 궁금합니다.frontend폴더와 backend폴더가 따로 있는데 하나로 로컬데스크톱에 배포하는 방법이 있나요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
완성본 요청드립니다.
선생님 후기 작성했습니다.완성본 빠르게 메일 전달 부탁드립니다^^급하게 확인하고 싶어서요..
-
해결됨모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
18강과 19강 사이 누락된 부분 확인 요망
선생님 ㅎ18강과 19강 사이에 공백이 있는 것 같습니다.first-child, last-child 등 설명이 빠져 있습니다.확인 부탁드려요^^
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 슬라이드 제작(3) 슬라이드 제작 강의
강의 35초에 .slide-items 에 width 3600px 필요없지 않나요? (어짜피 slide에 width 1200px에 hidden 있어서)혹시 3600px 입력하신 이유가 있으신가요? width 3600px 삭제해도 정상 동작합니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
이미지 공백 제거
가로 슬라이드만 font-size : 0으로 하고 세로 슬라이드와 크로스페이드는 아래 css 사용해야 되는 건가요?.slide div a img { display: block; }모든 슬라이드 강의가 font-size : 0으로 해서 헷갈리네요... 그리고 강의에서는 font-size : 0만 했는데 어떻게 공백이 제거되었을까요? line-height: 1.6em;line-height 이런 거 안 적은 건가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
세로 슬라이드 이미지 사이에 공백 제거
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>ㅇㅇ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <!-- Slide Animation --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <!-- Slide Animation --> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> <script type="text/javascript" src="script/jquery-1.12.4.js"></script> <script type="text/javascript" src="custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; font-size: 15px; color: #333; /* line-height: 1.6em; */ background-color: #fff; } a { text-decoration: none; color: #222; } .container { border: 1px solid #ddd; width: 1200px; margin: auto; } header { height: 100px; } header > div { border: 1px solid #ddd; height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide > div { border: 1px solid #ddd; height: 300px; } .items { overflow: hidden; } .items > div { border: 1px solid #ddd; height: 200px; float: left; box-sizing: border-box } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .family-site { width: 200px; } .copyright { width: 1000px; } .copyright div { border: 1px solid #ddd; height: 50px; } /* Slide Animation */ .slide { position: relative; } .slide div { border: 1px solid red; position: absolute; /* font-size: 0; */ }강의에는 세로 슬라이드도 font-size 0으로 하면 이미지 사이에 공백(5px)이 제거된다고 하는데 아무리 해도 되지 않더라구요. 오타 있나? 뭐 잘못한 거 있나? 이래저래 1시간 소비했는데body 태그의 css쪽에 line-height: 1.6em 이거 제거한 뒤에 font-size: 0 을 해야 되던데line-height 이게 이미지 공백에도 영향을 주나요?그리고 위에 코드 강사님이 업로드한 코드 그대로 사용한 것인데 강의에서는 line-height 영향을 어떻게 안 받았을까 싶네요.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
선생님 완성본 문의드립니다.
선생님 안녕하세요!빠르게 완강하였는데 빼먹은게 약간 있는 것 같아요ㅠㅠ혹시 전체 파일(완료파일)포함 전달 받을 수 있을까요?chaen32068@naver.com 부탁드립니다!!
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
초기 설정에 대한 질문
강의를 만들어주셔서 감사합니다.몇가지 질문이 있습니다.Frontend와 Backend폴더를 만든이유가 협업과 소스코드관리를 위한것이라고 생각합니다.그런데 node-modules를 Frontend와 Backend에 각각 설치하신 이유가 있으실까요?company-website에 설치해서 두곳다 이용하는방법도 있을것같은데 Frontend와 Backend를 따로 설치하신이유가 궁금합니다.깃허브에는 node-modules가 저장되게 하지 않았는데요그러면 현재 사용하는 노트북이 아닌 다른 노트북이나 데스크톱에서 현재 개발한것을 이어서하고싶을 경우 Ch0-3과Ch0-4의 설치를 다시 해주면되나요?본강의를 듣고 저만의 웹페이지를 만드는게 목표인데 react에 대해 찾아보다가 Create React App(CRA)로 만드는법과 Vite, Next.js로 만드는방법이 있었습니다. 이중 Vite를 고른 이유가 있을까요?빠르다는 장점으로 선택하신건가요? 선택이유가 궁금합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
simplyscroll Plugin에 대해서 질문드립니다.
섹션3에서 simplyscroll Plugin을 사용해서 사진들이 사선을 흘러가는 갤러리 부분에서 질문드립니다.수업자료로 받은 플러그인도 연결하고 소스도 그래도 넣었지만 요소검사를 했을때 아래 클래스가 붙어있어야 하는데 전혀 붙지가 않아서요,갭처한 코드 이미지를 보고 그대로 몇번을 다시 해봤지만 되질않아서요그 부분까지만 완성한 파일을 받아볼수 있을지요?kwanggony@naver.com.simply-scroll .simply-scroll-clip{}
-
미해결처음 만난 리액트(React)
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.이제 못 듣게 된건가요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
소스코드 다운로드 링크의 접속이 안됩니다
노션에 있는 소스코드 다운로드 링크의 접속이 안됩니다. 구글과 네이버 두개의 링크로 접속했을때의 사진을 첨부해드립니다.혹시 코드를 받을 다른방법이있을까요? 깃허브를 알려주시면 거기서라도 다운로드하겠습니다
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
가로스크롤 갤러리 반응형에서 scrollTrigger 동작 문제
안녕하세요 선생님. 강의 정말 잘 듣고 있습니다. 다름이 아니라, 가로 스크롤 반응형 제작중갤러리 형태를 세로 방향으로 바꾸는 과정에서 scrollTrigger 를 없애기 위해서 li 를 padding: 0; 으로 바꿔주면 된다고 하셨는데, 저는 적용이 되지 않아 반응형에서도 갤러리들이 가로방향으로 스크롤이 되는 문제가 생깁니다.. 도저히 이유를 모르겠어서 질문 올립니다감사합니다..work { position: relative; height: 100vh; border: 2px solid tomato; } .work ul { display: flex; padding: 3% 30%; box-sizing: border-box; } .work ul li { width: 600px; padding: 100px; box-sizing: border-box; flex-shrink: 0 !important; } @media screen and (max-width: 1024px) { .work { height: auto; } .work ul { padding: 0% 5%; justify-content: space-between; flex-wrap: wrap; } .work ul li { padding: 0; width: 45%; margin-top: 150px; } }
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
가로스크롤 scrollTrigger 가 작동되지 않습니다.
안녕하세요 선생님. 여러번 똑같이 따라 쳐보았으나..markers: true 여도 페이지에 scrollTrigger 표시가 되지 않고, 가로 스크롤이 동작하지 않습니다. console 창에 다른 오류 사항은 뜨지 않습니다. 무엇이 문제인지 전혀 모르겠어서 질문 남깁니다..$(function () { // GSAP Plugin gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { // horizontal scroll let list = gsap.utils.toArray(".work ul li"); let scrollTween = gsap.to(list, { xPercent: -100 * (list.length - 1), ease: "none", scrollTrigger: { trigger: ".work", pin: true, scrub: 1, start: "center center", end: "300%", markers: true, }, }); }, }); });
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
자식 선택자, 하위 선택자 질문
<header> <div class="header-logo"></div> <div class="navi"></div></header>header 밑에 있는 div에 공통적으로 들어가는 속성이 있는 경우, 자식 선택자 혹은 하위 선택자를 통해 접근할 수 있는데 ① header div {}② header > div{}강사님은 ①번을 사용하시는 이유가 있으신가요?②번이 header 태그의 직계 자식 요소 중 div 태그를 선택한다고 직관적으로 알 수 있다고 보는데... 혹시 제가 모르는 이유가 있는지 궁금합니다. 참고로 유투브에서 다른 강의들도 강사님처럼 ①번을 사용합니다
-
미해결그리드(Grid) 핵심이론 및 실전 활용
창 높이가 작을 때 레이아웃 깨짐현상
.project-gallery { display: grid; grid-template-rows: 300px calc(100vh - 600px) 300px; } 100vh 뷰포트 높이로 calc를 사용하게 되면 창 높이가 작아졌을 때 레이아웃이 깨지는데 100%나 calc 가 아닌 1fr 로 사용해야하지 않을까 싶은데 맞을까요?아님 다른 해결책이 있는지도 궁금합니다.
-
해결됨GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
ScrollTrigger 플러그인이 작동되지 않는 것 같습니다
안녕하세요$(function(){ gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ '(min-width: 1024px)': function(){ let list = gsap.utils.toArray('.work ul li'); let scrollTween = gsap.to(list, { xPercent: -100 * (list.length - 1), ease: 'none', ScrollTrigger: { trigger: '.work', pin: true, scrub:1, start: 'center center', end: '300%', markers: true, } }); } }) });현재 여기까지 작성을 하였는데 창 새로고침과 동시에 갤러리 가장 끝쪽으로 넘어가버립니다.콘솔에서는 이렇게 뜨구요,,,markers도 안 보이는 걸 보니 플러그인이 작동되지 않는 것 같은데코드를 전부 똑같이 치고 몇 번을 다시 봤는데도 전혀 안 되네요...파일 첨부를 어떻게 하는지 몰라서 제 코드 파일 다운로드 링크를 함께 올립니다.한번 확인 가능할까요?ㅜㅜhttps://bigfile.mail.naver.com/download?fid=JYbZa6JnM6mraAUjKCY9KqvdHqUmKoEmFAU/KxvqKxg/HquXFA2dFAtqaxvjF6UlazKZaztlF4U/FrpSMoUdaAMqaxI0KrtlKA+oFAb=
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input checked 질문합니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문내용: checked 초기에는 선택이 되지만checked가 해제된 상태로 돌아가지 않습니다. html <header> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <nav class="header__nav"> <ul class="header__nav-list"> <li><a href="#home" class="header__menu-link">HOME</a></li> <li><a href="#profile" class="header__menu-link">PROFILE</a></li> <li><a href="#projects" class="header__menu-link">WORKS</a></li> <li><a href="#resume" class="header__menu-link">RESUME</a></li> <li><a href="#contact" class="header__menu-link">CONTACT</a></li> </ul> </nav> <a href="#home" class="header__top-btn">TOP</a> </header>css .header__nav { position: fixed; top: 0; left: -100%; list-style: none; z-index: 1000; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } /*checked 안된상태*/input[id=trigger]:checked ~ nav.header__nav { transform: translateX(0); left:0 }input[id=trigger] { display: none; } label[for=trigger] { display: block; width: 25px; height: 24px; position: relative; cursor: pointer; } label[for=trigger] span { position: absolute; top: 0; left: 0; display: block; height: 2px; width: 100%; background: #FFD24C; transition: 0.3s; } label[for=trigger] span:nth-child(1) { top: 0; } label[for=trigger] span:nth-child(2) { top: 50%; } label[for=trigger] span:nth-child(3) { top: 100%; } /* 체크박스 선택 시 */ input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { display: none; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
./forest.png 파일은 어디서 다운 받을 수 있을까요?
./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.
