묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 애니메이션을 위한 GSAP 가이드 Part.01
어몽이가 안나와요!! 저만 그럴까요?
안녕하세요!키프레임 파헤치기 실습예제에 어몽이가 안 나오는 데 저만 그럴 걸까요?ㅠㅠ 결과물 화면에 아무것도 뜨지 않습니다. 백그라운드에 있는 url 이미지는 열리는데 말이죠...
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 vanilla.html 질문합니다.
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ..scrollMove 라는 함수 매게변수에 moveY가 있는데요.moveY가 움직이는 y값이라고 하셨잖아요그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠?moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
-
해결됨만들면서 배우는 HTML/CSS
콘텐츠 영역 페이지 위치 조정 문제
안녕하세요. 페이지 중간에 콘텐츠 영역 넣는 실습을 하고 있는데 크롬창에서 보니 저는 수치가 저렇게 뜨길래 mergin-left, mergin-top을 각각 -640, -480으로 지정했습니다.그런데 확인해보니위치가 다음과 같이 나오더라구요😣 코드는 아래와 같이 작성했습니다..!.contents{ position: absolute; top:50%; left:50%; margin-left:-640px; margin-top:-480px; z-index:20; text-align: center; font-family: "Malgun Gothic", sans-serif; } 그래서 수코딩님과 같은 수치로 코드를 작성해봤는데정중앙에 오는 것 같아요! 뭐가 이상한건가요?..
-
해결됨[코드캠프] 시작은 프리캠프
CSS정렬 - 회원가입 과제 코드 공유
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다.100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다.<!-- test.html --> <!DOCTYPE html> <html lang="ko"> <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>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
-
해결됨[코드캠프] 시작은 프리캠프
반복문 질문
안녕하세요?개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요?덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드 1탄 강의 수강 중 질문드립니다
사진과 같이 wrapper__left__header와 wrapper__left__body를 정의하는 순간부터 레이아웃이 강의와는 다르게 망가지는데 뭐가 문제인지 모르겠습니다 ㅠㅠ flex로 정렬해 봐도 바뀌는 게 없습니다... 왜인지 알려주시면 감사하겠습니다
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에반응형 관련 강의도 있을까요 ㅠㅠ?gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;
-
미해결처음 만난 리액트(React)
섹션3 JSX 코드 작성해보기
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
-
미해결처음 만난 리액트(React)
에러가 나요ㅠㅠ
에러가 나서요ㅠ
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인폼) 강의의 파일이 없는것 같아요
안녕하세요! 코딩웍스 선생님 강의를 열심히 듣고있는 학생입니다! :)공유해주신 폴더 모두 찾아보았는데 모바일 웹 HTML 와이어프레임 구조 , HTML 와이어프레임 실습 (로그인폼) 관련된 파일을 찾아봐도 없는데 혹시 어디에 있는지 알려주시면 감사하겠습니다!
-
미해결처음 만난 리액트(React)
npm start 이후 크롬창에 아무것도 뜨지않음
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.사진 첨부 순서대로 index.js, Comment.jsx, CommentList.jsx, npm start시 출력되는 크롬 화면입니다. 이전 시계 실습에서도 동일하게 빈 화면이 출력 됐는데 타 수강생님이 올려주신 코드를 적용하니 해결이 됐어서 다음 챕터를 진행하였습니다. 그런데 동일하게 빈화면이 출력되어 어떤 부분에서 문제가 있는지 도저히 찾을 수 없어서 질문드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 no environment
postman에서 우측 상단의 no environment를 클릭해도다른 항목이 나오지 않습니다.
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 질문
선생님 안녕하세요. 햄버거 메뉴 만들 때label에 position: relativelabel span 에 position: absolute 이렇게 포지션값을 주었는데,사이드바 만들면서 label의 position: relative 를 absolute로 바꿔주게 되는데그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다label[for=trigger] { /* border: 1px solid red; */ width: 30px; height: 20px; display: block; position: absolute; cursor: pointer; right: 10px; top: 50%; transform: translateY(-50%); transition: 0.5s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } /* sidebar */ .sidebar { background-color: #000; width: 300px; height: 100vh; position: fixed; right: -300px; transition: 0.5s; }
-
미해결만들면서 배우는 HTML/CSS
웹페이지 따라하고 열었는데 사진이 안나와요
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>심플포트폴리오</title> <tink href="css/reset.css" rel="stylesheet" type="text/css"/> <tink href="css/reset.css" rel="stylesheet" type="text/css"/> <script src="js/jquery.1.12.4.js" type="text/javascript"></script> <script src="plugins/bxslider/js/jquery.bxslider.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('.slider').bxSlider({ controls:false, pager:false, auto:true }); }); </script> </head> <body> <div class="background__01"></div> <div class="background__02"></div> <div class="background__03"></div> </div> </body> </html> html,body{ width: 100; height: 100; } .bx-wrapper, .bx-vi.slider.slider{ width: 100; height: 100; } .background__01{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; } .background__02{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; } .background__03{ width: 100; height: 100; background: url("../images/a.jpg") no-repeat; background-size: cover; background-image: center; }어떻게 해야 하나요 ??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input이 focus 되었을때
border을 없에거나 바꾸고 싶은데 어떻게 해야 되나요?border:none 해도 그대로고 border 속성을 바꿔도 밖에 검은색 solide가 없어지지 않습니다. 왜 이렇게 되는건가요
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
a:hover {color }
질문글을 작성하다가 원인을 찾아서 문제해결했습니다만, 추후 다른 분께 도움이 될까 봐 간략하게 올립니다.문제#intro .intro-first-card .overlay a:hover { color: #fafa6f; }위 코드가 동작하지 않았습니다.원인bootstrap.min.css 버전에 따른 .link-light 차이강의&수업자료 버전은bootstrap@5.0.2/dist/css/bootstrap.min.css을 사용 .link-light {color: #f8f9fa;}제 버전은 bootstrap@5.2.1/dist/css/bootstrap.min.css .link-light {color: #f8f9fa!important;}해결#intro .intro-first-card .overlay a:hover { color: #fafa6f !important; }
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
4-3 함수선언방식 질문
function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토
slide content 3개 까지만 있는데,3개 이상이면 어떻게 해야되나요??
-
미해결처음 만난 리액트(React)
react 18에 맞춰서 작성한 코드입니다.
바뀐 react 18에 따라서 작성된 코드입니다.바뀐 리엑트로 어떻게 코드 작성해야하는지 모르겠는 분들은 참고하시면 좋을것 같습니다! https://github.com/matt700395/first-meet-react/commit/7df1b7367e6a2c00f21ae30a92e39102959e373f
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다른건 다되는데 typeerror 가 뜹니다..
1.<pre>TypeError: Cannot read properties of undefined (reading 'create')const express = require("express"); const cors = require("cors"); const { application } = require("express"); const app = express(); const port = 8080; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY:", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imgUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imgUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imgUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 생겼습니다."); }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id } = params; res.send(); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공"); }) .catch((err) => { console.error(err); console.log("DB 연결 에러 ㅠ "); process.exit(); }); }); 그 전까진 다 실행 잘되고 테이블도 잘 만들어졌는데 postman 에 send 를 누르면 이렇게 나옵니다body 안에는 잘 들어가는데 create 에서 문제가 생긴거 같습니다. ㅠㅠ
