node.js 14.x is no longer actively supported이하 뭐시기 떠서 개열받았는데https://corona-world.tistory.com/83 여기 보시는 방법대로 하시면 잘 됩니다. 

해당 강의(자바스크립트에서 API를 불러보자) 재생 버튼 누르면 동작하지 않고 그 전 강의에서 다음강의 수강하러가기로 이동해도 건너띄어지는데 확인좀부탁드립니다

안녕하세요, 부트캠프부터 뉴파일이 생성이 안돼서 시작을 못하고 있습니다ㅜ 이럴 땐 어떻게 해야할까요?

.left도 지속적으로 x를 호출하니 quickTo를 쓰면 더 좋지않을까 라고 생각했는데 .left는 to로 컨트롤하시는 이유가 있을까요?quickTo의 기본값이 픽셀이라 퍼센트 넣으면 동작이 이상해지던데 혹시 이런 이유일까요?!

snipaste 앱을 사용하시면 캡처 이미지를 화면 최상단에 고정할 수 있어요sql쓸때 자주 사용하는데드래그도 되고 중복으로도 가능하고 무료입니다 ㅎㅎ품격개발자님 화이팅

setUserInput("")을 하면 userInput 값이 ""로 바뀌고그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. codesandbox 문서 버튼이 안보여요코딩실습을 해야하는데 문서 버튼이 아예 없어서 어딜 눌러서 코딩을 해야할지...

안녕하세요, 맨 첫 강의인 <header영역 레이아웃> 수업을 듣고 있는데, 강의 내용과 똑같이 진행하였으나 Css가 적용되지 않아 질문 드립니다. Google에 검색을 통해 쿠키 삭제, link대신 @import 사용 등을 실행했으나 결과는 똑같았고, F12 눌러 개발자용 모드로 확인 해보았는데 css가 작동되지 않는다는 알림만 뜰 뿐 해결책을 찾지는 못했습니다.  이러한 경우에 어떻게 해결할 수 있을까요? 미리 답변 감사드립니다.

2-1[코드설명]기초다지기! 강의에서 질문1. 코드에서 render함수가 정의되기 전에 getPercent함수에서 render를 호출(실행)하는게 이해가 안되요.. ㅜ_ㅜ함수가 값도 되기 때문에 값을 전달하면서 동시에 호출도 하는것이 가능 한건가요? 질문2. function init(){ getPercent();};이렇게 초기화 하는건 기본으로 꼭 해야하는 동작인가요 질문3.javascript 기초를 듣고 왔는데 익숙해질때까지 강의를 반복수강하는것 말고 익숙해지는 방법이 또 있을까요? 기초를 복습할 수 있는 아주 쉬운 예제가 있는 사이트들이 있다면 추천 부탁드립니다. 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 빈 배열 객체 생성 let infowindow = []; 거기에 for문 돌면서 infowindow 집어넣기infowindowArray.push(infowindow);1,2번 까지는 말 그대로 빈 배열객체를 생성후기존의 infowindow를 집어넣어 기존의 자료가 들어간infowindowArray를 만든것까진 알겠는데그 이후에 3. function closeInfoWindow(){ for (let infowindow of infowindowArray){ infowindow.close(); } };이게 무슨 말 일까요? 사실 모든 원리가 잘 이해가 되질 않습니다..ㅜㅜ기존에는 그냥 인포윈도우 클릭하면 해당정보가 나타나고 그것을 다른 것을 누르면 끄려 그러는데 왜 빈 배열객체를 만드는지 부터 잘 이해가 안되네요..

