55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
클릭 이벤트
1분코딩님 항상 좋은 강의 감사합니다! :) section5에 이벤트 위임 보강편에서 화면을 클릭하실 때마다 일분이 사진 잔상이 떴는데 이런 식으로 구현하는 건가요?!
- 미해결인터랙티브 웹 개발 제대로 시작하기
이벤트 위임 장점
20:08 이벤트 위임의 장점 설명에서 동적으로 생긴다고 가정했을 때가 어떤 의미인지 잘 모르겠습니다..ㅜㅜ 어떤 부분에서 장점인지 설명해주실 수 있나요?!
- 미해결인터랙티브 웹 개발 제대로 시작하기
첨부파일에 아무것도 없어요
안녕하세요. 크롬으로 수업을 듣고있는데 수업자료를 다운받아 빵집으로 열면 아무것도 없습니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
흠..
2:34초 쯤에 ballElem.style.transform = 'translate( )'; 이전에 style 객체는 css를 관장하는 객체이라고 하셔서 이 뒤에 background-color도 들어올 수 있고 지금 처럼 transform이 들어올 수 있다는 것은 알겠어요. 그런데 translate( ) 괄호안에서 0px, 0px을 분리해서 ' + 0 + ' +px, 이렇게 분리하는게 더 보기 편한데 'px이게 하나의 문자처럼 보이고 헷갈리네요. 왜 이 아이는 '랑 붙여줬나요? 강의에서는 문자열을 분리했다고 했는데 문자열이 ' ' 안에 들어가는 아이인거고 조금 자세하게 설명 부탁드려요.. 그리고 구지 +로 나눠줘야하는 이유가 있을까요? 그냥 (e.clientX, e.clientY)로 넣어주면 안되나..
- 해결됨인터랙티브 웹 개발 제대로 시작하기
If축약형 질문 드립니다.
매번 좋은 강의 감사합니다. 하지만 실력이 미비해서 사소한 질문을 슬쩍 드려요:) [ If (self.runningState) return; ] 이 부분은 선생님 설명으로는 self.runningState가 참이면 함수가 종료한다는 명령어라 하셨는데요. 처음보는 형태라 잠시 당황했습니다. 이런 축약형태를 알고 쓰는 것은 다른 분들 예제를 많이 보고 공부하는 방법이 가장 빠를까요? 프로그래밍 언어 특성상 이런 부분이 자주 업데이트 되는 것 같은데 매번 어떻게 공부하는 것이 가장 효율적인지 여쭙니다. 강의가 다 끝나가는 시점이라 앞으로 어떻게 스스로 찾아 공부해야 할지 걱정이라서요 ㅜ 감사합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
speed 넘겨줄 때 질문 있습니다!
wall3d에서 speed:Math.random()으로 넘겨주고 생성자에서this.speed=info.speed로 받는 것이랑 그냥 Character 생성자에서 this.speed=Math.random()한 것이랑 무슨 차이인가요? 결과는 같은데 넘겨준 것으로 하신 이유가 궁금합니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
js 코드의 순서 질문 있습니다!
문득 궁금한게 있어 질문드립니다 문법 관련 질문인데요ㅜㅜ [ 0:32 ] 정도에 아래 prototype에서 정의해 놓은 this.init(); 을 정의문보다 먼저 호출하는데, prototype의 init 함수는 호출문보다 밑에 정의해놓았는데 어떻게 먼저 실행할 수 있는건지 궁금합니다! ( 지난번 강의에서 브라우저가 html, css, js을 실행할 때 위 -> 아래의 순서로 실행되기 때문에, <script>태그를 html 태그 하단에 작성하는 것이 좋다는 말씀이 생각나서요..! ) 혹시 js가 컴파일??을 먼저 거치고 나서 이후에 실행되는 것이기 때문에 가능한 것일까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
innerHTML태그
innerHTML 태그가 const listElem = document.createElement('li'); listElem.innerHTML = '<span>일분이</span>'; 이런식으로 사용해서 ' ';과 그 안에 태그 및 내용이 들어가는 것으로 알고있는데 오늘 사용하신 코드에는 ilbuniElem.getBoundingClientRect().top; 이 들어와서.. 태그 뿐 아니라 method 값도 들어올 수 있나해서여쭤봅니다.어렵네요.. ㅠㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
태그질문
태그에 대한 질문인데요. 데이터에서 가져오는 이미지일 경우 figure을 쓴다고 하셨는데 이 예시의 경우 홈페이지에 그냥 올라간 이미지인것 같은데 이 경우엔 img 태그만 써도 돼지 않나요? figure태그 안에 img태그를 넣어주신 이유가 있을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이 있습니다!
스크롤 이벤트의 경우, document 객체든 window 객체든 상관 없다고 하셨는데 이전에 했던 클릭 이벤트는 document 객체에 했었는데 클릭은 document 객체에만 해야하는 건가요? 그리고 개념 설명때는 3가지로 나눠서 1.이벤트 발생시킬 버튼 가져오기 2.EventHandler 정의 3.addEventLister에 연결하기로 배웠었는데, 여기서는 그냥 addEventLister안에서 그냥 함수 정의해주네요. 이렇게 해도 되는 거에요? 위 3가지로 생각했는데 이렇게도 되니 헷갈리네요 ㅎ휴ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 질문있습니다.
<!DOCTYPE html> <html lang="en"> <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> <style> .menu { display: flex; align-items: center; justify-content: center; background: burlywood; height:60vh; } .menu-btn { border: 5px solid white; border-radius: 20px; outline: 0; font: 900 1.2rem NotoSans; background: linear-gradient(0deg, rgba(233,210,0,1) 0%, rgba(255, 240, 0, 1) 24%, rgba(255,240,0,1) 70%, rgba(255,255,255,1) 100%); box-shadow: rgba(255,255,255,1) 0 1px 0; pointer-events: none; margin: 10px; } .btn-label { text-shadow: rgba(255, 255, 255, 1) 0 1px 0; /* pointer-events: none; */ } .icon { width: 60px; /* pointer-events: none; */ } </style> </head> <body> <div class="menu"> <button class="menu-btn" data-value="1"> <img src="./images/ilbuni_1.png" alt="" class="icon"> <span class="btn-label">일분이1</span> </button> <button class="menu-btn" data-value="2"> <img src="./images/ilbuni_2.png" alt="" class="icon"> <span class="btn-label">일분이2</span> </button> <button class="menu-btn" data-value="3"> <img src="./images/ilbuni_3.png" alt="" class="icon"> <span class="btn-label">일분이3</span> </button> </div> <script> const menu = document.querySelector('.menu'); function clickHandler(event) { let elem = event.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; //parentNode란 부모 엘리먼트를 의미한다. //nodeName란 태그 이름을 문자열로 갖고 있는 속성이다. if(elem.nodeName == 'BODY') { // BODY는 대문자로 해야됨. elem = null; return; } } console.log(elem.dataset.value); // console.log(event.target.dataset.value);ㅇ // console.log(event.target.getAttribute('data-value')); } menu.addEventListener('click', clickHandler); </script> </body> </html> 이렇게 영상보고 잘 따라 했는데, 버튼을 눌러도 콘솔창에 아무런 증상이 없습니다...! ㅠㅠ 어떤 부분이 문제인지 잘 모르겠어요.
- 미해결인터랙티브 웹 개발 제대로 시작하기
const mousePos에서요!
문법적인 질문입니다 ㅜㅜ mousePos 변수를 const로 했는데, 이벤트핸들러 내에서 mousePos.x = .....; 이렇게 하면 mousePos 객체 내의 x, y값이 변하더라구요! const는 값이 변하지 않는 변수에 주는건데, 객체는 예외인건가요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
14분 30초 IE에서 카드위치 조절
선생님께서는 margin 음수 값을 이용해서 카드를 가운데로 정렬 하도록 진행하였는데, 가운데 정렬을 하는것의 기준이 카드의 왼쪽 꼭짓점이 아니라 카드의 중앙으로 설정하는 것도 transition-origin 같은 어떤 기능을 통해서 가능한가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
이 강의 자료는 어디있나요?
궁금합니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
while문으로 target 얻어오는 방법에서 질문 드립니다
if문으로 target을 찾아서 하면 계층이 복잡해진다고 하셔서 while (!target.classList.contains('door')) { target = parentTarget; activate(target); } } 이런식으로 while문을 통해 target을 조사하는 식으로 바꿔서 해보았는데요, 문을 한 번 열면 while문이 무한루프를 돌아서 페이지가 먹통이 되어버리네요 ㅜㅜ 무엇이 문제일까요? 이 방법을 사용하려면 어떻게 해야할지 모르겠어요
- 미해결인터랙티브 웹 개발 제대로 시작하기
const 할당 변경 하는법
혹시 제가 const값 잘못할당했는데 수정하고 싶을 때 어떻게 해야되는지 알 수 있을까요ㅠㅠ?
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이 있습니다!
이전에 이벤트 위임 보강 영상에서 사용했던 코드로 써도 되나요? function doorHandler(e) { const targetElem = e.target; targetElem.parentNode.classList.add('door-opened'); if (targetElem.nodeName='BODY') { targeElem = null; return } }
- 미해결인터랙티브 웹 개발 제대로 시작하기
3D 입체감 표현 관련하여 질문드립니다.
우선 강의가 너무 재밌어서 하루 하루가 즐겁습니다. 감사합니다. stage에 perspective를 넣으면 시점마다 차이나는 3D가 표현되는 점과 따라서 회전하는 요소인 door-body에 직접 perspective를 넣어 일관된 시점으로 보이게 하는 부분은 이해하였습니다. 질문 1) stage가 아닌 door에 perspective를 넣었더니 door-body에 넣은 것처럼 일관된 시점의 3D가 나옵니다. 회전하는 주체의 부모 엘리먼트인데 왜 stage처럼 작동하지 않는 것일까요?? 질문2) stage에 perspective를 사용할 때 door에 preserved-3d를 넣어주지 않아도 이전 카드 뒤집기와 달리 정상적으로 3d가 작동하는 이유는 무엇일까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
인용구 질문
window.addEventListener('click', () => { const htmlStr = ` <button class="menu-btn" data-value="1"> <img class="icon" src="../images/ilbuni1.png" alt=""> <span class="btn-label">일분이 1</span> </button> <button class="menu-btn" data-value="2"> <img class="icon" src="../images/ilbuni2.png" alt=""> <span class="btn-label">일분이 2</span> </button> <button class="menu-btn" data-value="3"> <img class="icon" src="../images/ilbuni3.png" alt=""> <span class="btn-label">일분이 3</span> </button> `; 여기서 ` `인용구를 왜 넣은건지 궁금해요.
- 미해결인터랙티브 웹 개발 제대로 시작하기
background-image 관련
안녕하세요, background-image의 경우 태그에 넣어주고 repeat position size는 css에 적어주는 게 좋다고 하셨었는데요 <css flex/grid> 강의에서.. 여기서는 css에서 background-image를 넣어주셨는데 background-image의 경우 태그에 넣어주고 나머지만 css로 넣어주어도 되나요?