173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요. 먼저 강의 잘 들었습니다. 다름이 아니라 배포 후 웹으로는 업무게시판의 게시글이 잘 보이는데 모바일로 접속 시에는 게시글이 없는 것으로 나옵니다. 웹 (개발자 도구로 모바일 디바이스 버전으로 봐도 잘 보입니다) 모바일 이유가 뭔지 궁금합니다~
해결됨
[코드캠프] 시작은 프리캠프
<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> 뭐가 잘못되었는지 모르겠어요..ㅠㅠ....
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요 부산사는 유아람이라고 합니다. 수업 잘 듣고 있습니다. 한 가지 궁금한 점이 있어서 이렇게 글을 작성합니다. *{} 가 전체 선택자이고 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유형 수험자 제공파일은 어디서 다운 받습니까? D유형과 E유형은 올려져 있는데 A유형~C유형 수험자 제공파일은 어디서 다운 받아야 할지요?
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님과 똑같이 따라했는데요, 마우스와 같은 위치에서 채워지는게 아니라 마우스가 한참 위에 있어야 뒤늦게 올라오는데 이게 맞는건가요..? 강의에서 선생님 완성본도 비슷하게 뒤늦게? 올라오던데 마우스 위치와 같이 채워지게는 못하는 걸까요? 높이와 넓이 문제인 것도 같아서 여러 수정을 해봤는데 안 되네요ㅜㅜ
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 [그랩마켓] 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 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요? 제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요. 또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요. docker-compose down시 계속 permission denined가 뜹니다. 우선 저는 가상머신 os:ubuntu에서 프로젝트를 진행중이며, sudo 붙여서 종료 시도, sudo docker kill 로도 강제 종료를 시도했지만 permission denined이라 다 실패하였습니다. 최후의 수단으로 docker설치 삭제 후, 재설치도 해보았지만 안타깝게도 실패하였습니다. 하여 container를 종료하려고 할 때마다 가상머신 종료하고 다시 들어가야하는 매우 불편하고도 불운한 상황에 처해있습니다. groups를 통해 docker가 있는 것도 확인하였습니다. 도저히 왜 안되는지 모르겠습니다. 도움이 절실합니다... 감사합니다.ㅠ
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 [그랩마켓] 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로 만드는 나만의 회사 웹사이트: 완벽 가이드
npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠? 그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 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 )
해결됨
웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!
안녕하세요! 강의 잘 보고 있습니다! 저렇게 사과에 적용된 회전을 다시 제거했을때, 유저가 모바일 화면에서 게임을 플레이 하려면 휴대폰을 가로로 뒤집을 수 밖에 없을 텐데, 그러면 OrientationGuide가 활성화가 되어 플레이를 할 수 없지 않나요?
미해결
포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
소스코드 보고 분석할려고 다운받았는대 실행이 아예 안되요 script 에 start 넣어도 모듈 에러 뜨고 실행방법 따로 있나요?
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
CSS를 사용하려면 style 태그를 작성한 다음에 작성해야하나요?
