묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
뷰티파이 설치 관련 문의
30:00 익스텐션 뷰티파이 설치 시 제 코드에서는 이렇게 나오는데, 설치해서 사용해도 되는건가요??
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
선생님 안녕하세요
선생님 안녕하세요 무료강의 들으면서 말도 안 되는 구성에 말도 안 되는 가격으로 또 처음 출시시 할인까지해주셔서 너무 감사합니다. 이전 풀스텍 강의 바로 결제했고, 다른거 하면서 무료강의부터 듣고 학습중인데이번에 나온 리액트 강의도 당연 구매해서 학습할 예정인데, 이 전에강의는 수강기간이 무제한으로 나와있던데지금 리액트 포함 강의는 36개월만 들을수 있는건가요? 물론 몇회독을 할수있는 시간이긴한데, 전에 강의랑 비교해서 이 강의는 수강기간이 무제한이 아니라 문의글 남겨봅니다.항상 감사합니다.
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드3
<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span></div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div id="result" class="word__result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle">버튼을 누르세요.</div> <div class="lotto__box" id="lottobox"> <span id="lotto1">3</span> <span id="lotto2">5</span> <span id="lotto3">10</span> <span id="lotto4">24</span> <span id="lotto5">30</span> <span id="lotto6">34</span> </div> <button class="button">Button</button> </div> </div> </div> </body> </html>* { box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .wrapper{ width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title { color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title{ font-size: 15px; font-weight: 900; } .game__subtitle{ font-size: 11px; color: #999999; } .word__result{ font-size: 11px; font-weight: 700; } .word__text{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox{ width: 130px; height: 24px; border-radius: 5px; } .search{ font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .lotto__box { width: 130px; height: 21px; border: 1px solid #000000; border-radius: 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px; font-size: 10px; font-weight: 700; font-family: Malgun Gothic; background-color: #ffe400; } .button { width: 62px; height: 24px; border-radius: 5px; font-size: 11px; font-weight: 700; }질문 1. game__container 에서 display 하고 align-items center 로 했는데 왜 끝말잇기 칸은 사이사이에 공백이 잘 들어가 있는데 lotto 부분은 button 부분이 이상하게 붙어있습니다.ㅠ똑같은 game__container 적용 받는데 왜 lotto button 칸만 이럴까요ㅠㅠ?혹시 div 설정 안해서 그런가 해서<div class="button"><button>Button</button></div>로 해도 똑같습니다..왜 이런 현상이 발생할까요ㅠㅠ?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
part1을 수강하지 않아도 지장이 없다 하셨는데
part1 및 전반적인 IT배경지식이 없으면 진도를 따라가기 상당히 어렵게 강의가 구성되어 있습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의에 관해 문의 드립니다.
part1 을 수강하지 않아도 part2 수강에 지장이 없다고 하셨는데 프로그램 설치부터 생략을 하셔서 강의 수강이 진행이 안 됩니다. 어떻게 수강을 진행하는게 바람직할까요?
-
미해결html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정
배 svg 그리는 방법
배나 비행기 같은 svg 요소를 구현할 때, 하나의 완성된 SVG 대신 여러 개의 작은 요소들로 분리해서 겹치는 방식을 사용하는 이유가 궁금합니다.
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
vue + springboot 과정 오픈예정일
안녕하세요 선생님... 선생님의 vue + springboot 과정이 너무 기대가되는데 혹시 언제 오픈 예정이신지 너무 궁금합니다.
-
미해결html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정
영상이 안보여요
영상이 안보입니다다른 강의는 보이는데 왜이럴까요.
-
미해결생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
8강 재생이 안 됩니다
8강 재생이 안 되네요! 오류인가요??
-
미해결생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
안녕하세요! 혹시 코드 내용은 따로 안 올려주시나요??
안녕하세요. 수업 잘 듣고 있습니다.혹시 코드 내용은 따로 안 올려주시는지 궁금합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포 후 모바일에서 접속하면 게시판 게시글이 안보이는 문제
안녕하세요. 먼저 강의 잘 들었습니다. 다름이 아니라 배포 후 웹으로는 업무게시판의 게시글이 잘 보이는데 모바일로 접속 시에는 게시글이 없는 것으로 나옵니다.웹(개발자 도구로 모바일 디바이스 버전으로 봐도 잘 보입니다) 모바일 이유가 뭔지 궁금합니다~
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드2 관련 질문 드립니
<body> <div class="wrapper"> <div class="wrapper__header"> <div class="contents__title"> <div class="title">Updated news</div> <div class="subtitle">TODAY STORY</div> </div> <div class="divideLine"></div> <div class="contents__body">오늘의 기분 너무 좋음</div> </div> <div class="wrapper__body"> <div class="contents__title"> <div class="title">My Video</div> <div class="subtitle">INTRODUCE YOURSELF</div> </div> <div class="body__video"></div>.contents__title{ display: flex; flex-direction: row; align-items: center; } .title { color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .contents__body{ font-size: 11px; color: gray; } .wrapper__body { width: 100%; height: 270px; background-color: aqua; } .body__video { width: 100%; height: 240px; background-color: #c4c4c4; }피그마에서는 my video 밑 회색 부분이 사이즈가 width 464px height 240px 이길래 width는 100%로 주고 height 240px로 설정했는데, 이렇게 안맞길래, height 100%로 했더니이렇게 됩니다.. 왜이렇게 될까요?? 100% 이면 파란 부분까지 회색 부분도 가야하는 것 아닌가요?자식 클래스는 부모 클래스 따라오는 걸로 알고 있었는데 이상하게 되어서 당황스럽습니다.. 가르쳐주시면 감사드리겠습니다. My Video 라인에서 조금 떨어트리고 싶어서 .body__video { width: 100%; height: 100%; background-color: #c4c4c4; margin: 15px 0px 25px 0px; } margin 줬더니padding은 먹지도 않는데.. 제가 뭘 잘 못 알았을까요ㅠㅠ?
-
해결됨[코드캠프] 시작은 프리캠프
과제 모범답안 유무
<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <style> * {box-sizing: border-box;} * {font-family: Noto Sans CJK KR;} .pb { position: relative; left: 625px; top: 60px; bottom: 60px; width: 670px; height: 960px; border: 1px solid #aacdff; border-radius: 10px; box-shadow: 7px 7px 39px 0px #0068ff40 ; } .pb2{ width: 470px; height: 818px; position: relative; top: 72px; left: 100px; } .sb1{ font-weight: 700; font-size: 32px; color: #0068ff; } .sb2{ display: flex; flex-direction: column; gap: 21px; position: relative; top: 60px; } .sb2 > div{ width: 466px; height: 80px; color: #797979; font-size: 13px; } .sb2 div { border-bottom: solid 1px #cfcfcf; } .sb2 div.email{ border-bottom: solid 1px #0068ff; } .sb2 div.radio { width: 90%; height: 23.94px; display: flex; flex-direction: row; justify-content: center; gap: 30px; margin-top: 50px; border: solid #ffff ; } .sb2 div.checkbox { position: relative; top: 50px; width: 454px; height: 21.06px; border: solid 1px #ffff; display: flex; flex-direction: row; justify-content: center; } .sb2 div.hr { position: relative; top: 60px; border: #ffff; } .sb2 div.last { width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 15px; color: #0068FF; } </style> </head> <body> <div class="pb"> <div class="pb2"> <div class="sb1">회원가입을 위해 <br> 정보를 입력해 주세요 </div> <div class="sb2"> <div class="email">*이메일</div> <div>*이름</div> <div>*비밀번호</div> <div>*비밀번호 확인</div> <div class="radio"> <label><input type="radio" name="gender"> 여성 </label> <label><input type="radio" name="gender"> 남성 </label> </div> <div class="checkbox"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="hr"> <hr> </div> <div class="last"> 가입하기 </div> </div> </div> </div> </body> </html>어찌저찌 하긴했는데, 억지로 끼워넣기 한 기분입니다..혹시 강사님이 해 두신 모범답안 이라던가 보고 참조할 수 있을만한 것이 있을까요?? 문제점이..스크롤이 되지 않습니다.. 그리고 pb를 relative로 해서 탑에서 60px 간격 두게 설정했는데 설정이 안먹는 느낌입니다.div 대부분 relative로 했는데, relative로 했을 때 바로 위 div 기준으로 하는것인가요? 하다 보면 이상하게 겹쳐서 전에 div에 선이 그어져있거나, 단어가 겹쳐 있거나 합니다예) div class="hr" 로 했는데 위에 checkbox 란에 선이 이상하게 겹쳐있습니다예2) div class="last"도 relative로 설정해서 figma에 나온대로 30px 간격두고 싶었는데 hr라인이랑 겹쳐서 "가입하기" 문구가 들어가 버리더라구요.. figma에 나온 수치대로 입력하니 사이트는 이상하게 되고 해서 제가 임의로 숫자를 늘리고 해서 야매로 만들었어요.. 더 좋은 script가 있으면 보고 참조하고 싶습니다.부탁드립니다.
-
해결됨[코드캠프] 시작은 프리캠프
과제 연습 질문
계속 <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <style> * {box-sizing: border-box;} * {font-family: Noto Sans CJK KR;} .pb { width: 670px; height: 960px; border: 1px solid #aacdff; border-radius: 10px; box-shadow: 7px 7px 39px 0px #0068ff40 ; } .pb2{ width: 470px; height: 818px; position: relative; top: 72px; left: 100px; } .sb1{ font-family: Noto Sans CJK KR; font-weight: 700; font-size: 32px; color: #0068ff; } .sb2{ display: flex; flex-direction: column; gap: 21px; position: relative; top: 60px; } .sb2 > div{ width: 466px; height: 80px; color: #797979; font-size: 13px; } .sb2 div { border-bottom: solid 1px #cfcfcf; } .sb2 div.email{ border-bottom: solid 1px #0068ff; } .sb2 div.radio1 { width: 140px; height: 23.94px; display: flex; margin-top: 50px; border: solid #ffff ; } .sb2 div.radio { border: solid #ffff; </style> </head> <body> <div class="pb"> <div class="pb2"> <div class="sb1">회원가입을 위해 <br> 정보를 입력해 주세요 </div> <div class="sb2"> <div class="email">*이메일</div> <div>*이름</div> <div>*비밀번호</div> <div>*비밀번호 확인</div> <div class="radio1"> <div class="radio"> <input type="radio" name="gender"> 여성 <input type="radio" name="gender"> 남성 </div> <div> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> </div> </div> </div> </div> </body> </html>뭐가 잘못되었는지 모르겠어요..ㅠㅠ....
-
해결됨[코드캠프] 시작은 프리캠프
<style> 에 *와 div 차이
안녕하세요부산사는 유아람이라고 합니다.수업 잘 듣고 있습니다. 한 가지 궁금한 점이 있어서 이렇게 글을 작성합니다. *{} 가 전체 선택자이고div {} 는 태그 선택자라고 가르쳐주셨는데, 마지막에 실험을 하는데서 궁금해서 말씀드립니다. <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> * { box-sizing: border-box; } div { width: 80px; height: 80px; border: 1px solid red; padding: 10px; } /* #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } */ </style> </head> <body> <div id="contentBox">박스 1</div> <div>박스 2</div> <div id="borderBox">박스 3</div> </body> </html><body><div>박스 1</div> 는 처음에 아무런 style을 지정하지 않았을 때, 박스로 나타나지 않고 그냥 텍스트 "박스 1"만 적혀있었는데, 이건 제 눈에 안보이는 박스가 이미 형성이 되어있는데 색이나 크기를 지정하지 않아서 그냥 텍스트로 보이는게 맞나요? div { width: 80px; height: 80px; border: 1px solid red; padding: 10px; }이걸 지정하면서 보이지 않던 박스가 생긴걸까요?밑에 설정을 한 div 전체니까 div{}로 하지않고 *를적용해서<!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> * { box-sizing: border-box; } * { width: 80px; height: 80px; border: 1px solid red; padding: 10px; } /* #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } */ </style> </head> <body> <div id="contentBox">박스 1</div> <div>박스 2</div> <div id="borderBox">박스 3</div> </body> </html>이렇게 나오던데 이건 왜 이렇게 되는걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
웹디자인 기능사가 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능합니까? 추가 된 유형이나 작업 같은 것이 없어 그대로 수강하면 됩니가?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A유형~C유형 수험자 제공파일 어디서
A유형~C유형 수험자 제공파일은 어디서 다운 받습니까? D유형과 E유형은 올려져 있는데 A유형~C유형 수험자 제공파일은 어디서 다운 받아야 할지요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
마우스 채워지는 텍스트
선생님과 똑같이 따라했는데요,마우스와 같은 위치에서 채워지는게 아니라 마우스가 한참 위에 있어야 뒤늦게 올라오는데 이게 맞는건가요..? 강의에서 선생님 완성본도 비슷하게 뒤늦게? 올라오던데 마우스 위치와 같이 채워지게는 못하는 걸까요?높이와 넓이 문제인 것도 같아서 여러 수정을 해봤는데 안 되네요ㅜㅜ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다.import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
모바일 화면 전환
네비게이션 바 만들 때, 데스크탑에서 모바일로 화면 전환하는 거 어떻게 해요?
