55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
rotate() 사용시 좌표 방향 기준
강사님 영상 재밌게 보고있습니다. 영상 07:10초쯤에서 오른쪽 측면용 벽 너비를 1000vw로 설정하고 z축으로 이동시켜주신다 하셨는데요. 저는 당연히 x축으로 이동시켜야 된다고 생각했는데, 이게 원리가 3d공간에서 rotate()시 요소의 좌표기준방향도 같이 회전되서 바뀌는 원리인가요?? API관련해서 mdn찾아봐도 관련내용은 쉽게 찾을수가없네용.. 혹시 3d관련해서 참고할 리소스 추천해주실 수 있으신가요? 감사합니당:)
- 미해결인터랙티브 웹 개발 제대로 시작하기
DOMscript파트 강의자료
강사님 강의 재밌게 잘보고있습니다! DOMscript1부터 같이 따라해보고싶은데 수업자료가 없네용 첨부해주시면 감사하겠습니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 질문이 있습니다.
직접 예제를 해보았는데, removeChild후 child 이미지가 차례대로 다시 적용되는데, 예제랑 달라서 질문 드립니다. div.stage div.img div.img div.img ------css.img:nth-of-type(1){...background-image:url(image1); } .img:nth-of-type(2){...background-image:url(image2);} .img:nth-of-type(3){...background-image:url(image3);} 위 상태에서 상단 첫번째 div.img 를 클릭하여 removeChild 하면 첫번째 div랑 image1이 같이 삭제되는 것처럼 보이는게 아니라 첫번째 child가 삭제된 후 child가 두개가 남고 .img:nth-of-type(1).img:nth-of-type(2) 가 다시 적용되어 image3이 날라가는 듯한 결과로 나옵니다. div.stage div.img - image1 div.img - image2 예제를 잘못 따라한건지 다시 살펴보았는데, 뭐가 잘못된건짐 모르겠네요..
- 미해결인터랙티브 웹 개발 제대로 시작하기
스프라이트 이미지 제작 프로그램이 궁금해요!
좋은 강의 감사드립니다! 예제에서의 스프라이트 이미지 제작 프로그램은 어떤게 있나요?
- 인터랙티브 웹 개발 제대로 시작하기
animation에서요
삭제된 글입니다
- 해결됨인터랙티브 웹 개발 제대로 시작하기
ie11, 엣지에서 문제입니다.
perspactive가 적용된 상태에서 회전을 시키면 backface-visibility가 ie11에서는 꼭 transition이 없는 상태처럼 적용이 됩니다. 엣지에서는 앞면 카드가 90퍼센트 정도 회전을 하고 정지하고 사라지지않고 남아있습니다. 소스를 선생님과 똑같이 적어도 그런데 어떤게 문제일까요... perspactive를 제거하면 3d 효과는 사라지나 위에 문제들이 발생하지 않습니다. 크롬에서는 잘 동작합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
복습 질문이요~
function Card(text, naming,size) { this.text = text; this.naming = naming; this.size = size; this.init(); } Card.prototype = { constructor: Card, init: function() { const mainElem = document.createElement('div'); mainElem.innerHTML = this.text; mainElem.style.fontsize= this.size; mainElem.classList.add('card'); document.body.appendChild(mainElem); } } const card1 = new Card('dd', 'dd','25px'); 위에처럼 생성자 함수 인자를 text,naming으로 둘다 문자 속성으로 만들었는데 프로토타입에서 어떻게 해야 둘다 생성자 함수로 호출해서 쓸 수 있을까요? innerHTML 으로 둘다 값을 넣어주면 아래 네이밍만 살아남은채로 나오는데; 그리고 fontsize 값을 넣어줬는데 작동이 안하네요 뭔가 잘못한거 같은데 모르겠어요~선생님 도움이 필요합니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
stage클릭시 문 안닫히는 효과
stage클릭했을 문 안닫히는 효과는 어떤식으로 줄 수 있을까요? if문으로 해야 한다는건 알겠는데 그 다음이 막막하네요;;
- 미해결인터랙티브 웹 개발 제대로 시작하기
이번 강의랑은 관련 없는 질문인데요
선생님 이번 강의 잘 들었습니다~ 다름이 아니라 샘 다른 강의도 들어보고 싶은데 코알못이랑 SVG 강의가 있는데 어떤것 듣는게 나을까요? 제가 완전 초보는 아닌데 코알못을 들어도 될까요? 이번강의에서 3D파트에서 뒷부분 캐릭터JS부분만 어려웠는데 코알못을 들어도 도움이 될까요? 끝으로 좋은 강의 감사드립니다~
- 미해결인터랙티브 웹 개발 제대로 시작하기
애니메이션 시작점
애니메이션 시작점을 캐릭터가 문여는 시점부터 시작하려면 애니메이션 값을 어떻게 줘야 할까요? 그리고 아래 처럼 백그라운드 포지션값에 레프트 , 라이트 값으로 주게되면 이상하게 동작하는데 원리가 알고싶습니다~ from{ background-position:left ; }
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이요~
that.scrollState = setTimeout (function () { that.scrollState = false; that.mainElem.classList.remove('running'); },500); 위 코드에서 that.scrollState = false; 이 부분이 왜 들어가야 하는지 모르겠어요 ;; 설명해주신거 같은데 잘 이해를 못한건지 ㅠㅠ 위 생성자함수안에 this.scrollState = false; 이 값을 셋팅해 줬는데 또 왜 주는지 모르겠어요
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이요~
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> body[data-char='ragirl'] { background: #ff7200; } body[data-char='ilbuni'] { background: dodgerblue; } body{ height:500vw; font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif; -webkit-overflow-scrolling: touch; color: #555; } .world{ position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; perspective: 1000px; } .house { width: 100vw; height: 100vh; transform: translateZ(-490vw); transform-style: preserve-3d; } .wall-front-a { transform: translateZ(300vw); } .wall-front-b { transform: translateZ(50vw); } .wall-front-c { transform: translateZ(-200vw); } .wall-front-d { transform: translateZ(-500vw); } .wall-content{ position: absolute; display:flex; align-items: center; justify-content: center; height: 100vh; } h2{ font-size: 15rem; } </style> </head> <body> <div class="click-button"> <button class="buttonboy" data-char="ilbuni"></button> <button class="buttongirl" data-char="ragirl"></button> </div> <div class="progress-bar-con"> <div class="progress-bar"></div> </div> <div class="world"> <div class="house"> <div class="wall-front-a"> <div class="wall-content"> <h2 class="wall-title">안녕하세요</h2> <!-- <img src="Bible.png" alt=""> --> </div> </div> <div class="wall-front-b"> <div class="wall-content"> <h2 class="wall-title">Hello</h2> <!-- <img src="K-108.png" alt=""> --> </div> </div> <div class="wall-front-c"> <div class="wall-content"> <h2 class="wall-title">Hola</h2> <!-- <img src="Bible.png" alt=""> --> </div> </div> <div class="wall-front-d"> <div class="wall-content"> <h2 class="wall-title">こんにちは</h2> <!-- <img src="K-108.png" alt=""> --> </div> </div> </div> </div> <script type="text/javascript"> (function () { const houseElem = document.querySelector('.house'); let maxScrollValue; window.addEventListener('scroll',function () { const scrollPer = pageYOffset / maxScrollValue; const zMove = scrollPer *980 -450; houseElem.style.transform = 'translateZ('+zMove+'vw)'; }) function resize() { maxScrollValue = document.body.offsetHeight - window.innerHeight; } resize(); })(); </script> </body> </html> 복습하면서 예제랑 비슷하면서 간단하게 만들려고 위에처럼 코드를 짜봤는데 스크롤 움직이면 제대로 작동은 하는데 폰트들이 왼쪽으로 휘면서 커지네요... 이건 어떤 문제가 있는걸까요??
- 해결됨인터랙티브 웹 개발 제대로 시작하기
질문이요~
function Character(info) { this.mainElem.style.left = info.xPos + '%'; info의 정체가 무엇인가요?? info.xPOS로 어떻게 xpos를 가져올수 있는걸까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이요~
function Character() { this.mainElem = document.createElement('div'); this.mainElem.classList.add('character'); 위에 생성 함수 mainElem안에 createElement으로 div를 생성하고 그안에 add로 character 클래스를 추가한다는 뜻인가요? 즉 , mainElem 안에 div가 있고 div 형제 클래스로 character가 있는건가요? 그 전 강의에서도 들었는데 이해가 잘안가서요 ;; 너무 초보 질문이라 죄송합니다;;
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요~ 이번에 캔버스 강의를 참여했었는데요..(일요일 못감 ㅜ.ㅜ)
혹시 제가 캔버스로 작곡 노트 같은 것을 만들어야 되는데요. `tone.js`를 참조해서 만들고있어요.. https://learningmusic.ableton.com/make-beats/make-beats.html 이정도 기능 구현을 만드는데 얼마나 걸릴지 궁금합니다. ^^;; 이번에 svg 강의도 가요~! 항상 좋은 강의 감사합니다!!
- 해결됨인터랙티브 웹 개발 제대로 시작하기
가운데 마우스 포인트 값 생성할때
mousePos.x = -1 + (e.clientX / window.innerWidth) *2; mousePos.y = 1 - (e.clientY / window.innerHeight) *2; 위에 처럼 가운데 마우스 포인트 값을 0주시기 위해서 위에 식을 주셨는데 설명은 자세히 안해주셨네요 ㅠㅠ -1+, 1- , *2 주신 부분이 이해가 잘 안가서요 그냥 저 식은 많이 쓰는 식이니깐 외우는게 좋나요? 아니면 부가 설명 살짝 부탁드려도 될까요? ^^
- 미해결인터랙티브 웹 개발 제대로 시작하기
window객체
window객체 잘이해가 안되서요 ㅠ window.addEventListener('click', function (e) { 여기서 window자리에 ballElem쓰면 반응을 안하던데 왜 그런걸까요 선생님.... Animation 이벤트에서는 아래처럼 가능했는데 ballElem.addEventListener('click',function () { transition속성이라서 다른건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
안되네요 ㅠㅠ
.ilbuni.zoom { transform: scale(2); border: 2px solid red; } <script type="text/javascript"> (function() { const outputElem = document.querySelector('.output'); const ilbuniElem = document.querySelector('.ilbuni'); let num=0; function showValue() { let posY = ilbuniElem.getBoundingClientRect().top; outputElem.innerHTML = posY; // console.log(window.innerHeight); if (posY<window.innerHeight * 0.2) { ilbuniElem.classList.add('zoom'); } else{ ilbuniElem.classList.remove('zoom'); } } window.addEventListener('scroll', function () { showValue(); }); showValue(); })(); </script> 똑같이 작성했는데 이미지 크기가 변하지 않아요확인해보려고 줌 클래스에 보더값을 추가했는데 보더값은 반응해서 나오더라구요.혹시 삽입된 그림이 크거나 뭔가 호환상에 따라서 안될수도 있는건가요??그리고let num=0; 이값은 영상에서는 설명이 없던데 갑자기 왜 넣으신걸까요? 그리고 이벤트리스너 부분을 아래처럼 변경 해도 똑같이 값이 나오는데 이대로 써도 문제없는건가요?window.addEventListener('scroll', showValue); 설명 부탁드립니다 선생님~
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문 이요~~
프로토타입 안에서 기존body에 appendChild해서 붙여주는걸 body 말고 contains이라는 클래스에 붙이고 싶은데 아래처럼 getElementsByClassName으로 불러오면 에러가 나옵니다. queryselctor로 가능하다는건 아는데 겟 엘리멘츠로도 해보고 싶어서요 도와주세요 선생님~ Card.prototype = { constructor:Card, init:function () { const mainElem=document.createElement('div'); mainElem.style.color= 'red'; mainElem.innerHTML= "bye"; mainElem.classList.add('card'); document.getElementsByClassName('contains').appendChild(mainElem); }
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문 있습니다~
선생님 아래에서 div는 왜 생성해줘야 하나요? 다른 요소를 생성해도 되나요? constructor:Card, init: function () { const mainElem=document.createElement('div');