묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 시작은 프리캠프
<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>이렇게 나오던데 이건 왜 이렇게 되는걸까요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
웹디자인 기능사가 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능합니까? 추가 된 유형이나 작업 같은 것이 없어 그대로 수강하면 됩니가?
-
해결됨[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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로 만드는 나만의 회사 웹사이트: 완벽 가이드
모바일 화면 전환
네비게이션 바 만들 때, 데스크탑에서 모바일로 화면 전환하는 거 어떻게 해요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind css 설치 위치
홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요?제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요.또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose down 안되는 현상
안녕하세요.docker-compose down시 계속 permission denined가 뜹니다.우선 저는 가상머신 os:ubuntu에서 프로젝트를 진행중이며, sudo 붙여서 종료 시도, sudo docker kill 로도 강제 종료를 시도했지만 permission denined이라 다 실패하였습니다.최후의 수단으로 docker설치 삭제 후, 재설치도 해보았지만 안타깝게도 실패하였습니다.하여 container를 종료하려고 할 때마다 가상머신 종료하고 다시 들어가야하는 매우 불편하고도 불운한 상황에 처해있습니다. groups를 통해 docker가 있는 것도 확인하였습니다. 도저히 왜 안되는지 모르겠습니다.도움이 절실합니다... 감사합니다.ㅠ
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
결제기능 관련
결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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;질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
vite 설치 관련 문의
npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠?그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
motionpath 플러그인에서 align의 자세한 역할 궁금합니다
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다.그래서 codepen을 이용해서 강의 내용처럼align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지,그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
실습에 사용되는 이미지
실습에 사용되는 이미지들 출력이 안되고 있습니다.(e.g. https://via.placeholder.com/400x400.png?text=City)
-
해결됨웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!
landscape에 대하여
안녕하세요! 강의 잘 보고 있습니다!저렇게 사과에 적용된 회전을 다시 제거했을때, 유저가 모바일 화면에서 게임을 플레이 하려면 휴대폰을 가로로 뒤집을 수 밖에 없을 텐데, 그러면 OrientationGuide가 활성화가 되어 플레이를 할 수 없지 않나요?
-
미해결포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
portfolio-site 소스코드 받았는대 실행이 안돼요
소스코드 보고 분석할려고 다운받았는대 실행이 아예 안되요 script 에 start 넣어도 모듈 에러 뜨고 실행방법 따로 있나요?
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
style 태그를 사용할 때
CSS를 사용하려면 style 태그를 작성한 다음에 작성해야하나요?
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
강의와 제 결과가 달라요
강의화면 내 화면 이렇게 같은 200px로 적용을 했음에도 다르게 나오는 이유가 뭔가요?data-tooltip의 내용도 똑같이 입력했습니다.그리고 제 화면의 data-tooltip 내용이 중앙정렬되어있는데 이는 원래 이렇게 기본값이 설정되어있는건가요?(따로 text-align : center 를 지정하지 않았습니다)
-
미해결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
