55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
스크린 필기하실 때 사용하시는 타블렛 장비 모델명 알 수 있을까요?
문득 궁금증이 들었는데요. 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을 써서 하려구 하는데 이렇게 코드를치면 한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를 고쳐야 할까요 ㅠ?
- 미해결인터랙티브 웹 개발 제대로 시작하기
문열고닫히고 질문..
코드를 보면 clickHandler에서 1. currentItem에 값이 들어있을 경우 inactivate 함수를 실행 2. targeElement가 door-body인 경우 activate함수를 실행 1 -> 2 번 순으로 실행해서 다른문이 열리기 전에 열려있던 문이닫히고는 알겠습니다. 그런데 같은문을 클릭했을경우 닫히고 끝인데요 코드만보면 2번도 실행되서 다시 열려야되는거 아닌가요? 그리고 while문으로 특정한 element만 클릭되게 만들시 while문으로 targetElem을 정의하고 2번 코드에서 조건문만 없애고 함수실행해서 인자로 정으된 targetElem만넣어주면 동일한 코드인지 알고싶습니다~