인터랙티브 웹 개발 제대로 시작하기 대시보드

스크롤을 내릴 때는 forward 방향으로 캐릭터가 앞방향으로 보고 앞으로 가는데 스크롤을 다시 올리면 forward 방향으로 계속 유지가 된 상태로 움직입니다.ㅠㅜ 왜 그런 걸까요?

안녕하세요 선생님강의를 듣고 하나씩 따라해보고 있었는데요3개의 문 3파트에서 if 문을 넣는 부분을 그대로 따라서 적었는데 if 문이 해석이 안되서.. 질문 드립니다. 이렇게 적었는데 if 문 안에 넣었을 때는 작동이 안되고targetElem.parentNode.classList.add('door-opened');부분을 if 문 밖으로 빼면 작동이 되는 이유가 무엇일까요.. 정말 너무 궁금합니다.제발 알려주세요. ㅠㅠ

전진!3D 스크롤 13에서.character 의 width: (10vw) 와 height: (15.58vw) 가 어떻게 나온건지 이해가 잘 가지 않습니다.화면에서 보니 포토샵 기준 이미지 사이즈가 가로 860px로 보이는거 같은데 가로 vw로 계산해준건가요 ?? 높이 역시 비율 계산 방법이 따로 있는건지 궁금합니다.

6:15초에서 갑자기 let num = 0; 이라고 그냥 변수 num을 넣어주셨는데 이유가 따로 있을까요? 뒤에 사용되지는 않는 것 같은데 ..!

6분 20초에 함수내부에서 const currentItem = document.querySelector(".door-opend")로 currentItem값을 가져올 수 있는건데 왜 그 이후에는 외부에서 let currentItem = document.querySelector(".door-opend")로 따로 지정해주지 않고 let currentItem; 만으로도 어떻게 값이 담기는건가요..? 잘 이해가 안됩니다 ㅜㅜ

안녕하세요 선생님제가 선생님 svg강의도 듣고 있는데svg 코드로 만든 애니메이션을이미지로 추출하려면 어떻게 해야할까요??

안녕하세요 강사님   좋은 강의 감사드립니다 저는 최종강의까지 수강완료하고 현재 셀프응용과제를 수행하고 있습니다   저의 요구사항은 다음과 같습니다 1) 페이지 refresh시 일부니가 translateZ(-100vw)지점에 자동 생성 2) click- eventlistner로부터 e.clientX값을 가져와서 해당위치로(마우스 클릭지점) 일부니를 이동 3)이동시 애니메이션 적용 4)일부니를 고양이로 교체     1,3,4는 이미 완료하였거나 어려운 점이 없을것 같은데, 2번에서 막혀있는 상태입니다. translateZ(-100vw)가 적용된 일부니의 left값이 0일때의 e.clientX값이 약100정도로 가로값이 일치하지 않기때문입니다. (ex> style.left: 0%, e.clientx:100)   좌우이동뿐만 아니라 상하 이동도 가능하게 하려는데, 참고할만한 자료나 조언 있으시면 부탁드립니다. 감사합니다.    

안녕하세요. 너무 재밌게 수업을 듣고 있는 수강생 입니다. 가르쳐주시는 내용으로 여러 브라우저에서 테스트 해보고 있는데요. rgba(255, 255,0, 0.7) 인 노란색 background 를 설정하였으나 삼성인터넷브라우저(갤럭시폴드3) 에서는 검은색 화면으로 나오고 있네요. rgba 를 사용하면 안되는것인지 문의 드립니다

안녕하세요. 좋은강의 감사드립니다. 캐릭터 생성_로딩이 끝나고, 키보드 좌/우 키를 누르면 다음 코드가 실행됩니다.elem.style.transform = 'translateX( ? )'랜더링 퍼포먼스를 위해 left -> translate 로 바꾸려는데요.이때 캐릭터의 기본 rotateY 값이 취소된 것을 확인할 수 있습니다.  CSS 설정값 우선순위 때문에 새 값으로 덮어 씐것으로 보이구요,그래서 미리 CSS 에 정의해둔 translateX Y Z 와 같은 기존의 `style.transfrom` 값 들을 저장해두기 위해 DOM 내장객체 new DOMMatrix( elem.style.transform ) 을 통해 이전 transform 값을 저장해두었는데요. 이전 matrix 를 translate 가 적용된 새 matrix 로 교체하려는데 이렇게 적용하려니, 문제 해결범위가 너무 커지더라구요..Matrix 를 이전값 에다 새 값을 적용해야되는데 4x4 행렬연산이 필요해보이고, 저의 해결가능한 범위를 넘어서버리네요..ㅠㅠ 질문입니다. 초기에 설정된 CSS transform 값. 또는 직전 transform 값이 중첩적용되도록 하려는 문제를 어떻게 접근해야 할까요? 이부분에 대해 조언을 구합니다. ps. 지금 구현중인 방식은 예제와 비슷하게 left 로 초기위치만 지정하고,translateX 로 좌/우 이동을 구현하고있습니다. 위에 설명한 `transform 함수치환, 중접설정 값 미적용` 문제로좌 / 우 이동은 되지만, 캐릭터가 회전을 못하고있어요..  설정값들이 중복되는건 원치않아서... CSS 값 JS 값 이 합쳐지는 설정을 유지하려 하다보니 문제가 좀 복잡해졌어요.이런 맥락에서의 해결방법이 있을까요? 읽어주셔서 감사합니다.

