55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 while 하고 if 문에 parentNode를주면
다르게 적용 되나요? while문은 바디 이상까지 계속 찾아서 올라가고 if는 바로 한단계만 올라가고 멈추나요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
코드 작성 순서에 대해 질문 있습니다.
좋은 강의 감사드립니다! 코드를 작성하실 때 보면, 1. 변수 선언 2. clickHandler(e) 함수 작성 3. (클릭)이벤트 관련 처리 이런 순서로 작성을 하시던데요.. 강의의 흐름대로라면 1번 -> 3번 -> 2번이 자연스러운데 혹시 특별한 이유가 있는건가요? 뭐.. 선수들끼리 약속이다... 이런...
- 해결됨인터랙티브 웹 개발 제대로 시작하기
선생님 3개의 문2 10:50 질문입니다(perspective)
perspective(800deg)값을 줄때.door:hover .door-body{ transform:perspective(800deg) rotateY(100deg); } 를 적용했는데perspective value를 .door-body 에다 적용해 보니까 view가 다르게 보이긴 하더라구요.제가 혼자 구현을 한다고 생각해보니 어디다 적용할 지 헤맬것이 분명합니다 왜 perspective value를 .door:hover .door-body에 적용을 하셨는지 조금만 더 설명해주셨으면 좋겠습니다 어느 정도 이해는 가는데 정확히 모르겠습니다
- 해결됨인터랙티브 웹 개발 제대로 시작하기
1분이가 계속 한자리에만 생기는데요. info.xPos가 일분이에게 안들어가는거 같아요. 놓친부분이 있는거겠죠?
(function(){//즉시 실행 함수 const stageElem = document.querySelector('.stage'); const houseElem = document.querySelector('.house'); const barElem = document.querySelector('.progress-bar'); const mousePos = {x:0,y:0}; let maxScrollValue; function resizeHandler(){ maxScrollValue = document.body.offsetHeight - window.innerHeight; } window.addEventListener('scroll',function(){ // pageYoffset 스크롤 한 값 // console.log(this.pageYOffset); // 스크롤 범위 지정하기 // console.log( pageYOffset/maxScrollValue); const scrollPer = pageYOffset/maxScrollValue const zMove =scrollPer*970 -490; houseElem.style.transform = 'translateZ('+zMove+'vw)'; // progress bar barElem.style.width = scrollPer *100 + '%'; }) window.addEventListener('mousemove',function(e){ // console.log(e.clientX,e.clientY) 마우스 위치 알아내기 mousePos.x = -1+(e.clientX /window.innerWidth)*2; mousePos.y = 1-(e.clientY /window.innerHeight)*2; stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.y*5)+'deg)'; // console.log(mousePos); }) window.addEventListener('resize',resizeHandler) resizeHandler(); stageElem.addEventListener('click',function(e){ // console.log(e.clientX/window.innerWidth*100) new Character({//객체의 속성으로 넣어야 함. 다른 것들도 추가해야 하기때문에 xPos :e.clientX/window.innerWidth*100 }); }) })() function Character(info) { this.mainElem = document.createElement('div'); this.mainElem.classList.add('charactor'); this.mainElem.innerHTML = '' + ' <div class="character" >' + ' <div class="character-face-con character-head">' + '<div class="character-face character-head-face face-front"></div>' + '<div class="character-face character-head-face face-back"></div>' + '</div>' + ' <div class="character-face-con character-torso">' + '<div class="character-face character-torso-face face-front"></div>' + '<div class="character-face character-torso-face face-back"></div>' + ' </div>' + '<div class="character-face-con character-arm character-arm-right">' + ' <div class="character-face character-arm-face face-front"></div>' + ' <div class="character-face character-arm-face face-back"></div>' + '</div>' + ' <div class="character-face-con character-arm character-arm-left">' + '<div class="character-face character-arm-face face-front"></div>' + '<div class="character-face character-arm-face face-back"></div>' + '</div>' + ' <div class="character-face-con character-leg character-leg-right">' + '<div class="character-face character-leg-face face-front"></div>' + '<div class="character-face character-leg-face face-back"></div>' + '</div>' + ' <div class="character-face-con character-leg character-leg-left">' + '<div class="character-face character-leg-face face-front"></div>' + '<div class="character-face character-leg-face face-back"></div>' + '</div>' + '</div>'; document.querySelector('.stage').appendChild(this.mainElem); this.mainElem.style.left= info.xPos+'%'; }
- 인터랙티브 웹 개발 제대로 시작하기
선생님 혹시 이렇게 코드 짜도 다음에 문제되진 않을까요?
삭제된 글입니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 클래스 선언할때 한칸띄울때하고 안띄울때는 무슨차이인가요?
개념을 잘모르겟습니다. ㅠ .door-opened .ilbuni .door-opened.ilbuni 이차이가 어떡해 되나요 ㅠ css를 막배우다보니 개념을 잘 모르겟네요 ㅠ
- 해결됨인터랙티브 웹 개발 제대로 시작하기
top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.
(function(){//즉시 실행 함수 const stageElem = document.querySelector('.stage'); const houseElem = document.querySelector('.house'); const barElem = document.querySelector('.progress-bar'); const mousePos = {x:0,y:0}; let maxScrollValue; function resizeHandler(){ maxScrollValue = document.body.offsetHeight - window.innerHeight; } window.addEventListener('scroll',function(){ // pageYoffset 스크롤 한 값 // console.log(this.pageYOffset); // 스크롤 범위 지정하기 // console.log( pageYOffset/maxScrollValue); const scrollPer = pageYOffset/maxScrollValue const zMove =scrollPer*970 -490; houseElem.style.transform = 'translateZ('+zMove+'vw)'; // progress bar barElem.style.width = scrollPer *100 + '%'; }) window.addEventListener('mousemove',function(e){ // console.log(e.clientX,e.clientY) 마우스 위치 알아내기 mousePos.x = -1+(e.clientX /window.innerWidth)*2; mousePos.y = 1-(e.clientY /window.innerHeight)*2; stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.y*5)+'deg)'; console.log(mousePos); }) window.addEventListener('resize',resizeHandler) resizeHandler(); })()
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 질문잇습니다.
classList.add 는 클래스를 추가해주는거 아닌가요? html에 character가 잇는데도 추가해주는건가요? html에잇는 character은 지우고 classList로 추가하면 되는건가요 ㅠ? 아그리고 여기서 추가한 createElement는 붙여 놓은 부모에 알아서 들어가는건가요? ㅜ 18 이후부터는 한계가 오기 시작하네요 ㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문이 있어요! ㅜ
translateZ축을 -로주면 왼쪽으로보내고 양수주면 오른쪽으로 보내는건 알겟는데요! 그 Z축 자체가 왼쪽오른쪽이 원래 적용 되는건가요? 아니면 부모에 Z축을 줘서 왼쪽오른쪽으로 갈리는 건지요ㅠㅠ Z축자체는 3d효과가 아니었나요 ㅠ? 아니면 rotateY축을 줘서 그렇게 보이는걸까요 ㅠ? 너무 자주물어봐서 죄송합니다. ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
혹시 왜 이벤트함수에 안에 currentItem을 안주고 밖에 줫는지 알수잇을까요 ㅠ
이벤트 함수안에 넣으면 안먹고 바깥에 놓으면 실행 되더라구요; 지역변수도 안에서는 적용 되지않나요;; 이해가 안되서요 ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
혹시 pageYOffset으로 비율 설정햇는데 1이 넘어가는데;;
1이 넘어갈수도 잇는건가요?? 저는 정확히 안떨어져서요 ㅠ 아.. 개발자도구를 완전히 꺼내서 사용하니까 1이되네요 ㅠㅠ 개발자 도구 넓이값때매 1로 안떨어졌엇나바여;
- 미해결인터랙티브 웹 개발 제대로 시작하기
스크롤 관련해서 질문 드립니다.
안녕하세요 스크롤에 대해서 질문이 있어서 올리게 되었습니다. 제가 이해한 바를 이미지로 올렸습니다. 저는 검은색 글씨로 적힌 공간이 최종적으로 스크롤한 공간이라고 이해했습니다. 강의에서 최종적으로 구한 값은 보라색 글씨로 적인 document.body.offsetHeight - window,innerHeight입니다. 이미지에서처럼 조금 차이가 있는데, 제가 어떤 부분을 잘못 이해하고 있는걸까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 궁금한게 있어서 여쭤봅니다~
키보드로 앞뒤로 움직일때 character에 running 클래스가 안들어가서 팔,다리가 안움직일때가 있던데 혹시 이거 잡으려면 어떻게 해야할까요??ㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문잇습니다. ㅠ
parentNode나 nodeName 사용 여부 뜻을 잘모르겟습니다. ㅠ 어떤의미 인가요.. ㅜ
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문잇는데요!
혹시 rem이 부모요소라고 봐도되는건가요? em은 rem기준으로 곱하기 되는거 맞나요??
- 해결됨인터랙티브 웹 개발 제대로 시작하기
선생님 position 관련 질문입니다.
선생님 움직이는 이벤트예제입니다. .ilbuni에서 background-position: 50% 50%;와 .ilbuni .a에서 left: 5%; bottom: 5%;의 position 속성이 경합되는 것 아닌가요?? background-position: 50% 50%가 무슨 역할을 하는지 이해를 못하겠습니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
선생님 css background에 대한 질문입니다.
선생님 움직이는 이벤트 예제에서요 image를 삽입할때 img src tag를 사용하지 않고 css에서 background-image: url(); 을 사용하는 걸까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
아 한가지 더궁금한게 잇습니다.
만약 한줄이 아니고 두줄짜리는 포지션이나 위치를 어떠캐 줘야 적용이 될까요 ㅠ;
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문잇습니다.
5100px 말하시는건 두배로 해야기 때문인거 맞지요? 백그라운드 넓이값하고 높이값은 url로 지정해서 150px에 2550px이 된거 맞나요? 그리고 ㅠㅠ 좀 길지만.. -로 준이유는 생각해 봣는데 양수로 주면 시작과 끝만 보이더라구요; 이미지 순환시키는 것 때문인게 맞을까요; 제가 이해한게 맞나 싶어서요 ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
독학으로 공부해보고 싶어서 오늘 등록했는데요!
어떤식으로 공부를 하는게 좋을지 궁금해서 질문드립니다.. 인터넷 강의는 처음이라 한번 눈으로 쭉보고 그다음에 따라하는게 좋을지;; 아니면 첨부터 같이 코딩하면서 따라하는게 좋을지 고민되요 ㅠㅠ; 제가 프로그램은 처음이라 어떤식으로 공부해야할지 그게 제일 고민이 되네요;; 열심히 하다보면 잘할수 있겠죠? ㅠㅠ 이 강의를 끝내고 다음 강의도 있던데 그것도 들어볼려구요! 아무튼 스타트 합니다.!