무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
판다님! text-align : center; 가 제목 h3에 적용되지 않아요!
안녕하세요 판다님! 열심히 따라하고 있습니다,,! 근데, 제목과 같은 문제가 생겨서 질문 드려요,,! 위의 코드는 main.css이구요..! 이 코드는 index.html 코드입니다! 근데, 4:56에서 처럼 가운데로 정렬되지 않고 이렇게 정렬 됩니다,,! 제 코드 중에 어떤게 문제일까요?ㅠㅠㅠ 감사합니다 : )
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
이미지로 버튼만들기 강좌보고 했는데. 배열값이 계속 배수로 증가합니다.
첫번째 선택에서는 1개 값이 증가하고. 두번째선택에서는 2개 값이 증가하고. 3번째 선택에서는 4개값 이렇게 계속적으로 배수로 증가합니다. 그렇다 보니 마지막의 선택한 값이 제일 높고. 결국은 마지막 선택값에 의해서 창이 나옵니다. 그리고 중반부터는 qIdx에 뭔가 값이 변경이 되는지. 퍼센트 바가 . 0으로갔다가 갑자기 차례에 맞는 %로 바뀝니다. qIdx값은 자바스크립트에서 딱히 건들지도 않았는데.. 그래서 콘솔로 i값을 확인해보니. 한번 완료되고 0으로 초기화 된 뒤 다시 실행이 되더라구요.. 혹시 이부분에 도움을 주실수 있을까요? . desktop-tutorial/각종 커뮤니티 성향 체크 테스트 at main · Lee-hyeonu/desktop-tutorial (github.com)\ 파일 (깃허브) 커뮤니티 성향 체크하기 (zzxx373014.synology.me) (제작한 웹페이지) /* DC,0 FM,1 ruri,2 nate,3 ppom,4 duku,5 inven,6 clien,7 utde,8 instiz,9 boba,10 coolen,11 순서대로 0,1,2,3,4~~~ DC, FM, 루리웹, 네이트판, 뽐뿌, 더쿠, 인벤, 클리앙, 웃대, 인스티즈, 보배드림, 쿨엔조이, */ const qnaList = [ { q: '1. 나는 게임이나 애니 콘솔,PC에 관해 관심이 많다', a: [ {type: [2, 4, 6, 7, 11]}, {type: [0, 1, 3, 5, 9, 8, 10]}, ] }, { q: '2. 나는 정치색이 많이 드러났으면 좋겠다. ', a: [ {type: [0, 1, 4, 7]}, {type: [5, 11, 3, 2, 8, 6]}, ] }, { q: '3. 나는 익명이 보장되었으면 좋겠다.', a: [ {type: [0, 5, 4, 3, 9]}, {type: [2, 1, 6, 7, 8, 10, 11]}, ] }, { q: '4. 나는 정보를 얻는것보다 유머를 보는것이 좋다.', a: [ {type: [0, 1, 3, 5, 9, 8, 4]}, {type: [2, 6, 7, 10, 11]}, ] }, { q: '5. 나는 주작글이여도 재미만 있으면 상관없다.', a: [ {type: [0, 3, 5, 8, 9]}, {type: [1, 2, 4, 6, 7, 10, 11]}, ] }, { q: '6. 나는 남자다.', a: [ {type: [0, 1, 2, 7, 11]}, {type: [3, 4, 5, 9, 10]}, ] }, { q: '7. 나는 인터넷에서 10원 20원 온라인 폐지줍는걸 즐긴다.', a: [ {type: [4, 7, 11, 1, 4]}, {type: [0, 2, 3, 5, 6, 8, 9, 10]}, ] }, { q: '8. 나는 스포츠가 좋다.', a: [ {type: [1, 0]}, {type: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]}, ] }, { q: '9. 나는 연예계에 관심이 많다.', a: [ {type: [0, 3, 5, 8, 9]}, {type: [1, 2, 4, 6, 7, 10, 11]}, ] }, { q: '10. 나는 젊다(10대~ 20대) ', a: [ {type: [0, 1, 2, 3, 5, 6, 8, 9]}, {type: [4, 7, 10, 11]}, ] }, { q: '11. 나는 영화, 드라마등 다양한 스트리밍을 즐겨본다. ', a: [ {type: [3, 5, 7, 8, 9]}, {type: [0, 1, 6, 2, 4, 10, 11]}, ] }, { q: '12. 나는 사람과 만나는것 보다는 커뮤니티를 더 좋아한다.', a: [ {type: [0, 2, 3, 8, 10, 11]}, {type: [1, 4, 5, 6, 7, 9]}, ] } ] const infoList = [{ name: '대한민국 최고규모의 익명커뮤니티 DC 인사이드가 적합합니다.', desc: '디시인사이드는 대한민국의 최대 규모 커뮤니티 포털 사이트이다. 운영 주체는 주식회사 디시인사이드이며 본사는 서울특별시 강남구 삼성동에 있다.디지털 카메라 정보를 다루는 사이트로 1999년 출범했으며 2000년대 초반 디지털 카메라 사진을 올리는 용도로 사용되던 게시판인 디시인사이드 갤러리가 큰 인기를 얻게 되자 커뮤니티 서비스로 방향을 선회, 2000년대 후반부터 폭발적인 인기를 얻으며 최대 규모 커뮤니티 포털 사이트로 거듭나게 되었다. 다른 커뮤니티의 게시판 격에 해당되는 디시인사이드 갤러리 서비스를 중심으로, 개인 페이지인 갤로그, 뉴스 페이지인 디시뉴스와 디시미디어, 위키 서비스인 디시위키, 게임 서비스인 디시게임, 데이터 서비스인 익사이팅 디시 등의 부속 서비스를 제공하고 있다.' }, { name: '대한민국 최대규모의 스포츠 커뮤니티 FM 코라아가 적합합니다.', desc: '2008년 10월에 오픈한 대한민국의 인터넷 커뮤니티. 본래는 시뮬레이션 게임인 풋볼 매니저의 정보를 공유하는 커뮤니티였으나 유머갤 등 게임과 상관없는 여러 게시판이 생기고 유입 인원이 늘어났다. 2021년 12월 기준, 대한민국 사이트 접속자 수 8위, 커뮤니티로는 2위 규모의 사이트다 ' }, { name: '대한민국 최대규모의 게임 애니관련 커뮤니티 루리웹이 적합합니다.', desc: '한국의 비디오 게임 전문 사이트 및 커뮤니티. 2021년 12월 기준, 대한민국 인터넷 커뮤니티 접속자수 4위, 전체 18위 규모의 사이트이며, 디시 계통이 아닌 종합커뮤니티 중 가장 규모가 큰 사이트이다. 이름의 유래는 공식적으로는 운영자가 하이텔에서 활동했을때 하이텔 ID를 ONNURI(온누리)로 하려고 했으나 오타가 발생하여 ONRULI라는 애매모호한 단어로 ID가 등록되었고, 나름대로 애착이 생겨 RULI로 변경하여 이 ID를 바탕으로 RULIWEB(루리웹)이라고 명명했음을 주장하고 있으나, 네티즌 사이에서는 실질적으로 기동전함 나데시코의 호시노 루리에서 유래되었다고 여겨지고 있다.' }, { name: '재미난 유머글이 많은 네이트 판이 적합합니다.', desc: '2001년에 개설된 네이트 내에 존재하는 인터넷 커뮤니티이자 여초 커뮤니티.홈, 문화, 뷰티 등등의 여러 카테고리가 있는데, 그 중에서도 유난히 큰 카테고리는 톡톡 카테고리이다.' }, { name: '대한민국 최대규모의 쇼핑몰 정보공유 커뮤니티 뽐뿌가 적합합니다.', desc: '쇼핑몰 정보 공유 사이트로 시작하여, 스마트폰 대중화 이후부터 이동통신기기 거래 관련 최대의 커뮤니티 스마트폰 관련 정보나 쇼핑 정보 및 각종 재테크 관련 글들이 올라온다. ' }, { name: '대한민국 최대 연예인 관련 커뮤니티 더쿠가 적합합니다.', desc: '일본 음악 관련 커뮤니티를 기원으로 하는, 연예인 관련 정보를 비롯한 다양한 주제를 다루는 인터넷 커뮤니티. 게시글 작성에는 아이디가 필요하지만, 회원가입 개방은 비정기적으로 이루어진다는 특징이 있다. 이에 따라 아이디 자체가 희소성을 가져 거래의 대상이 되기도 하며, 이러한 행위는 약관에 위배되어 처분될 수 있다.# 모든 게시물과 댓글의 닉네임은 무명의 더쿠로 통일되며, 실명 인증을 필요로 하는 제한적 익명성[3]을 보장받는다. 수집된 개인정보는 위탁 관리되며 탈퇴 후 3개월에서 최대 5년까지 보관되어 수사기관에 대한 협조를 비롯한 사이트 운영을 위해 이용된다.' }, { name: '대한민국 최대 게임커뮤니티 인벤이 적합합니다.', desc: '대한민국의 주요 게임 웹진이자 커뮤니티. 주식회사 인벤커뮤니케이션즈에서 운영하고 있다.2021년 12월 기준, 대한민국 인터넷 커뮤니티 접속자수 3위, 전체 16위 규모의 사이트이다.' }, { name: '대한민국 최대의 IT 커뮤니티 클리앙이 적합합니다.', desc: '2001년 말 개설된, IT 커뮤니티이다. 사이트 운영자는 cipher(테이스터). 운영회사는 씨엘커뮤니케이션즈(대표:이봉희)다.' }, { name: '대한민국 최대의 유머커뮤니티 웃긴대학이 적합합니다.', desc: '1998년 8월 24일에 설립된 유머 커뮤니티이며 뿌리 깊은 국내 최장수 커뮤니티중 하나이다.현재 웃긴자료, 대기자료 등의 유머게시판 중심으로 운영하며 웃대툰, 공포, 사진 등의 창작게시판과 헬스, 만화, 게임, 요리, 동물, SNS 등의 취미 테마 게시판도 있으며 얼굴인식, 패션 분석 등의 인공지능이 가미된 게시판도 있다.' }, { name: '대한민국의 아이돌 덕질커뮤니티! 인스티즈가 적합합니다.', desc: '2009년 8월 3일에 오픈한 유료 회원제 연예오락 커뮤니티 사이트. 주로 아이돌 덕질을 다루는 여초 사이트 중 하나다.' }, { name: '대한민국 최대의 자동차 커뮤니티 보배드림이 적합합니다.', desc: '중고차 인터넷 쇼핑몰 겸 자동차 관련 인터넷 커뮤니티. 홈페이지시작은 중고차 쇼핑몰로 했으나 현재는 자동차 커뮤니티로 훨씬 유명하며, 보배드림이란 이름은 대표이사 김보배와 회사가 처음 입주한 건물인 드림타워에서 따왔다.' }, { name: '대한민국 PC 커뮤니티 쿨엔조이가 적합합니다.', desc: '쿨엔조이는 원래 2004년에 현재 쿨엔조이대장인 주유환씨의 개인블로그로 시작되었으나, 2006년 3월에 쿨러관련 사이트로 리뉴얼한후 (이때까지는 아직 쿨엔조이가 아닌 Cooling Solution 라는 이름이었다.[2]) 2006년에 이름을 다시지어 쿨링박스, 하드웨어쿨, 쿨링웹 등 다양한 이름이 거론되었지만 결국 쿨엔조이로 결정이 되어 현재까지 이어지고 있다. ' }, ] <!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <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=Jua&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/qna.css"> <link rel="stylesheet" href="./css/animation.css"> <link rel="stylesheet" href="./css/result.css"> <link rel="stylesheet" href="./css/menu.css"> </head> <body> <div class="mx-auto"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand px-5" href="#">Hueeng</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="./index.html">홈 화면</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 내가 만든것들 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="./community orientation.html">나에게 맞는 커뮤니티 찾기</a></li> <li><a class="dropdown-item" href="./calculator.html">자바스크립트 계산기</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> </ul> </div> </nav> </div> <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 mx-auto my-5"> <img src="./img/main.png" alt="mainImge" class="img-fluid"> </div> <div class="explain mx-auto py-3 px-3"> <p> 우리나라에는 많은 커뮤니티가 있습니다.<br> 나에게 맞는 커뮤니티를 찾는걸 도와드리겠습니다.<br><br> 재미로 만들어졌으며 과몰입은 추천드리지 않습니다. </p> </div> <button type="button" class="btn btn-outline-primary mt-3" onclick="js:begin()">시작하기</button> </section> <section id="qna"> <div class="status mx-auto mt-5"> <div class="statusBar"> </div> </div> <div class="qBox mx-auto my-5 py-5 px-3"></div> <div class="answerBox mx-auto"> <div class="row row-cols-1 row-cols-md-2 g-2 "> <div class="col"> <div class="card"> <img class="card-img-top leftImage" src="./img/main.png" alt="Card image cap"> </div> </div> <div class="col"> <div class="card"> <img class="card-img-top rightImge" src="./img/main.png" alt="Card image cap"> </div> </div> </div> </div> </section> <section id="result"> <section id="main" class="mx-auto mt-5 py-5 px-3"> <h1> 최적의 커뮤니티를 찾았습니다. </h1> <div class="resultname"> </div> <div id="resultImg" class="col-lg-6 col-md-8 col-sm-10 mx-auto my-5"> </div> <div class="explain mx-auto py-3 px-3"> <div class="resultDesc"> </div> </div> <button type="button" class="btn btn-outline-primary mt-3">다시하기</button> </section> <script src="./js/start.js" charset="utf-8"></script> <script src="./js/data.js" charset="utf-8"></script> </div> </body> </html> const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endPoint = 12; const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function calResult() { var result = select.indexOf(Math.max(...select)); 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; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML = infoList[point].desc; } function goResult(){ qna.style.animation = "fadeOut 1s"; setTimeout(() => { result.style.animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block" }, 450)}) setResult(); } function imgeNext(qIdx, idx) { let leftImage = document.querySelector('.leftImage'); let rightImge = document.querySelector('.rightImge'); leftImage.disabled = true; leftImage.classList.remove('fadeIn'); leftImage.classList.add('fadeOut'); rightImge.disabled = true; rightImge.classList.remove('fadeIn'); rightImge.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++){ console.log(select); select[target[i]] += 1; } leftImage.style.display = 'none'; rightImge.style.display = 'none'; goNext(++qIdx); }, 450) } }, 450) } function goNext(qIdx){ var q = document.querySelector('.qBox'); q.innerHTML = qnaList[qIdx].q; var status = document.querySelector('.statusBar'); status.style.width = (100/endPoint) * (qIdx+1) + '%'; status.innerHTML = qIdx+1; let qnaURL = './img/question/0'; let leftURL = qnaURL + '-A.png'; let rightURL = qnaURL + '-B.png'; let leftImage = document.querySelector('.leftImage'); let rightImge = document.querySelector('.rightImge'); leftImage.src = leftURL; rightImge.src = rightURL; leftImage.style.display = 'block'; rightImge.style.display = 'block'; leftImage.classList.remove('fadeOut'); rightImge.classList.remove('fadeOut'); leftImage.classList.add('fadeIn'); rightImge.classList.add('fadeIn'); leftImage.addEventListener("click", function() { imgeNext(qIdx, 0); }, false); rightImge.addEventListener("click", function() { imgeNext(qIdx, 1); }, false); } function begin() { main.style.animation = "fadeOut 1s"; setTimeout(() => { qna.style.animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 450); let qIdx = 0; goNext(qIdx); }, 450); }
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
중첩 setTimeout() 관련 질문
중첩되는 부분에서 이해가 안가서 질문드립니다. 첫번째 setTimeout 함수가 실행되면 0.45초 뒤에 중괄호 내부 문장들이 실행되고, 이때 두번째 setTimeout 함수를 만나 0.45초 뒤에 main.style~ , qna.style~ 부분이 실행되는 것이 맞나요? 총 정리하면, main 화면이 1초 간 페이드 아웃 완료 -> 0.45초 뒤에 qna 화면이 1초 간 페이드 인 완료-> 0.45초 뒤에 main 부분 'none', qna 부분 'block' 처리 중첩되다보니 이상하게 헷갈리네요. 수업자료 감사드립니다! ^^
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문 드립니다
안녕하세요, 강사님. 소중한 강의 무척 감사합니다. 친절한 설명 덕분에 즐겁게 수강할 수 있었습니다. 완강 후, 혼자서 재구현 및 응용을 해보며 생긴 궁금한 점들을 여쭤봅니다. 1. 공유 기능을 위해 결과 html 파일(page 폴더)을 어차피 전부 만들어야 하는 거면, 그냥 해당 html을 결과 페이지로 불러오고, 버튼의 내용(공유하기 or 나도 참여)만 달리하는 방식은 불가능할까요? 결과에 따라 해당 html page를 불러오는 방식의 문제점이 무엇인지 궁금합니다. 막연하게 떠오른 생각인데, 부족한 실력이라 명확한 그림은 떠오르지 않네요^^; 2. 조금 여담입니다만, 이번 강의를 통해 === 연산자를 처음 접해서 검색해 보니 == 보다 조금 더 엄격한 비교 연산자라는 것을 알게 되었습니다. 심지어 ===를 권장한다는 글도 보았고요. 당연하게 ==만 사용하다가 ===에 대해 알게 된 것은 적잖은 충격(?)이었는데요. 실제로 실무 현장에서도 ==보다 ===를 많이 사용하는지 궁금합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
result페이지에서 결과가 안 나와요
result 페이지로 넘어오면 결과값이 안뜨고 공유하기 버튼은 보입니다 계속 시도 해보니까 2가지만 뜨고 나머지 결과가 안 뜨는 것 같아요 오류랑 코드 올립니다... 도와주세요!! const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endPoint = 10; // 질문 개수 const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function calResult() { // select 배열에 있는 최대값 반환 var result = select.indexOf(Math.max(...select)); return result; } function setResult(){ let point = calResult(); const resultName = document.querySelector('.resultName'); var name = infoList[point].name; name = name.replace(/, /ig, '<br>'); resultName.innerHTML = name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-' + point + '.png'; resultImg.src = imgURL; resultImg.alt = point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML = infoList[point].desc; } function goResult() { qna.style.WebkitAnimation = "fadeOut 0.7s"; qna.style.animation = "fadeOut 0.7s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 0.7s"; result.style.animation = "fadeIn 0.7s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 300) }) setResult(); } // 답변 버튼 만들기 function addAnswer(answerText, qIdx, idx) { var a = document.querySelector('.answerBox'); var answer = document.createElement('button'); // 답변 버튼에 클래스 추가 answer .classList .add('answerList'); answer .classList .add('my-3'); answer .classList .add('py-3'); answer .classList .add('mx-auto'); answer .classList .add('fadeIn'); a.appendChild(answer); answer.innerHTML = answerText; // 클릭하면 다음 질문으로 answer.addEventListener("click", function () { 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 < children.length; i++) { children[i].style.display = "none"; } goNext(++qIdx); }, 450); }, false); } // 질문과 답변 불러오기 function goNext(qIdx) { // 마지막 질문일 때 호출 후 리턴 if (qIdx === endPoint) { 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 / endPoint) * (qIdx + 1) + '%'; } // main 페이지에서 qna 페이지로 화면 전환 function begin() { main.style.WebkitAnimation = "fadeOut 0.7s"; main.style.animation = "fadeOut 0.7s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 0.7s"; qna.style.animation = "fadeIn 0.7s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 300) let qIdx = 0; goNext(qIdx); }, 300); }
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
웹사이트 상위 노출 방법
강의를 기반으로 웹사이트를 하나 만들었는데 인터넷 (구글,네이버 등)에 아무리 검색해도 제가 웹사이트가 전혀 보이지 않아요. 웹사이트 링크로 직접 들어가서 확인해보니 웹사이트는 잘 돌아가고 있는데 제 웹사이트를 구글 검색 결과에 잘 보이게 하는 방법은 없을까요? 있다면 제발 알려주세요.ㅠㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기에서 넘어가지지 않습니다.
좋은 강의 감사합니다! 다름아니라 공유하기 버튼을 누르면 넘어가져야 하는데 이렇게 뜨면서 'name'이 인식이 안되는 것 같습니다. 'setShare' 넣고나서 부터 안되는데 혹시 어떤게 문제일까요?ㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
카카오 js 인증 키를 안보이게 하고 싶습니다.
발급받은 카카오 인증 키가 개발자 도구-소스를 통해 그대로 보이더라구요ㅠㅠ 인증 키가 노출되어도 상관없나요? 코드를 암호화 하는 등 안보이게 하는 방법이 있을까요...?
- 해결됨[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
const 부분 질문드립니다
판다코딩님의 좋은 강의 감사합니다! 다름 아니라 섹션1. 화면 전환하기 부분에서 문제가 생겨 문의 드립니다. 판다님 강의를 보면서 검토하며 적었기에 틀린 것 같지는 않은데 홈페이지에서 직접 구현하면 이렇게 되면서 실행되지 않습니다. 아무래도 "main"을 못 잡아내는 것 같은데 어떤 문제일까요?ㅠㅠ 혹시 몰라 html과 자바 코딩 내용도 같이 첨부합니다. 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
새로고침 없이 다시하기 버튼을 만들고 싶은데요!
function restart() { result.style.WebkitAnimation = "fadeOut 1s"; result.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { result.style.display = "none"; qna.style.display = "block"; }, 450) let qIdx = 0; goNext(qIdx); }, 450); } 이렇게 restart 함수 작성하고 버튼에 함수 적용을 시켰어요!! 근데 문제가 다시하기를 하면 이전에 나왔던 결과도 같이 나오고 있는데요,,, 그래서 이전에 했던 결과값을 초기화시켜야할 것 같은데,,, 어떻게 해야할까요 ㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
요소의 질문이 하나만 나옵니다.
제 나름대로 안에 내용물과 이름만 변환해서 학습중입니다. 테스트 시작하기 버튼을 누르면 a.보트 b.우주선 이렇게 버튼 두개가 나와야하는데 지금은 b 만 나오는 상황입니다. 제가 데이터를 정리 할 때에 묶음으로 정리하지 않아서일까요? 고견 부탁드립니다. - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
answer 여러 개 나옵니다.
아무 선택지나 누른 후 새로고침을 하고 다시 시작하기 버튼을 누르면 answer가 여러개가 나옵니다. 크게 불편함은 없지만 신경이 쓰이는데 없애는 방법은 없을까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요 판다님 하나만 여쭈어 보고 싶습니다!
판다님의 강의를 보면서 열심히 따라하고 있는 와중에 궁금한게 생겼습니다 현재는 페이지가 넘어가면서 스테이스바 , 질문, 대답만 나오잖아요? 넘어갈때마다 사진을 추가하고 싶은데 이건 어떻게 해야 가능할까요 ?
- 미해결[하루 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>
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
qnaList[0] 값이 안 나와요!
begin함수로 qna페이지가 나타나는 것 까지는 되었는데 qna페이지에서 goNext에 있는 qnaList[0]값이 안 나오는데 뭐가 문제인지 모르겠습니다ㅠㅠ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
한가지 궁금한게 있어요!
뒤로가기 기능을 구현하려면 어떻게 해야하나요??
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
qna answer 제작 과정에서 오류 발생 질문있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기본적은 함수 구현은 선생님이랑 똑같이 했는데 왜 qna answer을 실행하면 안되는지 모르겠습니다. 페이지 검사를 해보면 Cannot read properties of null으로 나옵니다. 첨부사진 드리겠습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과를 여러 논리에 의하여 여러 창 페이지를 출력하고 싶다면?
- 학습 관련 질문을 남겨주세요. 상세히 작성하안녕하세요! 강의를 너무 잘 보았습니다. 제가 궁금한 점이 있는데 제가 혹시 아래의 사진의 10번째 줄에서 select을 통해 최댓값(Math.max)의 위치(indexOf)를 추출(select에서)한다. 이렇게 해석되는 거로 알고 있습니다. 그리고 ...select가 모든 범위일텐데 이 범위를 혹시 좁히는 방법이 궁금합니다..! (예를 들어 0~4, 5~7, 8~10 ,..., 29~32로 나눈 집합에 대한 최댓값을 가진 위치 구하기) 곧 올라올 사진이 테스트 결과값들의 모임입니다!! (0~32)번의 결과값에 해당하는 수의 집합이예요!) [0,0,0,...,0]있는 집합에 그 결과의 값이 선택될 때마다 높아져요! 그리고 이 집합에 나온 결과들을 여러 창에 띄우고 싶은데 이 방법도 궁금합니다 ㅜㅜㅜㅜㅜ 제발 도와주세요 ㅠㅠㅠ 면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 해결됨[하루 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); }