묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
질문있습니다
섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고 평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다. 밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다. 웹사이트 삼성화재 바로가기 밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다. codepen 바로가기 네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다. 현재 디스플레이 none block 으로 만들었습니다. opacity 으로 적용 했지만 해결되지 않았어요. 혹시 좋은 방법 없을까 하고 질문올립니다.
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
answer 여러 개 나옵니다.
아무 선택지나 누른 후 새로고침을 하고 다시 시작하기 버튼을 누르면 answer가 여러개가 나옵니다. 크게 불편함은 없지만 신경이 쓰이는데 없애는 방법은 없을까요?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요! 다양한 태그와 function에대하여 질문드립니다
안녕하세요!코딩공부를 시작한지 2주 조금 넘는 코딩 신생아입니다 2주간은 생활코딩 유튜브를 보며 html,css,javascript를 공부했는데 그 뒤 처음으로 듣는 강의가 mbti toyproject다 보니 낯선 구조들이 몇몇 보여서요 ! 혹시 태그나 function 중 innerHTML / createElement/appendChild 등과 같은 요소는검색을 통해 하나하나 배워나가는 것일지, 어떻게 공부하면 좋을지 고민이 되어 질문드립니다. 검색을 하자니 기능을 몰라서 어떻게 검색해야할지도 아직 감이 안와서요 ㅠㅠ 처음 공부할 때 , 어떻게 익혀나가는게 좋을까요 ?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문드립니다 ㅠㅠ
안녕하세요 , 수업 제공 정말 감사합니다! 따라하던중 버튼을 누르면 index파일에서 begin을 정의하지않았다며 오류가 뜨네요 ㅠㅠ start.js const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); function begin(){ main.style.display = "none"; qna.style.display = "block"; } index button~~html부분 <button type="button" class="btn btn-danger mt-3" onclick="js:begin()"> 시작하기 </button> </section> <section id="qna"> <p>test!</p> </section> <section id="result"> </section> <script scr="./js/start.js" charset="utf-8"></script>
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
기초적인 질문이라 부끄럽지만 질문 드립니다
안녕하세요, html, css는 잘 알지만 javascript는 이 강의로 처음 접해보기에 강의 진행에 어려움을 느껴 질문 드립니다. 강의 중 const windowEvent = () => { // 코드 내용 }; 위와 같은 형태가 나오는데요, 이게 함수를 만드는 문법인건가요? function 함수이름() { } 과 같은 형태는 자주 봤는데 처음 보는 형태라 질문 드립니다. 더불어 제가 쓰는 에디터에서 자꾸 노란줄이 생기는데요 (visual studio code 사용중입니다) 이것과 관련해 초기에 세팅 작업이 필요한건가요? 또 7강 진행 도중 this.el.parentNode.style.transform = 'translateX(${this.movex}px)' 부분이 동작하지 않아 this.el.parentNode.style.transform = 'translateX('+this.movex+'px)'; 위와 같이 바꿨더니 동작하는데, ${}가 어떤 것인지 설명 부탁드립니다. 좋은 강의에 부족한 실력이지만 열심히 따라가려고 노력하고 있습니다. 답변 기다리겠습니다. 감사합니다.
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
타이핑을 반복해서 실행할 수 있나요?
typing 플러그인에서 글자를 한번 타이핑을 수행하고, 다시 반복해서 지속적으로 타이핑 에니메이션이 수행되었으면 합니다. 방법이 있는지요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
firefox에서 backface-visibility: hidden; 이 이상하게 먹힙니다.
안녕하세요. firefox에서 카드에 마우스 호버시 F의 글자가 남아 B와 겹칩니다. 아래 사진 첨부합니다. ie용으로 만든 파일은 정상 작동을 하나, 사파리에서 해결했던 것과 같이 밴더프리픽스만 먹였을 때는 해결이 안되는 것으로 보입니다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style 와 https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility 에서 브라우저 호환성을 확인했을 때 firefox에서 preserve-3d, backface-visibility 두 가지 모두 사용할 수 있는 속성으로 나와있는데 왜 안되는걸까요??
-
해결됨[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
result구현 오류... 질문드립니다.
두가지 오류가 있는거같습니다. const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 이런식으로 선언 했지만, +=연산을 돌린후 (안되길래 깃헙의 코드 그대로 복붙을 했음에도,,) 문자취급이 되어서 위 사진처럼 됩니다. 또한, vlet point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; 이코드에서도 name 프로퍼티를 찾을수 없다고 합니다.. 이유를 잘 모르겠습니다.. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <link rel="stylesheet" href="./css/animation.css"> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/qna.css"> <link rel="stylesheet" href="./css/result.css"> </head> <body> <div id="container"> <section id="main" class="mx-auto mt-5 py-5 px-5 mb-5"> <h1>십이간지로 알아보는 연애유형</h1> <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> <img src="./img/main.png" alt="mainImage" class="img-fluid"> </div> <p>Lorem ipsum dolor sit amet</p> <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">시작하기</button> </section> <section id="qna"> <div class="status mx-auto mt-5"> <div class="statusBar"> </div> </div> <div class="qBox mt-5 mx-4 mx-auto mb-5"> </div> <div class="answerBox"> </div> </section> <section id="result"> <h1>당신의 결과는...!</h1> <div class="resultname"> </div> <div class="resultImg col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> </div> <div class="resultDesc"> </div> <p>Lorem ipsum dolor sit amet</p> <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">share</button> </section> </div> <script src="./js/data.js" charset="utf-8"></script> <script src="./js/start.js" charset="utf-8"></script> </body> </html> ㅇ const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const listrange = 12; const result = document.querySelector("#result"); const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function calResult(){ console.log(select); var result = select.indexOf(Math.max(...select)); console.log(result); return result; } function setResult(){ let point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg=document.createElement("img"); const imgDiv=document.querySelector("#resultImg"); var imgURL='img/image-'+point+".png"; resultImg.src=imgURL; resultImg.alt=point; imgDiv.appendChild(resultImg); const resultDesc = document.querySelector(".resultDesc"); resultDesc.innerHTML = infoList[point].desc; } function goResult() { qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.Animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.Animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 450); }, 450); console.log(select); calResult(); setResult(); } function addAnswer(anstext, qIdx, idx) { var a = document.querySelector(".answerBox"); var answer = document.createElement("button"); answer.classList.add("answerList"); answer.classList.add("py-3"); answer.classList.add("my-3"); answer.classList.add("mx-auto"); answer.classList.add("fadeIn"); a.appendChild(answer); answer.innerHTML = anstext; answer.addEventListener("click", function() { select[qIdx] = idx; console.log(idx) var children = document.querySelectorAll(".answerList"); for (let i = 0; i < children.length; i++) { children[i].disabled = true; children[i].style.WebkitAnimation = "fadeOut 0.5s"; children[i].style.Animation = "fadeOut 0.5s"; } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i = 0; i < target.length; i++){ select[target[i]] += 1; } // for(let i = 0; i < target.length; i++){ // select[target[i]] += 1; // } for (let i = 0; i < children.length; i++) { children[i].style.display = 'none' } goNext(++qIdx); }, 450); }, false); } function goNext(qIdx) { if (qIdx === listrange) { goResult(); return; } var q = document.querySelector(".qBox"); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a) { addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); } var status = document.querySelector(".statusBar") status.style.width = (100 / listrange) * (qIdx + 1) + '%' } function start() { main.style.WebkitAnimation = "fadeOut 1s"; main.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; var qIdx = 0; goNext(qIdx); }, 450); }, 450); }
-
해결됨자바스크립트 제대로 배워볼래?
함수 질문합니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) mdn 문서보면 저런식으로 써져있는데 [, [, [[[]]] 이런건 무슨 기호인가요?
-
해결됨자바스크립트 제대로 배워볼래?
mdn 문서를 봤는데 특이한게 있어서요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 이런식으로 쓰여져 있는데 [, [, ?? 이건 무슨뜻일까요?ㅠㅠ 중첩구조로 되있는데
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
blog폴더에 views.py에 class PostList(Listview) 내용과 post_list.html에 변수명이 틀린거에 대한 의문
view.py 에서 model = Post를 대입한 부분은 이해가 가는데 post_list.html에서 포문을 돌릴때 post_list라고 하는거는 변수명이 안맞는데 잘 돌아가는거에 대한 의문점이 듭니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
두가지 오류사항 질문드립니다. (live server Full Reload 오류 / position: relative 관련)
1. 첫번째 질문입니다. (live server Full Reload 스크롤 위로 올라가는 현상) 라이브서버 세팅을 할때 Full Reload 체크를 하고 재시동을 했을 때 문제없이 작동을 했습니다. 그런데 이번 강의[섹션 4. 섹션 상세 퍼블리싱(Awards Section) - PC 레이아웃 섹션 상세 퍼블리싱(Awards Section) - #01 ] 부터 Awards section을 수정하다가 라이브로 확인하려고 했으나 계속해서 상단 부분으로 스크롤이 올라가는 바람에 수정하며 바로확인하는 과정에 불편함을 겪었습니다. 이 부분을 해결하고자, 각 섹션별 display: none; 도 주었지만- 역시나 작동하지 않아서 구글링을 한 끝에 https://github.com/tapio/live-server/issues/273 저와 같은 이슈를 갖고 있는 분들을 발견했음에도 불구- 해결을 하지 못한 상태입니다. 혹시나 싶어서 라이브서버를 unstall 하고 재설치를 한 후에, 다시 세팅을 하고 재시동을 하는 과정을 몇번이고 반복했으나 여전히 같은 이슈가 발생했습니다. 앞서 말씀드린.. VS code 의 Live Server Full Reload 오류현상을 해결하는 방법을 혹시 아실까 싶어 선생님께 질문을 드리고 싶었습니다(: 2. 두번째 질문입니다. ( position: relative 관련) .victory-jump img 에 position: absolute;를 적용할 때 선생님께서 말씀하시길, 그 위의 부모인 .victor-jump 에 position: relative;를 적용하지 않아도 되는 이유가 .awards-inner 안에 있는 div에 이미 position: relative;를 주었기 때문이라고 하셨습니다. 제가 잘 모르는 것일 수도 있겠지만- 지금까지 공부한 바로 .awards-inner > div 에서 '>' 표시는 그 부모 바로 밑에 있는 첫번째 자식 에게 적용되는 것으로 알고 있습니다. 때문에 .awards-inner의 두번째 자식인 .vicotry-jump 가 아닌 첫번째 자식 .about-awards 에만 적용되는 것으로 알았습니다. 제가 잘 못 알고 있는건지 궁금합니다(: 더불어, 두번째 자식인 .victory-jump 에 position: relative; 를 적용하지 않아도 .victory-jump 의 자식인 .victory-jump img 에 position: absolute; 만 적용해도 화면에 문제없이 잘 나타나는 이유도 궁금합니다.:) 감사합니다.
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
부트스트랩 관련 질문
근데 강의에서 부트스트랩 4.x 버전을 사용하시는 이유가 있으신가요? 제 개인 프로젝트 사이트에서는 부트스트랩 5.x 버전을 적용하고 싶거든요.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
post
post 형식의 body인데 어떻게 name부터 imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; models.Product.create({ name, description, price, seller, imageUrl, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); })
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[MAC] create-react-app에서 permission 에러 해결책
질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
노드 모듈스 파일 질문입니다.
저번 강의까진 노드 모듈스 파일이 없었고 갑자기 생겨서 저도 다운받으려고 create-react-app .을 했는데 사진처럼 뜹니다. web이란 폴더 안에 market_web, marker_server 두개의 폴더가 있고 market_web에 깔려있다고 다른 파일인 marker_server에 깔 수 없는건가요?
-
미해결페이스북 클론 - full stack 웹 개발
채팅구현
채팅 구현을 어떻게해야되는지 모르겠습니다. 새터미널창 열어서 하나는 runserver 0:80하고, 하나는 redis-server 하는거 맞나요??? 이렇게 했을땐, 채팅이 구현이 안되네요 ㅠㅠ 도와주세요! 워크스페이스 주소: https://goor.me/mVRM9
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그대로 따라한것 같은데 에러가 뜨는데 확인 부탁드립니다.
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS D:\learn-all-with-javascript\grab-market-web> npm install -g create-react-app C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app -> C:\Users\motiongrapher\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@4.0.3 added 67 packages from 25 contributors in 5.659s PS D:\learn-all-with-javascript\grab-market-web> create -react-app . 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create -react-app . + ~~~~~~ + CategoryInfo : ObjectNotFound: (create:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app . 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app. 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web> create-react-app . create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> npm create-react-app. Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, clean-install, clean-install-test, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, fund, get, help, help-search, hook, i, init, install, install-ci-test, install-test, it, link, list, ln, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, uninstall, unpublish, unstar, up, update, v, version, view, whoami npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\motiongrapher\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@6.14.13 C:\Program Files\nodejs\node_modules\npm PS D:\learn-all-with-javascript\grab-market-web> create-react-app. create-react-app. : 'create-react-app.' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web>
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품 세부설명페이지에서 데이터 값 통신이 안되네요
main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
cmd로 한거같은데 오류가 납니다.
다른 질문 글에 달린 유투브 링크타고 가서 설정하라는데로 했는데 안돼서 이것저것 만지다가 cmd로 변경된거 같은데 계속 오류가 나는데 어떻게 해야하나요???
