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

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

jihyuk2291 프로필

일분이의 움직임 jihyuk2291 7일 전
일분이의 다리가 어떤 원리로 엇갈려 움직이는 궁금합니다..강의는'3D 스크롤 19' 진행 중입니다. 다리에 적용되는 animation은 @keyframes ani-running-leg {     from {         transform: rotateX(-30deg);     }     to {         transform: rotateX(30deg);     } } 로 왼쪽 오른쪽에 한번에 적용되고 양쪽 다리의 transform-origin이 동일한데 어떻게 엇갈리게 움직이는건가요?! 

2
신준석 프로필

값이 크게 달라지는 것은 아니지만 궁금해서요! 신준석 12일 전
제가 그대로 따라했는데도 선생님과 return값이 달라서... 그런데 왜그런지 알 수 있을까요? 저는 리턴값이 2라고 뜨는데 선생님은 1이라고 떠서요. 크게 문제는 될거라고 생각하지 않지만 괜히 찝찝해서... 질문드려요!! let timeId; const btn = document.querySelector('.btn') function sample() { console.log('sample!') } timeId = setTimeout(sample, 3000); // 3초뒤에 문구가 뜨게 된다. timeId에 그 결과 값(return)이 저장된다. console.log(timeId); // clearTimeout(timeId); //이건 실행이 안되게 취소시켜버린다. btn.addEventListener('click', function() { clearTimeout(timeId);

1
신준석 프로필

이상황에서 어떻게해야 색깔을 바꿀 수 있을까요? 신준석 12일 전
저번 수업에서 if절을 쓰면서 했던 것처럼 remove하고 하려했는데 생각보다 쉽지 않네요ㅠ 한 번 할 때는 색이 바뀌고 다시 한 번 클릭하면 red로 돌아갔다가 또 클릭했을땐 blue로 바뀌려면 어떤 걸 추가해야할까요? ballElem.addEventListener('transitionend', function() { let Change = false; if(Change == false) { ballElem.classList.add('end'); Change = true; } else if (Change = true) { ballElem.classList.remove('end'); } });

3
신준석 프로필

정확히 ()안에 들어가는 건 어떻게 불러야하나요? 신준석 13일 전
() 이건 또 하나의 변수라고 봐야하는건가요 아니면... 어떤 걸 의미하나요? 밑에 부분을보면... activate라는 기능 괄호안에 들어간 elem과 if절안에 들어간 target.Elem.classList.contains('door-body')라는 이것은...뭐로봐야하나요... 보통 var을 이용할때는 var name === true,false를 썼다가 이런식의 코드를 보니까 헷갈리네요ㅠㅠ function activate(elem) { elem.classList.add('door-opened'); currentItem = elem; } if (targetElem.classList.contains('door-body')) { activate(targetElem.parentNode); }

1
실버타운틀니도둑 프로필

안녕하세요 선생님 실버타운틀니도둑 18일 전
다름이 아니라 강의 잘 듣고 있는데요! 이 질문을 어디에 해야할지 몰라서 여기 남깁니다 ㅠ 혹시 리액트에 관한 강의는 하실 예정이 있는지 궁금해서요 ! 현 강의와 연관없는 질문인점 죄송합니다.

3
art11010 프로필

스크롤바 높이 art11010 19일 전
영상에서 스크롤바의 크기를 뺀다는 것은 화면의 높이만큼을 뺀다고 하셨는데 그 부분이 잘 이해가 안 가서요ㅜ.. 스크롤바 높이 =  window.innerHeight 로 정의가 되어있는 건가요??

1
jihyuk2291 프로필

perspective 적용에 관해 질문 드립니다! jihyuk2291 21일 전
안녕하세요! 프로그래밍을 공부하는 학생입니다.  우연히 perspective: 500px 에 주석처리를 했는데 결과물이 정상작동 하길래 질문 드립니다.(perspective값을 더 줄여 실행 했을때는 카드가 더 극적으로 뒤집혔습니다.) 카드에 perspective가 올바르게 적용되는 perspective 범위가 따로 있나요??! (500px일때는 티가 안났습니다...) 아 perspective가 없는 상태에서 preserve-3d 에 주석처리를 하면 card-back이 보이지 않았습니다.  backface-visibility속성은 살아있는데 이유가 무엇일까요...? 답변 남겨주시면 정말 감사하겠습니다!!!

1
신준석 프로필

