55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
6:15초 let num = 0;
6:15초에서 갑자기 let num = 0; 이라고 그냥 변수 num을 넣어주셨는데 이유가 따로 있을까요? 뒤에 사용되지는 않는 것 같은데 ..!
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문 있습니다... let currentItem
6분 20초에 함수내부에서 const currentItem = document.querySelector(".door-opend")로 currentItem값을 가져올 수 있는건데 왜 그 이후에는 외부에서 let currentItem = document.querySelector(".door-opend")로 따로 지정해주지 않고 let currentItem; 만으로도 어떻게 값이 담기는건가요..? 잘 이해가 안됩니다 ㅜㅜ
- 미해결인터랙티브 웹 개발 제대로 시작하기
svg애니메이션을 스프라이트 이미지로 추출하는 법
안녕하세요 선생님제가 선생님 svg강의도 듣고 있는데svg 코드로 만든 애니메이션을이미지로 추출하려면 어떻게 해야할까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
translateZ 값이 마이너스(-)인 div의 style.left값과 e.clientX값의 매칭
안녕하세요 강사님 좋은 강의 감사드립니다 저는 최종강의까지 수강완료하고 현재 셀프응용과제를 수행하고 있습니다 저의 요구사항은 다음과 같습니다 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 를 사용하면 안되는것인지 문의 드립니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
캐릭터 초기위치 와 이동을 `style.left` 대신 `translateX` 로 해보려는데 어렵네요..
안녕하세요. 좋은강의 감사드립니다. 캐릭터 생성_로딩이 끝나고, 키보드 좌/우 키를 누르면 다음 코드가 실행됩니다.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가 상위에 있다가 원래 크기로 돌아가면 하위로 내려가구요. 좀 사소한 질문 같긴한데 이건 왜그런건지 궁금합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
전진스크롤 3D 8 강의 질문입니다
안녕하세요, 현재 강의를 듣고있는데 변수지정을 안했을때 pageYOffset / (document.body.offsetHeight - innerHeight) * 1000 - 490 만큼 house 에 tranformZ 를 이동시킨다고 강의를 듣고있는데 이 부분이 이해가 안가서 ㅠㅠ 질문드립니다 제가 의문이 든점은 스크롤이 이동하는만큼 transformZ를 이동한다면 pageYOffset - 490만 해도 된다고 생각했는데 막상 식을 적용해보니 이상하더라구요,, 굳이하려면 pageYOffset * 0.1 - 490 로 해야되더라구여 비율을 구해서 하는 이유를 조금 더 설명을 보충해서 듣고 싶어서 이렇게 질문 남깁니다 ㅠ
- 해결됨인터랙티브 웹 개발 제대로 시작하기
강의 중 overflow:hidden;에 관한 질문드립니다.
3개의 문2 강의 8:13에 .door-back 에 overflow: hidden;을 작성하셨는데요. 이미지가 해당 영역 밖으로 나갔을 때, 보이지 않게 하게 하기 위해서였죠. 그런데, 여기서 position: absolute;을 안 주면, 다음과 같은 상황이 발생하는데요. 아마, 제 생각에는 door-back 상위의 영역 ( 부모나 조부모 영역 )으로 넘어가면, overflow: hidden;이 더이상 적용이 안 되서 이런 현상이 발생하는 거 아닌가 하는 추측을 해봅니다. 그런데, 이 상황을 position: absolute;를 넣어주면, 완벽하게 해결이 되네요. 어떻게, absolute가 이 현상을 방지하는지 궁금합니다. 혼자 이해해보려고 했지만, 도저히 모르겠어서 질문드립니다. 감사합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
live server 퍼포먼스 관련 질문좀 드리겠습니다.
1분코딩님 강좌를 보고 흥미가 생겨서 유튜브에서 canvas 강의도 찾아보고 외국의 튜토리얼도 몇개 따라해봤는데요 live server로 크롬에서 구동하는데 객체가 많아지거나 투명도 조절시 프레임이 낮아지면서 제대로 렌더링을 못하더라구요.. 컴퓨터가 안좋은건가? 하고 있었는데, 어느날 네이버웨일과 사파리로 라이브서버를 돌려보니 퍼포먼스의 차이가 심하게 나며 아주 부드럽게 잘 돌아가더라구요. 원래 브라우저마다 퍼포먼스의 차이가 심한가요? 그리고 live server로 내 컴퓨터에서 렌더링해서 보이는것과 다른 컴퓨터에서도 보이는것을 생각해야 할텐데 그런 부분에 대해서는 어떻게 고려하면 좋을지 모르겠어서요.. 가르침 한수 부탁드리겠습니다 ㅠㅠ
- 해결됨인터랙티브 웹 개발 제대로 시작하기
CSS로 이미지를 삽입하는 것과 HTML에서 이미지를 삽입하는 것의 차이점이 무엇인가요??
안녕하세요~ 1분 코딩님 이미지를 삽입할 때, 2가지 방법이 있는데요. "CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식" 이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요?? 예를 들어, 어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ... CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
HTML
비슷한 질문인 것 같긴한데, HTML 구조에서 world를 회전줘도 되는 거 아닌가요? 굳이 stage로 한 번 더 감싼 의도가 궁금합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
div 관련 질문입니다.
world 내부의 stage 없이도 충분히 character를 넣을 수도 있음에도 추가적으로 stage 클래스 div를 설정해준 이유가 이해가 안됩니다. 단순히 .house 태그 옆에 두기 위함이라면 .world 태그 내부에 추가시켜줄 수 있지 않나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
RequestAnimationFrame에 관해 질문있습니다.
재귀 호출을 통해 반복적으로 내부 함수를 호출하는데 콜스택은 안터지나요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
[정보] 23강에서 갑자기(?) 등장한 rafId는 24강에서 나옵니다.^^;
23강에서 갑자기(?) 등장한 rafId는 24강에서 등장합니다.^^; 갑자기 등장해서 앞에서 제가 놓쳤나 싶었는데, 바로 뒤 강의에서 나오더라구요.
- 미해결인터랙티브 웹 개발 제대로 시작하기
앞벽이랑 사이드벽이 떨어져요 ㅠㅠ
어떨때 보면 붙어있는데 또 새로고침하면 어떨때는 떨어져 있네요.. mac에서 크롬으로 봤는데 저래요 ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
우주선 스프라이트 이미지
홈페이지가 개편되었는지 우주선이 보이지 않습니다. (studiomeal.com 드어가면 섬같은게 보여요) 구글에서다른 이미지 구해서 하려는데 쉽지 않네요. 도움 부탁드립니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 완전 초보 질문 하나 드립니다! ㅜㅜ 도와주세요!
(function(){ const parents = document.querySelector('.stage'); function clickEvent(e) { const tar = e.target; const tar2 = tar.parentNode.classList.contains('door-opened'); if(tar2){ // tar2.parentNode.classList.remove('door-opened'); console.log(tar2.target); } if(tar.classList.contains('door-body')){ tar.parentNode.classList.add('door-opened'); } }; parents.addEventListener('click', clickEvent); })(); 이렇게 했을때 마지막 if문은 실행이 되는데요(문 열리는것) 위에 if문은 실행이 안되고 tar2 값을 찾을 수 없다고 나옵니다 ㅠㅠ 문 열리는 if문이 실행되면서 door-opened 클래스가 붙으면 다시 위로 올라가서 위에 if문 실행하면서 tar2값을 찾을 수 있는거 아닌가요? 이해한 줄 알았는데.. 혼자 풀어볼려다 갑자기 머리가 다시 뒤죽박죽이 되버려서요ㅠㅠ 번거로우시겠지만 여쭤볼 곳이 딱히 없어서 죄송함 무릅쓰고 질문올립니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
전진! 3D 스크롤 강의 결과물에서 렉이 너무 많이 걸립니다.
스크롤을 움직이면 캐릭터가 전진하고 벽이 움직이는 과정에서 렉이 너무 많이 걸립니다. 스크린 크기를 작게한 후 캐릭터랑 벽을 움직여보면 렉이 걸리지 않는데, 풀 스크린 모드에서 캐릭터랑 벽을 움직이면 렉이 너무 많이 걸려서 움직이는 동작을 거의 볼 수 없습니다. 현재 구현하는 기능들이 용량을 너무 많이 차지해서 나오는 문제일까요? 개선 방법을 알고 싶습니다. Chrome 99 on macOS (Monterey) 으로 브라우저 모드를 사용하고 있습니다. 브라우저가 오래된 버전이라 발생하는 문제는 아닌것 같습니다.