무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
start.js에서 변수 선언에 대한 질문입니다.
안녕하세요. start.js에서 변수를 선언하실 때 어떤 변수 ex) const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); 는 start.js 제일 위로 뽑아서 선언을 해주시는데 어떤 변수 ex1) answer.addEventListener("click", function(){ var children = document.querySelectorAll('.answerList'); for(let i = 0; i < children.length; i++){ children[i].disabled = true; children[i].style.display = 'none'; } goNext(++qIdx); }, false) } 혹은 ex2) function goNext(qIdx) { var q = document.querySelector('.qBox'); q.innerHTML = qnaList[qIdx].q; for(let i in qnaList[qIdx].a){ addAnswer(qnaList[qIdx].a[i].answer, qIdx); } } goNext함수의 q 혹은 children 같은 변수들은 함수 안에 넣어주시는 것을 봤습니다. 혹시 변수를 선언할 때 규칙(?) 같은 것들이 있는지 알려주시면 감사하겠습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
setTimeout함수 질문
안녕하세요. 수업 듣던 중 setTimeout함수가 잘 이해가 가지 않아서 여러가지 찾아보던 중 궁금한 사항이 있어서 질문 올립니다. 수업 때 버튼을 클릭 했을 때 begin() 함수가 실행되게끔 하기 위해서 function begin() { main.style.animation = "fadeOut 1s"; main.style.WebkitAnimation = "fadeOut 1s"; setTimeout(() => { qna.style.animation = "fadeIn 1s"; qna.style.WebkitAnimation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 450) }, 450); } 위와 같은 코드를 짜주셨는데 setTimeout함수가 조금 어려워서 여러 내용을 찾고 이것저것 수정해보다가 function begin() { main.style.animation = "fadeOut 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; qna.style.animation = "fadeIn 1s" }, 950); } 위와같이 코드를 바꿔봤더니 실행결과는 똑같이 나오는 것으로 확인되었습니다. 아직도 setTimeout함수가 머릿속에서 잘 정리가 되지 않은상황이라 그런데 이렇게 코드를 짜게 될 경우 어떤 문제가 발생할 수 있는 요인이 있을까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
css 질문
안녕하세요. start.js 파일을 보면 begin함수에 main.style.WebkitAnimation 및 main.style.animation을 사용하셨습니다. 조금 이해가 안가는데 이 코드의 뜻이 main변수에 style을 적용할건데 animation이라는 이름의 css파일을 적용해라. 라는 뜻이 되는건가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
파일 세분화에 관하여
안녕하세요. 궁금한 것이 있어서 질문 드립니다. css나 javascript 코드를 작성하실 때 파일은 굉장히 세분화해서 적용을 하시던데 (ex. animation.css / default.css / main.css / qna.css 등등) 이렇게 파일을 세분화해서 적용을 하면 어떤 점에서 더 좋은건가요? 유지보수 때문인가요? 그리고 javaScript 또한 index.html에 직접 작성하는 것이 아니라 파일을 따로 만들어서 링크를 적용하시는 것도 유지보수를 위해서 이렇게 하시는건가요? 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요. 글꼴 적용이 되지 않습니다.
판다님 안녕하세요! 수업 잘 듣고 있습니다. 감사합니다. 글꼴 적용이 되지 않아 질문을 드립니다. 구글폰트에서 link을 복사해서 index.html의 head 태그안에 넣고, default.css에 * { font-family: 'Nanum Brush Script', cursive; } 위와같이 style 적용 코드를 넣었습니다. 근데 이렇게 하면 글꼴 적용이 되지 않습니다. 다른 backgorund-color라던가 이런건 다 잘되는데 글꼴만 적용이 되지 않습니다. 그래서 index.html에 직접 <style> * { font-family: 'Nanum Brush Script', cursive; }; </style> 이렇게 넣으면 그제서야 적용이 되는데 왜그런걸까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
data.js 값을 수정하면 문제지가 뜨질 않습니다
나머지는 다 완벽하게 했는데 이상하게 data.js파일에서 문제를 다른 문장으로 수정하면 웹페이지에서 빈 화면만 뜹니다ㅠㅠ 개발자도구로 찾아보니 start.js의 76번째 q.innerHTML = qnaList[qIdx].q;이 코드에서 qnaList가 undefined라는데 이미 data파일에서 define 한거 아닌가요ㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 생성에 관한 질문이 있습니다.
안녕하세요 판다코딩님. 덕분에 좋은 수업 들었습니다. 수업하신 내용을 바탕으로 새로운 설문조사를 하나 만들고 있는 중인데 잘 되질 않아서 질문드립니다. MBTI테스트의 경우는 결과가 나올 때 사자, 말, 용 등등 12마리의 결과와 그에 따른 설명이 나옵니다. 저는 결과가 출력됐을 때 2가지의 결과가 조합되어서 나오게끔 만들고 싶습니다. 예를들어서 결과지에 나올 수 있는 것들은 십이지신 12마리 동물 + 4개의 물건이라고 했을 때 용+삼지창, 말+핸드폰 이런식으로 동물과 물건의 조합이 나올 수 있게끔 하고 싶습니다. 이렇게 결과가 나오게 만들려면 더 복잡한 코딩이 필요할까요? 아니면 수업해주신 내용의 코딩에서 조금만 수정하면 가능한 부분일까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문에도 이미지를 넣을 수 있을까요?
안녕하세요 판다님! 먼저 좋은 강의해주셔서 정말 감사합니다. 저는 완전 초보 수준이었는데 강의 따라하고, 깃헙에 올려주신 파일들도 뜯어보면서 결과이미지 2개 넣기, 다른 SNS 공유 버튼 넣기, 결과 텍스트에 엔터 넣기 등등 몇 가지 응용에도 성공했습니다! (며칠 걸렸지만요) 마지막으로 각 질문 아래 이미지 넣기에 도전해보고 있는데 이것만큼은 아무리해도 구현이 안되어 이렇게 질문을 남깁니다. 각 질문마다 이미지를 넣으려면 어떻게 해야할까요? 알려주시면 정말 감사하겠습니다!
- 해결됨[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 값이 계속 1번만 출력이 됩니다. 수정해도 오류만 뜨네요
사용자 응답 사진으로 구현하기를 만들고 있는데 2번째 질문에서 이미지를 누르면 이런 에러가 뜹니다. function ImageFadeOut(qIdx, idx) { var left = document.querySelector('.leftImage'); var right = document.querySelector('.rightImage'); left.disabled = true; left.classList.remove("fadeIn"); left.classList.add("fadeOut"); right.disabled = true; right.classList.remove("fadeIn"); right.classList.add("fadeOut"); setTimeout(() =>{ if(qIdx+1 === endPoint) { goResult(); return; } else { setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i = 0; i < target.length; i++){ select[target[i]] += 1; } goNext(++qIdx); },300); } },300) } setTimeout 안에 있는 var target = qnaList[qIdx].a[idx].type에서 type을 빼면 결과 값이 출력이 되지만 첫번째 결과값만 출력이 되고 배열도 [0,0,0,0,0,0]으로 출력이 됩니다. data.js는 아무 이상이 없어 보이는데 뭐가 문제일까요
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
오류 원인을 모르겠어요
위 내용으로 오류가 발생해서 결과의 설명이 출력되지 않아요 setResult() 함수에 resultDesc.innerHTML = infoList[point].desc; 이 부분인데 오류가 발생하는 이유를 모르겠어요ㅠㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
선생님~ 결과 페이지에 각기 다른 링크로 버튼을 만들려면 어떻게 해야하나요?
안녕하세요~ 왕초보도 이해하기 쉬운 강의 만들어주셔서 정말 감사합니다!! 강의 내용을 응용해 다른 서비스를 만들어 보았는데요, 이번 수업에서는 어떤 결과가 나오든 일괄적으로 "카톡공유하기" 버튼이 있잖아요~ 그런데 제가 해보고 싶은 것은 12개의 각기 다른 결과마다 "주문하기" 버튼을 누르면 해당하는 쇼핑몰 페이지로 링크되게 하고 싶습니다. 어떻게 하면 될까요? 설명해주시면 너무 감사하겠습니다~^^
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
QnA를 배열형태로 만들려고 하는데 질문을 드립니다!
QnA를 배열형태로 만들려고 하는데 질문을 드립니다! 사전에 만드실때, 질문지와 답변문을 어디서 받아 오셨는지 궁금합니다! 아니면 검색어를 어떤식으로 하셔서 검색을 했는지도 궁금합니다! 저는 강의를 참고하여 저만의 색깔로 좀 변형하여 만들려고 하는데, 질문지와 답변리스트를 따로 찾는 방법을 모르겠어서 질문합니다!
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 버튼 관련 질문
안녕하세요! 공유하기 버튼 파트와 관련해서 질문 드립니다. 이 웹 프로젝트 전체 코드를 github에 올려서 다른 사람들과 공유하고자 할 때 나머지 부분들은 개인적인 정보가 없어서 상관없는 것 같은데 Kakao.init('JAVASCRIPT_KEY'); 이 부분에서 JAVASCRIPT_KEY 부분이 그대로 노출되어도 괜찮은지 궁금합니다. 또한, 혹시 놓친 개인적인 정보 부분이 있다면 말씀해주시면 감사하겠습니다. 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
4:51초쯤에 있는 type 부분이
setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i=0; i<target.length; i++){ select[target[i]] += 1; } 여기에 있는 select 안에 type 으로 영상에 나오는데 안되서ㅠㅠ 찾아보니 target이 맞더라구요.. 수정되는 부분이 안나와서... 혹시 몰라서 올립니다..
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
선택한 답변에 따라 다른 문항이 나오도록 할수도 있나요?
예를 들어 1번 문항 A. 호랑이 B. 사자 C. 기린 중에서 A를 선택 했을 경우 2번 문항 A. 백호 B. 백두산 호랑이 1번 에서 B를 선택 할 경우 A. 아프리카 사자 B. 한국 사자 뭐 이런 식으로 구성될 수 있을까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
netlify github 연동 시 문제
강의에서 말씀해주신대로 저장소와 연결하여 deploy를 시도하였는데 오류가 발생하였습니다. 구글링을 통하여 다양한 방법을 다 시도해보았지만 실패를 하여 질문 남깁니다... 참고로 netlify 사이트에서 build settings는 저장소는 적절히 연결해주었고, Build command: CI= npm run build Publish directory: build/ 로 설정해주었습니다. 또한 github에 올린 폴더의 내용은 다음과 같습니다. css 폴더, img 폴더, js폴더, index.html, package-lock.json, package.json -> npm install과 npm init을 실행시켜주어 package.json을 생성하였고, npm run build라는 명령에서 script에 없다는 오류가 발생하여 package.json의 script 부분에서 build를 추가 해주었습니다. package.json의 내용은 다음과 같습니다. { "name": "-", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "npm run build" }, "repository": { "type": "git", "url": "git+-" }, "author": "", "license": "ISC", "bugs": { "url": "-" }, "homepage": "-", "keywords": [], "description": "" } 개인 git 저장소 주소는 -로 처리하였습니다. 제 생각에는 package.json에서 문제가 발생하거나 npm에서 문제가 발생한 것으로 생각되는데 어떤 부분에서 문제가 있는지 알려주시면 감사하겠습니다... 추가로, deploy를 실행했을때 발생하는 deploy log의 일부도 첨부합니다. Killed 12:48:37 AM: npm ERR! code ELIFECYCLE 12:48:37 AM: npm ERR! errno 137 12:48:37 AM: npm ERR! travelrecommendation@1.0.0 build: `npm run build` 12:48:37 AM: npm ERR! Exit status 137 12:48:37 AM: npm ERR! 12:48:37 AM: npm ERR! Failed at the travelrecommendation@1.0.0 build script. 12:48:37 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 12:48:37 AM: npm ERR! A complete log of this run can be found in: 12:48:37 AM: npm ERR! /opt/buildhome/.npm/_logs/2021-05-30T15_48_37_842Z-debug.log 12:48:37 AM: npm ERR! code ELIFECYCLE 12:48:37 AM: npm ERR! errno 137 12:48:37 AM: npm ERR! travelrecommendation@1.0.0 build: `npm run build` 12:48:37 AM: npm ERR! Exit status 137 12:48:54 AM: 12:48:54 AM: ──────────────────────────────────────────────────────────────── 12:48:54 AM: "build.command" failed 12:48:54 AM: ──────────────────────────────────────────────────────────────── 12:48:54 AM: 12:48:54 AM: Error message 12:48:54 AM: Command was killed with SIGKILL (Forced termination): npm run build 12:48:54 AM: 12:48:54 AM: Error location 12:48:54 AM: In Build command from Netlify app: 12:48:54 AM: npm run build 12:48:54 AM: 12:48:54 AM: Resolved config 12:48:54 AM: build: 12:48:54 AM: command: npm run build 12:48:54 AM: commandOrigin: ui 12:48:54 AM: publish: /opt/build/repo/build 12:48:54 AM: functions: 12:48:54 AM: '*': {}
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
배열 질문입니다!!
총 9개 질문이고 한 질문 당 a b 선택지가 두개 인데 a값 b값 다 0으로 나오고 결과도 하나만 계속 나오는데 어떤 오류가 있을까요 ㅜㅜ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
진행상태바 구현 도중 갑자기 처음 시작화면에서 버튼을 누르면 테스트로 안넘어가네요..
삭제된 글입니다
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
section qna에 test 글자가 안나와요ㅠㅠ 왜 그런걸까요..
<!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" <title> </title> </head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/qna.css"> <body> <div class="container"> <section id="main" class="mx-auto mt-5 py-5 px-3"> <h1>십이간지로 알아보는 연애유형</h1> <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> </div> <img src="./img/main.png" alt="mainImage" class="img-fluid"> <p> 나만의 MBTI 사이트 입니다.!<br> 아래 시작하기 버튼을 눌러 시작해 주십시오. </p> <button type="button" class="btn btn-outline-danger mt-3">시작하기</button> </section> <section id="qna"> <p>Test</p> </section> <section id="result"> </section> </div> </body> </html>
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 후 원래 페이지로 돌아갑니다
안녕하세요 드디어 수업을 다 끝내고 시행을 해보았습니다. 시행을 해 본 결과 공유가 잘 되는데 공유된 링크를 따라 들어가면 나도 참여하기 페이지가 아니라 처음의 기본 페이지로 가집니다. 나도 참여하기 페이지를 따로 만들었기에 있는 것도 확인했는데 어느 부분에서 연결이 안 된 걸까요?