마지막에 클릭하면 창이 뜨게 하는 것에서 쓰신 '' 신준석 21일 전
제가 아무리... 비슷한... ''인용구를 찾아도 실행이 안되네요ㅠㅠ ''도해보고 ""도 해보고 도  ´´ 해봤는데 안되네요ㅠㅠ  window.addEventListener('click', () => { const htmlStr = " <button class="menu-btn" data-value="1"> <img src="./images/ilbuni_1.png" alt="" class="icon"> <span class="btn-label">일분이 1</span> </button> <button class="menu-btn" data-value="2"> <img src="./images/ilbuni_2.png" alt="" class="icon"> <span class="btn-label">일분이 2</span> </button> <button class="menu-btn" data-value="3"> <img src="./images/ilbuni_3.png" alt="" class="icon"> <span class="btn-label">일분이 3</span> </button> "; menu.innerHTML = htmlStr; });

5
my_it_story 프로필

reset.css 이나 이미지 파일을 구할 방법이 있을까요 ? my_it_story 22일 전
reset.css 파일이나 이미지 파일을 구할 방법이 있을까요?

2
지니재기 프로필

함수 소괄호는 어떨때 붙이고 어떨때 없는건가요? 지니재기 29일 전
안녕하세요! 작년에 자바스크립트 공부가 어려워서 포기하다가 인터랙티브웹 강의가 있어서 너무너무 재밌게 수강하고 있습니다. 다름이 아니라, function sample(){ console.log('sample!'); } setTimeout(sample, 300);   이 부분에서 sample 함수를 사용한건데 왜 소괄호 () 가 안 붙는지 궁금합니다. 구글링을 했을때 괄호가 붙는건 호출을 하기 위해서고 괄호가 없는건 이 시점에 실행되는게 아니라는데 잘 이해가 되지 않습니다 ㅠㅠ  강의 항상 감사합니다.

2
doriantheblue 프로필

안녕하세요 선생님 질문드립니다. doriantheblue 1달 전
'.door:nth-child(2) .ilbuni' 로 선택하면 2번째 일분이가 선택되는데 '.ilbuni:nth-child(2)'로 하면 선택되지 않는 이유는 무엇인가요?

1
art11010 프로필

대소문자 구분 art11010 1달 전
안녕하세요~! 강의 듣다 의문이 생겨서 질문 남깁니다! 소스 중 if(elem.nodeName == 'BODY'){   elem = null;   return; } 이 부분에서 BODY를 제가 처음에 소문자 body로 했더니 에러가 뜨더라구요  html tag 이름은 소문자 body인데 자바스크립트에서는 대문자로 해야 작동하는 건가욤??

1
mkp0131 프로필

background-position 의 기준점은 어디인가요? mkp0131 1달 전
강의를 보다가 element의 크기 수정에서 자유로워질려면 %로 background-position 으로 잡는게 좋을것같아 해보다가 background-position의 기준점이 도통 이해가 안되어서 질문합니다. 저는 position 속성과 같이 무조건 왼쪽상단이 기준으로 생각하고 작업하였는데 그렇게 작동하지 않더라구요. 어떨때는 왼쪽상단이 기준인것같고, 어떨때는 센터인것같고..... 

1
배가현 프로필

this 와 currentTarget이 원하는대로 동작하지 않습니다! 배가현 1달 전
const wrapElem = document.querySelector(".wrap"); wrapElem.addEventListener("click", e => { console.log(this); }); 이렇게 작성을하고 .wrap (wrap은 width:100vw; height:100vh;)을 클릭하면 .wrap에 대한 요소가 콘솔창에 나타나지 않고 Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 이렇게 나타납니다. e.currentTarget으로 해도 마찬가지입니다. 왜 저는 this가 제대로 동작을 안할까요 ㅠㅠ? * e.target으로 하면 원하는대로 동작 합니다.

1
J Dal 프로필

안녕하세요! J Dal 1달 전
제가 인터렉티브 강의로 js를 처음 접하게 되었는데요. (전엔 라이브러리만 이용할 수 있는 정도였습니다.) 순수 js로 js를 처음 접해서 중간중간 제이쿼리 이야기를 하실때 편하면서도 낯설게 느껴지는데 js를 어느정도 배우고 나서 제이쿼리를 익히나요? 아니면 제이쿼리로 익숙해진 다음 js로 코딩을 공부하나요? 강의 정말 즐겁게 수강하고 있습니다! ㅎㅎ

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스