무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
이미지 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 계속 이렇게 이미지 오류가 뜹니다 어느 부분이 문제인가요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
뒤로가기 기능
안녕하세요 뒤로가기기능은 어떻게 추가해야할까요? 예전 질문에도 있던데...혹시 방법없을까요 ㅎㅎ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
질문있습니다.
안녕하세요? 김영수입니다. 부트스트랩에서 아래와 같이 작성했는데 저는 다르게 결과가 나옵니다. 무엇을 수정해야 할지 문의드립니다. 감사합니다..
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
큐박스에도 이미지를 넣을 수 있을까용??
안녕하세요! 강의 잘 듣고 있습니다 감사합니다!ㅎㅎ 그런데 테스트 질문에도 사진이 들어가면 좋을 것 같은데 이미지를 넣는 방법이 있을까요??
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
netlify 사이트 도메인 등록할때 지금이랑은 UI도 좀 다르고 ..
지금은 도메인 등록하는게 무조건 유료로 바뀐건가요~?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
판다님 문항 1개에만 이미지를 넣고싶습니다~
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 판다님 10개 문항 중 문항 1개에만 이미지를 넣고싶습니다~ 위에 조건문 적는것도 확인하긴햇는데... data.js 상에 <img src=...>로 하니 업로드 전 index 에서는 이미지 확인되는데, netlify로 올리니 이미지가 나오지 않습니다 ㅠㅠ 이렇게 하는것은 원래 안되는것이 맞는가요^^; (왕초보) 이럴경우는 어떻게 해야할까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
og:image 지정했는데요
<meta property="og:image" content="img/og-logo.png"> 이렇게 지정했는데 ㅠㅠ 카톡공유하기 해봤더니 그림이 안뜨고 글만 가네요 ㅠㅠ 혹시 해결책이 있을까요? 참고해서 잘만들어보고 있습니다 너무감사드려요
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요~ 혹시 결과값이 2개이상 나올수가있을까요..?
안녕하세요~! 강의 정말 잘 들었습니다 감사합니다. 지금 결과가 1개로 나오고있는데 혹시 2개 이상으로 나올수가 있을까요~? 답변 부탁드립니다. 감사합니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
시작하기 버튼 반응이 없네요 ㅜ
저도 그대로 따라한 것 같은데.. 안 되네요 qna display none까지 문제 없었는데 시작하기 버튼 누르는 것 부터 반응이 없네요 ㅠ 뭐가 문젤까요 아래 사진 첨부했습니다 ㅜ
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
화면전환이 안돼요
대체 뭐가 문제인지 전혀 모르겠습니다..다 똑같이 한거같은데 에디터는 비쥬얼스튜디오로 했구요 화면전환이 아예 안돼요...ㅠㅠㅠ html <!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>인프런</title> <link rel="stylesheet" href="default.css"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="qna.css"> <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=Hi+Melody&display=swap" rel="stylesheet"> </head> <body style="background-color: pink;"> <div class="container"> <section id="main" class="mx-auto mt-5 mb-5 py-5 px-3" > <h1>십이간지로 알아보는 연애 유형</h1> <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto"> <img src="./img/img/main.png" alt="mainImage" class="img-fluid"> </div> <p> 나만의 MBTI 사이트입니다!<br> 아래 시작하기 버튼을 눌러 시작 해주세요. </p> <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 src="js/start.js" charset="utf-8"></script> </div> </body> </html> start.js const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); function begin(){ main.style.diplay = "none"; qna.style.diplay = "block"; } default.css *{font-family: 'Hi Melody', cursive; font-size: 24px;} main.css #main{ background-color: whitesmoke; width: 80%; text-align: center; border-radius: 10px; } qna.css #qna{ display: none; }
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
궁금한게 생겼어욥
<script src="" charset="utf-8">의 charset은 이미 html에 head태그안에 메타태그로 넣어놨는데 스크립트안에 한번 더 넣는 이유를 알 수 있을까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
부트스트랩 col사용이랑 class사용
영상보다가 "col-6 col-lg-12 col-md-8 col-sm-2"라고 적혀져있는데 스크린이 최대로 넓혔을땐 모두 차지하고 중간정도 좁혔을땐 12/8만큼 차지하고 좀 더 좁아지게 만들면 12/2 만큼 나오게 된다는건데 그러면 안에 같이 들어있는 col-6같은 경우는 안 들어가있어도 상관없는건가요?? 어차피 표시가 안돼는거같은데 그리고 부트스트랩에 나와있는class를 적용시키면 원하던게 적용이 된다는건데 만약 하다가div class를 지정해서 css를 따로넣고싶은데 부트스트랩안에있는 코드랑 겹치는게 있으면 어떻게 해야돼는거에요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 버튼을 눌렀을때 이미지가 안나옵니다.
결과를 공유할때 이미지가 안나옵니다. 계속 확인중인데 잘 모르겠네요 .. 어디부분을 수정해야할까요??
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
setTimeout 부분 오류가 자꾸 납니다..ㅠㅠㅠ
answer.addEventListener("click", function(){ setTimeout(()=> { var target = qnaList[qIdx].a[Idx].type;
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
버튼이 다음화면으로 넘어가질 않아요!ㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! -저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 관리자모드 콘솔에서 확인해보니 이 두부분이 에러라고 하는데요ㅠ 왜죠.... 똑같이 복붙해도 저러는데요 글구 글자 가운데정렬은 왜 안되는걸까요? -----------------------------1번 오류--------------- <button type="button" class="btn btn-outline-danger mt-3" onclick="js:begin()">시작하기</button> </section> <section id="qna"> <p>test!</p> </section> <section id="result"> </section> <script src="./js/start.js" charset="utf-8"></script> </div> </body> </html> -------------------2번 오류---------------------- const main = document.querySelector("main"); const qna = document.querySelector("qna"); function begin(){ main.style.display = "none"; qna.style.display = "block"; }
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
폰트 적용이 안돼요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 폰트를 다른걸로 적용시키고 같은 폰트로도 적용시켜봤는데 저렇게 이상한 문자로 뜹니다. 메인화면에서는 한글로 뜨는 데 시작하기 버튼만 누르면 그럽니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
11번 오류가 있습니다
유사질문 확인해서 data.js에 오타 확인을 해보시라기에 그냥 통째로 git에 올라와있는 data파일을 옮겼습니다. 그럼에도 오류가 사라지지않아서 문의합니다 위에 노란색이 71번 빨간색이 84번 입니다. 이런말이 계속 반복됩니다. 계속하여 스텝3이나 스텝4때의 모든 파일을 제꺼에 옮겨 보았지만 오류가 사라지지않습니다.
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
netlify 웹페이지 추가 방법
강의를 보면 자바스크립트의 페이지 이동 명령어를 이용해서인지 페이지를 전환할 때 마다 url이 바뀌지 않고 (이렇게 https://twelvelovetype.netlify.app/) 모든 페이지의 url이 고정되어 있는데 시작하기 버튼을 누르고 https://twelvelovetype.netlify.app/qna1 이런식으로 url을 바꾸게 할려면 어떻게 해야 될까요? 지금은 이런 식으로 하고 있는데 이렇게 하면 url이 이렇게 나옵니다. https://twelvelovetype.netlify.app/qna1.html url뒤에 .html이라는 이름이 붙네요. 다른 웹사이트들을 보면 url 뒤에 .html이 붙여있는 형태는 본 적이 없는 것 같은데 url뒤에 .html이 안 붙고 url이 바뀌게 할려면 어떻게 해야 될까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
선생님 ! setTimeout에 관하여 질문이 있습니다!
선생님 안녕하세요 강의 정말 잘 보고 있습니다.자바스크립트 개념이 너무나 어려워, 프로젝트를 진행하면서 공부하겠다고 마음먹고 선생님의 강의를 보니 정말 실제로 활용이 이렇게 되는 부분이구나 하고 알 수 있어서 행복합니다..!!사실 강의를 보다가 제가 이해를 잘못한 것인지 여쭙고 싶은 부분이 있어 질의를 드리게 되었습니다.setTimeout에 관한 부분인데요.1단계 상수 main은 HTML문서의 #main을 호출한다.상수 qna는 HTML 문서의 #qna를 호출한다2단계 begin 함수 생성 begin 함수는 상수 main의 스타일에 CSS스크립트에 명시한 keyframes fadeOut을 1초동안 준다.3단계. 450ms를 기다린 후에 1번째 setTimeout 메서드가 등장한다.그리고 다시 450ms를 기다린 후에 2번째 setTimeout이 등장한다.그런데 모질라의 글을 계속 보다보니까, 다음과 같은 부분을 발견했습니다."setTimeout()은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않습니다. 달리 말하자면, setTimeout()을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없습니다." 이해해보자면 첫번째 setTimeout이 두번째 setTimeout을 기다리는게 아니고, 동시에 실행된다는 것인데, 자세히 보면 setTimeout 메서드는 두 개가 아니고, 바깥쪽 setTimeout에 안쪽 setTimeout이 포함되어 있었습니다.그래서 아래와 같은 함수로 조금 수정을 해보았습니다.function begin(){main.style.WebkitAnimation = "fadeOut 1s";main.style.animation = "fadeOut 1s";main.style.MozAnimation = "fadeOut 1s";setTimeout(() => {qna.style.WebkitAnimation = "fadeIn 1s";qna.style.Animation = "fadeIn 1s";qna.style.MozAnimation = "fadeIn 1s";main.style.display = "none";qna.style.display = "block"; },900); 위와 같은 함수로 바꾸어 실행해보니, 똑같이 작동함을 알게되었는데,1초는 짧기에 10배를 늘려서도 보고, 450,450으로 나뉜것을 800,100 / 100,800으로 나누어 실행하여도 똑같이 작동됩니다.그래서 이해하기를 안쪽과 바깥쪽에 걸어놓았던 delay 450ms는 900ms가 되어 하나의 delay로 작동한다는 것으로 이해했는데, 이게 올바로 이해한 부분일까요?
- 미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
판다님!! 제발 도와주세요ㅠㅠㅠ replit에서 만들고 있는데 img 파일이 안 불러와집니다. 어떻게 하면 좋을까요
안녕하세요 노트북 용량 때문에 아톰을 깔지 않고 repl.it에서 html파일을 만들어서 실행하고 있는데요... 가르쳐주신 것과 똑같이 코드를 적어봤는데 화면에 Hello world외에 아무것도 뜨지 않습니다.ㅠㅠ 혹시 왜 그런지 알 수 있을까요?