result 페이지에서 결과가 안 나와요resultname, resultdesc가 안 뜨는데이미지는 선택된 결과 제대로 뜨는 걸로 봐선 알고리즘엔 문제가 없는데 어디서 잘못된 걸까요? 제 코드는 이렇습니다. const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endpoint = 6; const select = [0, 0, 0, 0, 0, 0]; function claResult() { console.log(select); var result = select.indexOf(Math.max(...select)); return result; } function setResult() { console.log(name); let point = claResult(); const resultname = document.querySelector('.resultname'); resultname.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = '../image/image-' + point + '.png'; resultImg.src = imgURL; resultImg.alt = point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDese'); 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) }) setResult(); } function addAnswer(answerText, qIdx, idx) { var a = document.querySelector('.answerBox'); var answer = document.createElement('button'); answer.classList.add('answerList'); answer.classList.add('mx-8'); 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) + '%'; } function begin() { 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"; }, 450) let qIdx = 0; goNext(qIdx); }, 450); } 

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a연습</title> <link rel="stylesheet" href="css/a연습.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li> <a href="#none">악세사리</a> <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b> </a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요. <b>2020.01.07</b> </a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지 <b>2019.12.31</b> </a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b> </a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b> </a> </div> <div class="tab2"> <a href="#none"><img src="imges/d-1images/gallery-1.jpg" alt="gallery1"></a> <a href="#none"><img src="imges/d-1images/gallery-2.jpg" alt="gallery2"></a> <a href="#none"><img src="imges/d-1images/gallery-3.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/연습용custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; } a{ font-size: 15px; color: #333; list-style: none; text-decoration: none; } .container{ border: 1px solid #000; width: 1200px; } header{ display: flex; justify-content: space-between; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .menu{ padding: 0; list-style: none; margin-top: 30px; } .menu li{ float: left; width: 25%; text-align: center; box-sizing: border-box; } .menu li > a{ border: 1px solid pink; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: pink; color: #fff; } .sub-menu{ border: 1px solid pink; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: palevioletred; color: #fff; } .slide{} .slide > div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } /*tab-inner*/ .tab-inner{ width: 97%; margin: auto; margin-top: 5px; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; width: 100px; margin-right: -6px; padding: 4px; text-align: center; border-radius: 7px 7px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs > div{ border: 1px solid #000; height: 150px; } .tab1{} .tab1 a{ display: block; border-bottom: 1px dashed #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content{ background-color: #fff; width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .modal-content h2{ background-color: powderblue; text-align: center; } .modal-content p{ line-height: 1.5em; padding: 10px; } .close-modal{ border: 1px solid #000; padding: 5px 5px; margin-right: 30px; float: right; } /*tab-inner*/ $('.btn span:first-child').click(function(){ $('tab1').show() $('tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('tab2').show() $('tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })갤러리부분에 이미지도 넣어놨는데 tab2 부분이 안나타나고 tab1 부분만 그대로 나와움직이질않습니다 span부분클릭해도 tab1부분만 나와있어요 어디서부터 잘못된걸까요 전에꺼랑 비교햇을때 똑같은데 어떤게 잘못됫나요 ,,,

안녕하세요 강사님!덕분에 잘 완강해서 파이널과제까지 마쳤습니다.뭔가 이어서 배포까지 하는 프로젝트를 하나 만들어보고 싶은데고농축 프론트엔드 수업?이거 강의를 들으면 도움이 될까요?학습방향이 궁금해서 여쭤봅니다!그리고 뭔가 프로젝트 하나를 만들 때 피그마를 사용해야 하는 걸로 알고 있는데,이건 본인이 직접 만들어서 프로젝트에서 적용하는 건가요?아니면 프리캠프에서 했던 것 처럼 피그마 예시를 주고 거기다가 하는건가요?

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b-2레이아웃</title> <link rel="stylesheet" href="css/b-2.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <div class="sub-back"></div> </ul> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="imges/d-1images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="imges/d-1images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="imges/d-1images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"></div> <div class="sns"> <div></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body{ color: #333; margin: 0; background-color: #fff; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .header-inner{ background-color: #eee; } .content-inner{} .footer-inner{ background-color: #eee; } header{ width: 1200px; margin: auto; display: flex; justify-content: space-between; position: relative; } header > div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } /*navigation*/ .menu{ padding: 0; list-style: none; margin-top: 70px; } .menu li { float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back{ width: 100%; height: 200px; background-color: #000; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } .slide{ position: relative; height: 300px; } .slide > div{ width: 1200px; height: 300px; margin: auto; border: 5px solid #000; position: absolute; } .items{ width: 1200px; margin: auto; display: flex; } .items > div{ border: 1px solid #000; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ width: 1200px; margin: auto; display: flex; } footer > div{ border: 1px solid #000; height: 100px; } .copyright{ width: 1000px; } .sns{ width: 200px; } .sns div{ border: 1px solid #000; height: 50px; } 슬라이드부분에 하다가 포지션 엡솔루트만 주면 사진기준이 이상하게되는데 뭐가잘못된건가요 

17, 17.0.0, 18.0.0 다 해봤는데 버튼은 뜨지만 눌렀을 때 글자가 바뀌지 않아요ㅠ 문제가 무엇일까요?

안녕하세요 Thymeleaf vs HTML + RestController 주제를 듣던 중 의아한 부분이 생겨 글을 작성하게 되었습니다.해당 강의에서 Thymeleaf 에 대한 설명을 진행하던 와중, 도중 강의가 갑자기 끝나는 듯한 느낌을 받았습니다.강의 페이지를 보니, 이후 설명되야 할 내용처럼 보이는 것을 발견했습니다. 혹시 중간에 강의가 누락된 것인지 확인 부탁드립니다.

안녕하세요, 강사님!수업 너무 잘 듣고있습니다.다름이 아니라 제가 모르고 싸이월드 만들기 피그마에서 협업 요청 버튼을 눌렀는데 어떡하죠..?ㅠㅠ거절해주실 수 있나요..?

<ul class="gnb"> <div class="wrap"> 차이무엇입니까?

안녕하세요,애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다! 섹션, "3D 텍스트효과(2)" 에서인터벌 단위로,duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요 강좌에서 나온 예시 SVG 이미지 보면서,저렇게 애니메이션을 정의하면 되겠다,인사이트를 얻었습니다. 문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지,관점이나, 포인트가 궁금해졌습니다!(이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,) 강의 내용처럼,애니메이션을duration,stagger,pause,delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?! 블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요! 감사합니다!  

초반부 messageA_opacity_in 을 콘솔로 찍었는데요,partScrollStart보다 currentYOffset이 작을때는rv에 values[0] 즉 '0'을 리턴해야하는데,그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values:{ messageA_opacity: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ];function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / scrollHeight if(values.length === 3){ // start ~ end 사이의 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){ rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart){ rv = values[0]; } else if (currentYOffset > partScrollEnd){ rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; switch (currentScene){ case 0: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