소리가 너무 작은데..
미해결
생활코딩 - HTML 기초
이전 영상과 비교했을 때 확 작아졌는데 저만 그런가요?ㅠ 크롬 이퀄라이져로 소리 키웠네요..
- HTML/CSS
루미
댓글 1
좋아요 2
조회수 447
묻고 답해요
176만명의 커뮤니티!! 함께 토론해봐요.
캐릭터가 점프하면서 앞으로 나아가게 만들고있습니다
미해결
웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
점프하면 앞으로 나가게는 만들었는데 방향이 left인 상태에서 점프를 up하면 right을 향한채로 뒤로 점프하게 됩니다. 계속 생각해보다가 도무지 모르겠어서 질문드립니다..! up에서 기본으로 방향이 right으로 향하는거 같은데 어떻게 해결해야할까요 if ( key . keyDown [ " right " ] && key . keyDown [ " up " ]) { this. el . classList . add ( " jump_run " ) ; this. el . classList . remove ( " run " ) ; this. el . classList . remove ( " jump " ) ; this. el . classList . remove ( " flip " ) ; this. direction = " right " ; this. moveY = this. moveY - this. jump ; this. moveX = this. moveX + this. speed ; setTimeout ( () => { this. el . classList . remove ( " jump_run " ) ; this. el . classList . add ( " run " ) ; }, 300 ) ; } else if ( key . keyDown [ " left " ] && key . keyDown [ " up " ]) { this. el . classList . add ( " jump_run_back " ) ; this. el . classList . add ( " flip " ) ; this. el . classList . remove ( " run " ) ; this. el . classList . remove ( " jump " ) ; this. direction = " left " ; this. moveY = this. moveY - this. jump ; this. moveX = this. moveX - this. speed ; setTimeout ( () => { this. el . classList . remove ( " jump_run_back " ) ; }, 300 ) ; ////// 이하 CSS . hero_box . hero . flip { transform : rotateY ( 180deg ); } . hero_box . hero . jump { animation : hero_jump 0.5s 1 ; } . hero_box . hero . jump_run { animation : hero_jump_run 0.5s 1 ; } . hero_box . hero . jump_run_back { background-size : 1498px 182px ; animation : hero_jump_run_back 0.5s 1 ; } @keyframes hero_jump_run_back { 0% { transform : translate ( 0 , 0 ); } 50% { transform : translate ( -25px , -150px ); } 100% { transform : translate ( -40px , 0 ); } } @keyframes hero_jump_run_back_flip { 0% { transform : rotateY ( 180deg ); } 50% { transform : rotateY ( 180deg ); } 100% { transform : rotateY ( 180deg ); } }
- HTML/CSS
- 인터랙티브-웹
- javascript
박박하다
댓글 1
좋아요 0
조회수 422
판다님!! 제발 도와주세요ㅠㅠㅠ replit에서 만들고 있는데 img 파일이 안 불러와집니다. 어떻게 하면 좋을까요
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요 노트북 용량 때문에 아톰을 깔지 않고 repl.it에서 html파일을 만들어서 실행하고 있는데요... 가르쳐주신 것과 똑같이 코드를 적어봤는데 화면에 Hello world외에 아무것도 뜨지 않습니다.ㅠㅠ 혹시 왜 그런지 알 수 있을까요?
- html
- HTML/CSS
- javascript
- bootstrap
닉네임은비워둘수없어요
댓글 2
좋아요 1
조회수 1168
도커로 서비스 시작하기 강의에서
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
docker-compose up -d --build 후 마이그레이션 하는 과정에서 makemigrations 적용이 되지 않아서 질문 올려드립니다. 문제가 뭔지 열심히 찾아봐도 도통 뭑가 문제인지 모르겠습니다 github 주소는 여기있습니다
- HTML/CSS
- bootstrap
- javascript
- python
- django
- aws
- tdd
- docker
앙앙기모
댓글 1
좋아요 0
조회수 419
(21.12.01기준)포스트맨 Send버튼을 눌러도 응답이 없는 경우
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Send버튼을 눌러도 아무 응답이 없는 경우 우측상단 저의 경우 "No Environment"로 되어있는 부분을 클릭하셔서 자신이 작성한 목업서버 이름을 클릭하시고 다시 Send를 누르시면 작성하신 응답 받을 수 있습니다.
- HTML/CSS
- 머신러닝 배워볼래요?
- javascript
- react
- express
- react-native
- tensorflow
- nodejs
sulbum yun
댓글 1
좋아요 10
조회수 544
npm start가 안됩니다 꼭 좀 확인해주세요ㅜㅜ
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
creat-react-app은 다 설치가 되었는데 npm start가 안됩니다ㅜ cmd에서도 터미널에서도 안되는데 어떻게 해야 좋을까요? react를 겨우 설치하고 나니 또 이런 문제가 생겨서 너무 마음이 속상합니다ㅡㅜㅜ
- tensorflow
- HTML/CSS
- react
- 머신러닝 배워볼래요?
- react-native
- express
- nodejs
- javascript
김민지
댓글 2
좋아요 2
조회수 310
질문있습니다
해결됨
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고 평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다. 밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다. 웹사이트 삼성화재 바로가기 밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다. codepen 바로가기 네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다. 현재 디스플레이 none block 으로 만들었습니다. opacity 으로 적용 했지만 해결되지 않았어요. 혹시 좋은 방법 없을까 하고 질문올립니다.
- scss
- sass
- HTML/CSS
- flex
댓글 1
좋아요 2
조회수 343
answer 여러 개 나옵니다.
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
아무 선택지나 누른 후 새로고침을 하고 다시 시작하기 버튼을 누르면 answer가 여러개가 나옵니다. 크게 불편함은 없지만 신경이 쓰이는데 없애는 방법은 없을까요?
- answer
- HTML/CSS
- qna
- 오류
- bootstrap
- javascript
나는나
댓글 3
좋아요 1
조회수 416
안녕하세요! 다양한 태그와 function에대하여 질문드립니다
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요! 코딩공부를 시작한지 2주 조금 넘는 코딩 신생아입니다 2주간은 생활코딩 유튜브를 보며 html,css,javascript를 공부했는데 그 뒤 처음으로 듣는 강의가 mbti toyproject다 보니 낯선 구조들이 몇몇 보여서요 ! 혹시 태그나 function 중 innerHTML / createElement/appendChild 등과 같은 요소는 검색을 통해 하나하나 배워나가는 것일지, 어떻게 공부하면 좋을지 고민이 되어 질문드립니다. 검색을 하자니 기능을 몰라서 어떻게 검색해야할지도 아직 감이 안와서요 ㅠㅠ 처음 공부할 때 , 어떻게 익혀나가는게 좋을까요 ?
- javascript
- bootstrap
- HTML/CSS
댓글 1
좋아요 1
조회수 256
질문드립니다 ㅠㅠ
미해결
[하루 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>
- HTML/CSS
- javascript
- bootstrap
댓글 2
좋아요 1
조회수 355
기초적인 질문이라 부끄럽지만 질문 드립니다
미해결
웹게임을 만들며 배우는 인터렉티브웹! 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)'; 위와 같이 바꿨더니 동작하는데, ${}가 어떤 것인지 설명 부탁드립니다. 좋은 강의에 부족한 실력이지만 열심히 따라가려고 노력하고 있습니다. 답변 기다리겠습니다. 감사합니다.
- 인터랙티브-웹
- javascript
- HTML/CSS
Bob
댓글 1
좋아요 0
조회수 445
타이핑을 반복해서 실행할 수 있나요?
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
typing 플러그인에서 글자를 한번 타이핑을 수행하고, 다시 반복해서 지속적으로 타이핑 에니메이션이 수행되었으면 합니다. 방법이 있는지요?
- typying
- HTML/CSS
- typeit
- jquery
- 반응형-웹
뿌리나무
댓글 3
좋아요 1
조회수 521
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 두 가지 모두 사용할 수 있는 속성으로 나와있는데 왜 안되는걸까요??
- HTML/CSS
- 인터랙티브-웹
- javascript
박선우
댓글 2
좋아요 0
조회수 553
배경사진이 두개로 나옵니다ㅜ
해결됨
만들면서 배우는 HTML/CSS
index.html 파일도 style.css파일도 강의와 같이 동일하게 적는다고 따라 적었는데 실시간 웹페이지 반영하기 버튼으로 봤더니 배경 이미지가 두개로 연달아 나와서 문의 드립니다. 이건 어떻게 해결방법이 없으련지요?
- 배경
- 스타일
- HTML/CSS
- html
- css
- reset
- 안돼요
- 흑흑
시리
댓글 1
좋아요 0
조회수 412
result구현 오류... 질문드립니다.
해결됨
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
두가지 오류가 있는거같습니다. const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 이런식으로 선언 했지만, +=연산을 돌린후 (안되길래 깃헙의 코드 그대로 복붙을 했음에도,,) 문자취급이 되어서 위 사진처럼 됩니다. 또한, v let 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); }
- javascript
- HTML/CSS
- bootstrap
댓글 2
좋아요 1
조회수 347
함수 질문합니다
해결됨
자바스크립트 제대로 배워볼래?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice( start [, deleteCount [, item1 [, item2 [, ... ]]]]) mdn 문서보면 저런식으로 써져있는데 [, [, [[[]]] 이런건 무슨 기호인가요?
- 질문
- HTML/CSS
- javascript
- es6
nonoa846
댓글 1
좋아요 0
조회수 221
mdn 문서를 봤는데 특이한게 있어서요
해결됨
자바스크립트 제대로 배워볼래?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. array.splice( start [, deleteCount [, item1 [, item2 [, ... ]]]]) 이런식으로 쓰여져 있는데 [, [, ?? 이건 무슨뜻일까요?ㅠㅠ 중첩구조로 되있는데
- 질문
- HTML/CSS
- javascript
- es6
nonoa846
댓글 0
좋아요 0
조회수 280
blog폴더에 views.py에 class PostList(Listview) 내용과 post_list.html에 변수명이 틀린거에 대한 의문
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
view.py 에서 model = Post를 대입한 부분은 이해가 가는데 post_list.html에서 포문을 돌릴때 post_list라고 하는거는 변수명이 안맞는데 잘 돌아가는거에 대한 의문점이 듭니다.
- python
- HTML/CSS
- docker
- bootstrap
- django
- tdd
- aws
- javascript
이원영
댓글 1
좋아요 2
조회수 419
두가지 오류사항 질문드립니다. (live server Full Reload 오류 / position: relative 관련)
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
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; 만 적용해도 화면에 문제없이 잘 나타나는 이유도 궁금합니다.:) 감사합니다.
- HTML/CSS
- 웹 디자인
- jquery
- 반응형-웹
Melody
댓글 2
좋아요 3
조회수 969
부트스트랩 관련 질문
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
근데 강의에서 부트스트랩 4.x 버전을 사용하시는 이유가 있으신가요? 제 개인 프로젝트 사이트에서는 부트스트랩 5.x 버전을 적용하고 싶거든요.
- bootstrap
- python
- docker
- tdd
- javascript
- aws
- django
- HTML/CSS
댓글 1
좋아요 0
조회수 343
인기 태그
인프런 TOP Writers
- 스위프 9
- clee002 3
- Minkoo Lee 2
- 노재은[ 학부휴학 / 경제학과 2
- dspark 2
- mayvmoring 2
- 5647kr 2