55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
전진 3d 스크롤에서, 위 아래에도 포갤 때...
안녕하세요? css 자바스크립트 완전 처음 배우고 있습니다. 비전공자라 완전 처음이에요 ㅠㅠ 3d 스크롤 6강까지 듣다가 위 아래에도 한번 포개어 볼까 하는 생각이 들어서 만들어 봤는데요... .wall-top { height: 1000vw; transform: rotateX(90deg) translateZ(500vw); background: red; } .wall-bottom { height: 1000vw; transform: rotateX(90deg) translateZ(450vw); background: black; } 이런식으로 하니까 되긴 되더라구요... 그런데 보이는게 되는 거랑은 별개로 제가 이해를 못했습니다 ㅠㅠ 질문은 두 가지입니다. 위 아래 할 때에 왜 vh를 쓰면 안되는 것인지, 또 translateZ할 때, 왜 위에는 500vw이고 아래는 450vw를 해야 포개어지는지 궁금합니다 ㅠ_ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
변경 값을 다른 페이지로 갔다가 돌아 올때 변경된것을 유지 하고 싶으면 어떻게 해야 할까요?
전체 적으로 보다가 생각이 난건데 라면 소년으로 바꾼후에 다른 페이지 갔다가 돌아 오면 그대로 라면소년이 나오도록 하려면 어떻게 하는게 좋은 방법일까요?? 현재 혼자 만들어 본다고 어두운 버전과 밝은 버전을 만들고 있는데 url이 이동 할때마다 변경된 css 가 풀리고 원래 기초 css 값으로 돌아와서 어떻게 해야 할지 잘 모르겠어요변경된 css를 고정하고 싶어요! 아 css변경은 자바스크립트 이벤트리스너 클릭으로 작성 했습니다. 수업과 다른 질문해서 죄송합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
vh,vw에 관해 질문드립니다.
안녕하세요 vw,vh에 대해 공부하다가 질문드립니다. vw,vh가 헷갈려 아톰에 직접 해봤는데 width, heigh 순서로 vh,vh 하면 정사각형 vw, vh하면 가로가 더 길게 vw, vw하면 세로가 더 길게 나오는게 vh,와vw의 차이점이 무엇인가요? 둘다 viewport width와 viewport height인건 알겠는데 왜 height에 vw나 width에 vh를 사용하는지 잘 모르겠습니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
문 여러번 클릭
안녕하세요 예제를 끝까지하고 실행해보니 잘됐습니다. 근데 한가지의 문을 계속 클릭하니깐 문가 갑자기 커지면서 열리더군요 계속 그러지는 않고 가끔씩 문이 갑자기 커집니다. 이건 에러인가요..?
- 미해결인터랙티브 웹 개발 제대로 시작하기
자바스크립트로 keyframes 속성 제어는 어떻게하나요?
지금 예제는 @keyframes에 to{ translate(200px,200px) } 이렇게 되어있는데 이것을 자바스크립트에서 수정하여 랜덤값으로 이동하도록 해보고 싶은데 keyframes를 어떻게 제어하나요? 아니면 다른 방법이 있는지 궁금해요!
- 미해결인터랙티브 웹 개발 제대로 시작하기
constructor: Card를 삭제해도 동작하는데 삭제해도 되나요?
constructor: Card를 삭제해도 동작하는데 삭제해도 되나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
hover 움직임 자연스럽게...
안녕하세요! CSS 3D에서 배운 카드 뒤집기를 응용하는 중입니다. 위 사진처럼 카드를 일렬로 놓고 마우스가 지나가면 차례로 뒤집히게 만드는게 목표입니다. hover 적용하고 마우스로 카드를 건드릴 때, 마우스가 카드를 너무 빠르게 지나가면 카드가 뒤집히다 맙니다. 그래서 transition의 속도를 더 빠르게 하니, 마우스가 빠르게 지나가도 뒤집히긴 하지만 어딘가 어색합니다! transition의 속도와 상관없이, 그리고 마우스가 빠르게 지나가던 말던, 움직임이 적용되게 하려면 어떤 부분을 더 학습하면 될까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
activate / inactivate 서로 바꿔도 동작이 가능하게 하려면 어떻게 해야할까요?
function doorHandler(e) { const target = e.target; if (target.classList.contains('door-body')) { activate(target.parentNode); } if (currentTarget) { inactivate(currentTarget); } } active / inactive 순서에 따라 실행이 되기도하고 안되기도 하는데요, 순서에 상관없이 작동되게 하려면 어떻게 해야할까요?? ㅠㅠ inactivate 부분을 else if 로 걸어버리면, 문을 열고 닫는건 되는데 1. 빨간문 활성화 -> 2. 초록문 활성화 시, 기존의 빨간문이 닫히질 않아요 ㅜㅜ..
- 미해결인터랙티브 웹 개발 제대로 시작하기
no-repeat
.spaceship{ width: 150px; height: 150px; background: url('sprite_spaceship.png') no-repeat 0 / auto 150px; /* animation: spaceship-ani 1s infinite steps(17); */ } 선생님, 저는 no-repeat을 0,0이 아니라 no-repeat 0 으로 해야 사진이 잘리지 않고 잘 뜹니다. 원인이 뭘까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
수강평으로 자바스크립 어디서 배워야하는지 여쭤봤었는데요..
추천해주시는 강의자료 결제해서 보고있는데.. CSS 3d 편에서.. 펜으로 사람 그리신거보았는데요.. 혹시 그림도 배우셨어요? 대충 그리는데도 엄청 잘그리신다.. 도대체 못하는게 무엇인가요?....
- 미해결인터랙티브 웹 개발 제대로 시작하기
새로고침 했을 때 의도치 않은 애니메이션 효과
안녕하세요. 코드를 고치고 화면을 새로고침했을 때, hover 했을 때에만 움직여야 할 사각형들이 기본적으로 조금 부웅.. 움직이더라고요. 이것저것 고쳐봐도 그러던데 왜 그런 건가요? 아래는 현재 css 코드입니다. .box-container {display: flex;} .box { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.7); border: 2px solid black; transition: 3s cubic-bezier(0, 1.3, 1, 1.17); transition-property:width height background-color; } .box:hover { transform: scale(1.5); background-color: green; }
- 미해결인터랙티브 웹 개발 제대로 시작하기
new Character(); 생성자를 넣으면 오류가 뜨는 문제가 있습니다 ㅠㅠ
안녕하세요. 일분이 캐릭터 넣을때 new Character(); 생성자를 넣으면 오류가 떠서 이름은 다르게 한부분 없는지 강의랑 같게 하려 노력했는데 못찾겠어서 혹시 어떤 문제인지 알려주실수 있으실까요?
- 해결됨인터랙티브 웹 개발 제대로 시작하기
wall3d.js에서 마우스위치 x,y 값이 안잡히는데 이유를 알수 있을까요? {x: NaN, y: NaN}
(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(){ const scrollPer = pageYOffset / maxScrollValue; const zMove = scrollPer * 980 - 490; houseElem.style.transform = `translateZ(${zMove}vw)`; barElem.style.width = scrollPer * 100 + '%'; }); window.addEventListener('mousemove', function(e){ mousePos.x = -1 + (e.ClientX / window.innerWidth) * 2; mousePos.y = 1 - (e.ClientY / window.innerHeight) * 2; console.log(mousePos); }); window.addEventListener('resize', resizeHandler); resizeHandler(); })();
- 해결됨인터랙티브 웹 개발 제대로 시작하기
zMove에 1000이나 950곱하는것
안녕하세요 선생님 궁금한게 생겨서 질문드려요! const zMove=pageYOffset/maxScrollValue*1000-490; houseElem.style.transform='translateZ('+zMove+'vw)'; 여기에서 zMove에 1000을 곱할때 pageYOffset/maxScrollValue가 너무 작아서라고 이해했는데 다시듣다보니 의문이 생겨서요 .wall-left, .wall-right의 width가 1000vw인것과 관련있는건가요? 스크롤이 끝까지 가지않게 950을 곱해주시는걸 보고 든 생각인데 이게 맞는건지 궁금해요
- 해결됨인터랙티브 웹 개발 제대로 시작하기
같은 코드를 따로 js파일을 빼서쓰면 에러가뜨는데 구글에 쳐봐도 왜그런지 모르게씁니다 ㅠㅠ
같은 코드를 따로 js파일을 빼서쓰면 에러가뜨는데 구글에 쳐봐도 왜그런지 모르게씁니다 ㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
left: -400vw
translateZ 대신에 .wall-left 에 left:-500vw; 를 하고 .wall-right 에 -400vw; 를 해봣더니, 결과가 같은거 같은데, 이렇케 해도 되나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 아래질문과 같은현상이 있었습니다.
저도 같은 현상이 있었습니다! 먼저 애니매이션이 적용되고 기준점이 옮겨졌습니다. .box { width: 100px; height: 100px; border: 2px solid black; background: rgba(255, 255, 0, 0.7); transition: 1s; } .box:hover{ transform-origin: left top; transform: scale(2) rotate(15deg);
- 미해결인터랙티브 웹 개발 제대로 시작하기
스크린 필기하실 때 사용하시는 타블렛 장비 모델명 알 수 있을까요?
문득 궁금증이 들었는데요. desk scribble 앱 쓰실 때 와콤 같은 펜 타블렛 사용하시는 건가요? 모델명을 알고 싶습니다! 질 좋은 강의 항상 감사드립니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
preserve-3d 설정
3d 효과를 주고자 하는 영역의 최상위 element에 perspective를 설정하고, 하위 여러 중첩된 자식 element들에 3d 효과가 잘 영향을 미치게 하기 위해서 transform-style: preserve-3d 설정을 중간 element에 한다는 개념으로 강의를 들었어요..^^ 아래와 같은 상황일때, <a>에 perspective를 적용하고, b,c,d,e 모두 3d 효과를 사용한다고 하면, b,c,d 모두에 preserve-3d 설정을 넣는것이 가장 옳은(?) 상황 일까요...? <a> <b> <c> <d> <e> </e> </d> </c> </b> </a>
- 해결됨인터랙티브 웹 개발 제대로 시작하기
reset.css 문의..
안녕하세요~ 혹시 reset.css는 어떤 버전(?)으로 사용중이신가요? 구글링 해서 나오는 reset.css v2.0 버전을 사용하다보니깐, h1 tag도 reset되어 버리던데... 궁금해서요..^^;;