55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 아래질문과 같은현상이 있었습니다.
저도 같은 현상이 있었습니다! 먼저 애니매이션이 적용되고 기준점이 옮겨졌습니다. .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되어 버리던데... 궁금해서요..^^;;
- 해결됨인터랙티브 웹 개발 제대로 시작하기
z축 스크롤 이벤트 관련해서 몇 가지 질문드립니다.
선생님! 강의를 들으며 작업해보고 있는데요 아직 많이 미흡해서 질의하는 내용 자체가 부족하지만, 나름대로 구글링도 해보고 찾아보다가 잘 모르겠어서 질문 남겨봅니다...! 1. z축 스크롤이 다 진행되면 2-3초 뒤 자동으로 맨 앞 페이지로 돌아가는 코드를 추가하고 싶은 경우에는 자바스크립트에 썼던 코드 중 어느걸 사용해야할까요? 다른 질문글을 보니 setTimeout, scroll to를 쓰는 것 같은데, 강의에서 알려주신 기존 코드에서 어떤 수치를 이용해야하는지 잘 모르겠습니다. 느낌상 아래 코드에 추가되어야할 것 같아 구글링하며 맞아보이는걸 적용해봤는데 오히려 기존에 실행되던 것들까지 오류가 떠버리더라구요. 어떤식으로 접근해야할지 궁금합니다. window.addEventListener('scroll', function () { const scrollPer = pageYOffset / maxScrollValue; const zMove = scrollPer * 3000 - 3000; houseElem.style.transform = 'translateZ(' + zMove + 'vw)'; barElem.style.width = scrollPer * 100 + '%'; }); 2. 강의에서 z축에 차례로 놓이는 wall들을 css파일에서 .wall {position: absolute;}를 통해 포개주었는데, 이 때 wall들의 x,y 값을 바꿔서 화면에서 보이는 상하좌우 위치도 변경해줄 수 있나요? 아니면 wall은 그대로고, 그 안에 있는 텍스트나 넣어줄 이미지들의 위치를 조정해줘야하나요? 3. 이 스크롤 이벤트를 가지고 업그레이드 시켜서 이런저런 기능을 추가해서 연습해볼 수 있으면 좋을 것 같아 질문합니다. z축 스크롤을 하게 되면, 보여지는 이미지가 멀리 있어서 작았다가 스크롤해서 가까워질 수록 커집니다. 이렇게 '스크롤 하는 중간에, z축 스크롤에 영향받지 않는 이미지를 몇 초간 추가한다.' 이런 것도 이론적으로 가능한가요? (예를 들어 '움직이는 house와 별개로 스크롤 수치가 얼마가 되면 이미지가 생겼다 사라진다.' 이런식으로 접근해서 생각하면 될까요?) 어떤게 가능하고 어떤게 불가능한지 아직 정확히 판단할 수 있는 수준이되지 않아서 이 구조 혹은 진행방식(?)을 어떻게 이해하면 되는지 궁금합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
카드를 멈출수도 있을까요?
안녕하세요! 이전 강의에서 animation-fill-mode를 사용해서 뒤집힌 후에 카드를 멈추고 싶은데요. 구글링하다 forwards라는 옵션을 주면 된다고 하는데 .card 클래스에 적용 해도 저는 원래 카드 면으로 돌아옵니다. 혹시 animation-fill-mode 말고 다른 속성 값을 적용해야 할까요? 아니면 제가 잘못 적용 한건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
강의시작!~^^
몰아서 볼려고 flex하고svg 추가로 신청했습니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
setTimeout이 여러번 실행 될 수 있나요?
강의 그대로 했는데, setInterval처럼 정해진 시간마다 다시 반복이 되어서... 스크립트 한번 확인 부탁드려도 될까요? let timeId ; const btn = document.querySelector('.btn') function play (){ console.log('setIimeOut') } timeId = setTimeout( play, 4000); btn.addEventListener('click',function(){ clearTimeout(timeId); })
- 미해결인터랙티브 웹 개발 제대로 시작하기
return의 기능
sample함수에서 n>200이면 값을 리턴시키라고 되어 있는데, 이는 값이 리턴되면 함수가 종료된다는 특성을 이용하신 건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
(function(){ })설정이유
그대로 따라 했는데 작동이 안되고 에러도 안떠서 막막했습니다.. 그래서 초반에 (function(){ })작성한거를 지우고 실행해 보았습니다. 그제서야 멀쩡이 이벤트가 작동되었습니다. (function(){ })이게 어떤 역할을 하는지 알 수 있을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 css의 display: inline-flex관련 질문입니다.
선생님 추석 잘 보내고 계신지요?? 오늘 객체4를 공부하다가 flex관련 궁금증이 생겼습니다. 강의 객체4에서 card instance를 여러개 생성했는데요, instance는 각각 div tag로 생성되는데, 여기서 div가 원래 block요소의 성질을 가지고 있다는 것 까지는 이해를 했습니다. .card 에서 display: inline-flex; 로 설정해 주셨는데 여기서 좀 헷갈리는 게 있습니다. display를 그냥 flex로 해주니까 card instance들이 가로정렬(main-axis?)이 안되고 block level처럼 세로로 죽 나열이 됩니다.이게 갑자기 무엇이랑 헷갈렸냐면 "3개의 문" 강의에서는 container인 .stage에 display: flex만 해줘도 각각의 door item들이 div요소로 이루어 졌음에도가로로 정렬이 되었다는 것이 지금 머릿속에서 명확히 정리가 되지 않습니다.그래서 선생님 이론 강의 flex 도 찾아봤는데 flex와 inline-flex의 차이를 명확히 이해를 못하겠습니다. 선생님께 도움을 구합니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
transform-origin과 transition효과
제가 transform-origin을 설정한 상태에서 transition을 덧붙였는데요. 제 예상은 origin 기준점에서 움직임이 작동하는거 였는데, 실제로는 움직임이 작동 한 후 갑자기 도형이 기준점으로 순간이동으로 하더라고요. origin기준점을 상태로 transition이 반영될 수는 없을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
stage에 width height 값을 vw vh 주셨는데
house에는 width height에 100%를 주면 다른건가요>?
- 미해결인터랙티브 웹 개발 제대로 시작하기
3개의 문에서 질문드려요
3개의 문 현재의 순서값에 클래스가 붙는걸 활용해서 텝 메뉴를 만들고자 합니다. 순서값을 .box에 어떻게 전달해야 할까요? jquery에서는 간단히 this.index()로 알아냈는데 javascript로는 어렵네요. 팁을 알려주시면 감사하겠습니다. <div id="wrap"> <div class="content"> <ul class="menu"> <li ><a href="#" class="btn"> 0menu</a></li> <li><a href="#" class="btn"> 1menu</a></li> <li><a href="#" class="btn"> 2menu</a></li> <li><a href="#" class="btn"> 3menu</a></li> </ul> <ul class="box"> <li class="inner b01 Active">content01</li> <li class="inner b02">content02</li> <li class="inner b03">content03</li> <li class="inner b04">content04</li> </ul> </div> </div> <script> (function(){ const menuList = document.querySelector('.menu'); let currentItem; const content=document.querySelector('.box'); function handler(e){ const targetElem = e.target; // console.log(targetElem); if(currentItem){ currentItem.classList.remove('On'); } if(targetElem.classList.contains('btn')){ targetElem.parentNode.classList.add('On'); currentItem= targetElem.parentNode; } } menuList.addEventListener('click',handler); })() </script>
- 미해결인터랙티브 웹 개발 제대로 시작하기
defer은 사용하면 안되나요
head부분에 <script defer>구문 <script>를 사용하면 안되는 건가요 해봤는데 안되는것 같아서 이해가 안되서요 다른곳에서 봤지만 어떤 분은 js파일을 만들고 head부분에 <script defer src="파일이름.js"></script>이렇게 알려주시는 분이 있어서 질문 합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 질문있습니다!
이번강에서 배운 내용이랑 관련은 없는데 테스트해보다보니까 새로고침을해도 스크롤은 맨처음으로 안돌아오더라구요 이거는 어떻게 해결해야하나요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님이 하신 이미지는 가로 로 이미지가 나열 되어있는데 만약 이미지들이 위아래로 있으면 어떻게 하는게 좋을까요
각각의 이미지의 위치를 퍼센테이지로 적용 해서 이미지를 하나나 지정해줘야 할까요? steps를 사용 할수 없는것 같아서 질문 드립니다.
- 해결됨인터랙티브 웹 개발 제대로 시작하기
화면 rotate질문이요!
rotate할때 mousePos 객체를 생성해서 하셨는데, translateZ에 zMove변수를 넣어준것처럼 rotate에 객체속성을 호출하는게 아니라 변수를 넣어주면 안되는건가요??
- 인터랙티브 웹 개발 제대로 시작하기
선생님 이해가 안가는 부분히 한가지 더생겨서요 ㅠ
삭제된 글입니다
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 여쭤볼때가 없어서요 ㅠㅠ 질문좀드릴게요 ㅠ
(function () { const Form = document.querySelector('form'); let targetElem; let currentItem; function clickHandler(e) { targetElem = e.target; currentItem = targetElem.parentNode.parentNode; const black = document.querySelector('.black') if (targetElem.classList.contains('button1')) { currentItem.classList.add('black') } if (targetElem.classList.contains('button2')) { currentItem.classList.add('gold') } } Form.addEventListener('click', clickHandler) })() 제가 버튼 1 2 클릭한것마다 body에 백그라운드색을 바꾸고 싶은데요; 이벤트 함수는 많이쓰면 안좋다고 하셔서 위임 식으로 target을 써서 하려구 하는데 이렇게 코드를치면 한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를 고쳐야 할까요 ㅠ?