묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
스크립트 부분이 이해가 어렵네요
align = (e) => { setX(e.clientX); setY(e.clientY); },이 부분에서 align이 무슨 함수인가요?보통 함수 사용시에는 function이라던가 익명함수도 var, const등 변수에 할당하여 쓰던데 딸랑 이름만 있고 화살표 함수만 있는 함수는 처음봐서 헷갈립니다... if (activeImage) { gsap.set(image, { x: gsap.getProperty(activeImage, "x"), y: gsap.getProperty(activeImage, "y"), }); }여기서 굳이 activeImage를 밑에서 activeImage = image;이렇게 할당하여 사용할 필요가 있나요?그냥 바로 let으로 선언했던 image를 넣어도 상관없을 것 같아서요 그리고 이 강의에서 사용하셨던fade, fade.play(),fade.reverse()이 코드들은 gsap에서 사용하는 코드들인가요 아니면 일반 자바스크립트에서도 사용하는 코드들인가요..? 제가 기초가 부족해서 그런 걸 수도 있겠지만 jquery도 아니고 js에서 이렇게 사용하는 걸 처음봐서요,,,
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포관련 질문드립니다.
저는 vercel과 cloudtype 을 이용해 배포를 했습니다.gitlinkfront-linkbackend-link업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일확인 부탁드립니다.
메일확인 부탁드립니다. 아직 권한이 안왔어요!복습이 하고싶어요... 이메일 : wkemrm@gmail.com
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
14강 - 72,73번 강의 영상이 동일한거 같습니다.
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.)- 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~- 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 14강 72, 73번 강의 영상이 동일한거 같습니다. 72강 23초 화면 73강 23초 화면 확인 요청드립니다..ㅠㅠ
-
미해결처음 만난 리액트(React)
존재하지 않는 수업이라고 떠요
이라고 뜨고 첫번째 수업으로 이동도 되지않아요
-
미해결워드프레스로 간단히 만드는 레스토랑 홈페이지
코드
안녕하세요 혹시 코드가 어디에 있나요??? 메뉴만들기부분html쪽이요~! 16:06
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
몇가지 질문드립니다.
안녕하세요 우선 좋은 강의 정말 감사합니다. 풀스텍 강의라서 더 좋은거 같은데, 메일로 알람을 받았는데 선생님 강의 25%할인은 언제까지인가요? 지금 유료 강의 25%해서 24000원대 할인 기간이 안나와 있어서 기간이 궁금합니다. 아직 들어보지 못해서 무료 강의 한번 들어보고 유료강의도 진행하고 싶어서요 그리고 프로그램은 이클립스만 사용하시는거 같은데, 저는 인텔리제이 사용중인데 프로그램이 달라서인텔리제이 사용자도 괜찮을까요?
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
모바일 사이즈에 대해 질문있습니다.
안녕하세요 테일윈드 강의에서 반응형 부분의 강의를 보다가 궁금한 점이 생겨 여쭤보고 싶어 글을 남깁니다. 예를 들어 모바일 청첩장처럼 모바일사이즈만 사용할 경우 리액트에서는 처음에 라이브러리를 사용하지 않고 모바일 사이즈로만 설정하는 방법이 궁금합니다. 그리고 테일윈드에서 모바일 사이즈만 할 경우에는 sm 이 부분만 사용을 설정하면 되는지 궁금합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
PUT, DELETE 등의 http 메소드 질문있습니다.
안녕하세요. 오늘도 좋은강의 정말 감사히 듣고 있습니다.제가 웹개발자가 아니라서 정확하게는 잘 모르긴 합니다.6-3에서 문의글 상태변경, 삭제할때 PUT, DELETE 인 http메소드를 사용하시던데제가 알기로는 PUT, DELETE는 보안에 취약한것으로 알고 있는데 사용해도 상관은 없는지 궁금합니다.만약 사용하지 않는다면 상태변경, 삭제할때 GET과 POST방식만으로 어떤식으로 사용해야할지 로직정도만 알려주시면 감사하겠습니다.
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Just 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a> </div> <div class="navi"> <ul class="menu"> <li>탑 <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li>아우터 <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li>팬츠 <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li>악세서리 <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a> <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a> <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"></div> <div class="btn"> <a href="#none" class="btn1">공지사항</a> <a href="#none" class="btn2">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a> <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a> <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> <a href="#none">법적고지 개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a> </div> <div class="SNS"> <a href="#none"><img src="images/sns-01.png" alt=""></a> <a href="#none"><img src="images/sns-02.png" alt=""></a> <a href="#none"><img src="images/sns-03.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; background-color: #fff; color: #333333; font-size: 15px; } body a{ text-decoration: none; color: #333333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; border: red solid 1px; box-sizing: border-box; position: relative; z-index: 10; } .slide{ height: 300px; width: 1200px; border: red solid 1px; box-sizing: border-box; position: relative; overflow: hidden; } .items{ height: 200px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } footer{ height: 100px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } .items > div{ height: 200px; float: left; } .footer>div{ float: left; height: 100px;} .header-logo{ width: 200px; border: red solid 1px; box-sizing: border-box; float: left; margin-top: 25px; } .navi{ width: 500px; border: red solid 1px; box-sizing: border-box; float: right; text-align: center; } .slide-items{ border: red solid 1px; box-sizing: border-box; position: absolute; height: 300px; font-size: 0; left: 0; top: 0; } .news{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: smaller; } .banner{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .shortcut{ width: 390px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .footer-logo{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; margin: 20px; } .copyright{ width: 700px; border: red solid 1px; box-sizing: border-box; text-align: center; height: 100px; padding-top: 10px; color: darkgray; float: left; } .sns{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; } .sns a img{margin: 20px;} /* 네이게이션 */ ul.menu{padding: 0px; list-style: none;} .menu li{ float: left; background: #fff; width: 25%; font-weight:bolder; } .sub-menu{ display: none; background: #fff; } .sub-menu a { display: block; background: #fff; } .menu>li>a {display: block; padding: 5px;} ul.menu li:hover > a { color: #fff; background-color: black; } ul.menu li .sub-menu a:hover{ color: #fff; background-color: black; } /* 탭메뉴 */ .btn{margin-left: 4px;} .btn a{ display: inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; width: 100px; text-align: center; margin-right: -6px; background-color: #ddd; margin-bottom: -3px; border-bottom: none; } .tab-inner{width: 80%; margin: auto; border: 1px solid #000; box-sizing: border-box;} .tab1{border: 1px solid #000; padding: 0 10px;} .tab1 a{ display: block; padding: 5px; border-bottom: #333333 1px solid; } .tab1 a:last-child{border-bottom: none;} .tab1 a b {float: right; font-weight: normal;} .tab2{ border: 1px solid #000; display: none; height: 165px; text-align: center; padding-top: 20px; box-sizing: border-box; } .btn a.active {background-color: #fff;} $(".menu li").mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $(".menu li").mouseleave(function(){ $('.sub-menu').stop().slideUp() }) $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') },3500) $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $(this).addClass('active') $(this).siblings().removeClass('active')
-
미해결HTML/CSS 베이스캠프
섹션 9 css구현에서 background img넣는게 안되네요
background-image: url('images/img_hodu_header.png') bottom right no-repeat이렇게 했는데 배경에 이미지로 고양이 사진이 안들어가요ㅜ
-
미해결나만의 포트폴리오 웹페이지 만들기
CSS가 적용이 안됩니다.
/* ABOUT AREA */ .about-area { height: auto; position: relative; } .about-area > .picture { display: block; text-align: center; padding: 20px; } @media (min-width: 992px) { .about-area > .picture { width: calc(40% - 40px); display: inline-block; } } .about-area > .picture > img { max-width: 300px; max-height: 300px; border-radius: 15px; } .about-area > .picture > .name { font-size: 25px; text-align: center; padding: 15px 0; } .about-area > .picture > .description { font-size: 14px; font-family: 'Noto Sans KR', sans-serif; } .about-area > .text { display: block; padding: 30px; } @media (min-width: 992px) { .about-area > .text { width: calc(60% - 100px); display: inline-block; padding: 0 50px; } } .about-area > .text * { font-size: 16px; }4-2. CSS 강의에서분명 똑같은 방식으로 붙여넣었지만 소개 글 및 정보란이 사진 오른쪽으로 가지 않습니다... 어떻게 해야할까요
-
미해결HTML/CSS 베이스캠프
섹션 9, 10에 압축폴더가 압축파일이 이상해요
압축파일이 안열려요 메일 알려드릴게요 보내주세요ㅜ
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요 선생님 특정 IP만 접속 가능한 기능 강의 예정 있으실까요??
CH5-1에서 언급해주신 특정 IP만 접속 가능한 화이트리스트, 블랙리스트 기능 혹시 강의 예정 있으실까요?? 막상 언급하시니 궁금해서요...
-
미해결처음 만난 리액트(React)
안드로이드 에뮬레이터 오류
안녕하세요 vscode에서 안드로이드 에뮬레이터를 사용해서 켰는데 이렇게 뜨는데 무슨 오류일까요 ㅠㅠ 계속 안 고쳐지네요ㅠㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
일반적인 css 꾸미기에서 width와 height의 값?
강의 잘 듣고 있습니다.질문이 있는데요,일반적인 css 꾸미기에서 width와 height의 값은 개발자가 아닌웹디자이너가 항상 알려주기도 하나요?즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요?피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
안녕하세요
스프링관련 프로젝트를 하려고하는데 마침 무료강의가 있어서 들어보려고 합니다.그런데 유료강의랑 무료강의랑 커리큘럼이 비슷한 것 같은데 차이점이 있을까요? 유료강의가 좀 더 자세히 알려주는건가요? 아니면 최신업로드여서 유료강의인가요? 궁금합니다.
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
다음강좌가 또나오나요? 언제쯤 출시되나요?
오늘 올라온 새소식보고 문의남깁니다.현재 이강좌 구입해서 아직 듣고있지않고있거든요다음강좌가 스프링부트 리액트라고하는데지금강좌랑 내용상 겹침이 거의없는건가요?? 한가지 건의를드리자면 next.js나 장고계열에선 강의들을보면 결제기능까지 탑재하는 강의내용이 많은데 유독 스프링계열강의들에선 crud까지만 강의하고 대부분의 강좌들이 결제기능구현하는내용이 없더라구요스프링공부하는이유가 쇼핑몰같은걸 갠적으로 만들어보려고 학습하는데;;;; 다음강의 출시하실예정이라면 개인이 혼자 웬만한 웹사이트 제작할수있게 결제부터 다양한 기능구현에대한 내용을 포함시켜주실수있는지 궁금합니다. 왜 스프링계열에선 결제api연동하는걸 강의하는내용들을 다루지않는지 궁금하긴하네요
-
해결됨Figma 디자인부터 퍼블리싱까지
모바일 포트폴리오 이미지
안녕하세요,모바일 버전 포트폴리오 이미지에서#portfolio .container { /* display: flex; flex-wrap: wrap; gap: 20px; */ }이 부분을 주석으로 바꾸면이렇게 세로가 아니라 가로로 바뀌는데뭐가 잘못된걸까요?
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
랭크메쓰 설정방법 질문
저는 위에 같이 나오는데 어떻게 설정하면 될까요?