안녕하세요, 선생님. 강의 정말 잘 듣고 있습니다. 좋은 강의 감사합니다.  다름이 아니라 수업 때 배운 내용을 적용해 세로로 빌딩같은 화면을 만들었는데 모바일에서 보면 제가 보이게 한 부분보다 넓은 부분이 보인달까요?ㅠㅠ 그래서 이런 경우는 이유가 뭔지 아니면 혹시 제가 뭘 따로 공부해야 할 지 조언해주시면 감사하겠습니다. 제가 만든 화면의 주소입니다. http://52.78.25.55/02.html 혹시 문제시 삭제하겠습니다! 감사합니다.

트랜지션을 적용하고 스케일이 적용되는걸 보면서 놀고 있었는데, 보니까 항상 오른편에 있는 박스가 z축으로 상위에 있는 것 같아요. 예를 들어 a에 2배가 적용된 뒤에 b에 마우스를 대면 바로 b의 박스가 a보다 위로 올라와요. 반대로 b에서 a로 넘어갈떄도 b가 상위에 있다가 원래 크기로 돌아가면 하위로 내려가구요. 좀 사소한 질문 같긴한데 이건 왜그런건지 궁금합니다.

안녕하세요,   현재 강의를 듣고있는데   변수지정을 안했을때 pageYOffset / (document.body.offsetHeight - innerHeight) * 1000 - 490 만큼 house 에 tranformZ 를 이동시킨다고 강의를 듣고있는데 이 부분이 이해가 안가서 ㅠㅠ 질문드립니다   제가 의문이 든점은 스크롤이 이동하는만큼 transformZ를 이동한다면 pageYOffset - 490만 해도 된다고 생각했는데 막상 식을 적용해보니 이상하더라구요,, 굳이하려면 pageYOffset * 0.1 - 490 로 해야되더라구여   비율을 구해서 하는 이유를 조금 더 설명을 보충해서 듣고 싶어서 이렇게 질문 남깁니다 ㅠ            

3개의 문2 강의 8:13에 .door-back 에 overflow: hidden;을 작성하셨는데요. 이미지가 해당 영역 밖으로 나갔을 때, 보이지 않게 하게 하기 위해서였죠.   그런데,  여기서 position: absolute;을 안 주면, 다음과 같은 상황이 발생하는데요.      아마, 제 생각에는 door-back 상위의 영역 ( 부모나 조부모 영역 )으로 넘어가면, overflow: hidden;이 더이상 적용이 안 되서 이런 현상이 발생하는 거 아닌가 하는 추측을 해봅니다.   그런데, 이 상황을 position: absolute;를 넣어주면, 완벽하게 해결이 되네요. 어떻게, absolute가 이 현상을 방지하는지 궁금합니다. 혼자 이해해보려고 했지만, 도저히 모르겠어서 질문드립니다. 감사합니다. 

1분코딩님 강좌를 보고 흥미가 생겨서 유튜브에서 canvas 강의도 찾아보고 외국의 튜토리얼도 몇개 따라해봤는데요   live server로 크롬에서 구동하는데 객체가 많아지거나 투명도 조절시 프레임이 낮아지면서 제대로 렌더링을 못하더라구요..   컴퓨터가 안좋은건가? 하고 있었는데, 어느날 네이버웨일과 사파리로 라이브서버를 돌려보니 퍼포먼스의 차이가 심하게 나며 아주 부드럽게 잘 돌아가더라구요.   원래 브라우저마다 퍼포먼스의 차이가 심한가요?   그리고 live server로 내 컴퓨터에서 렌더링해서 보이는것과 다른 컴퓨터에서도 보이는것을 생각해야 할텐데 그런 부분에 대해서는 어떻게 고려하면 좋을지 모르겠어서요.. 가르침 한수 부탁드리겠습니다 ㅠㅠ

안녕하세요~ 1분 코딩님 이미지를 삽입할 때, 2가지 방법이 있는데요. "CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식" 이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요?? 예를 들어, 어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ...   CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.  

비슷한 질문인 것 같긴한데, HTML 구조에서 world를 회전줘도 되는 거 아닌가요? 굳이 stage로 한 번 더 감싼 의도가 궁금합니다.

world 내부의 stage 없이도 충분히 character를 넣을 수도 있음에도 추가적으로 stage 클래스 div를 설정해준 이유가 이해가 안됩니다. 단순히 .house 태그 옆에 두기 위함이라면 .world 태그 내부에 추가시켜줄 수 있지 않나요?

재귀 호출을 통해 반복적으로 내부 함수를 호출하는데 콜스택은 안터지나요??

23강에서 갑자기(?) 등장한 rafId는 24강에서 등장합니다.^^; 갑자기 등장해서 앞에서 제가 놓쳤나 싶었는데, 바로 뒤 강의에서 나오더라구요.

어떨때 보면 붙어있는데 또 새로고침하면 어떨때는 떨어져 있네요.. mac에서 크롬으로 봤는데 저래요 ㅠ