Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
인터랙티브 웹 개발 제대로 시작하기
(5.0)
120개의 수강평 ∙ 1514명의 수강생

55,000원

지식공유자 : 1분코딩
총 64개 수업˙총 10시간 48분
평생 무제한 수강
수료증 발급 강의
초급 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 1435 공유
engeul 프로필

github에 강의 보면서 만든 소스 코드 등을 올려도 괜찮나요? engeul 8시간 전
강의를 보고 따라하면서 만든 코드들을 공부의 흔적으로 깃허브에 남기고 싶은데 혹시 소스 코드랑 수업 자료( ex) Animation3 부분에서 사용하는 우주선 사진)를 함께 올려도 괜찮을까요?

0
정지운 프로필

이 강의를 초보자가 들어도 괜찮을까요? 정지운 1일 전
안녕하세요 선생님. 현재 자바스크립트를 입문해 기초문법을 어느정도 습득한 상태입니다(변수, 연산, 함수, 반복문, 제어문, 객체, 배열) html은 태그의 의미를 이해하는 수준이며(모르면 구글링..) css는 기본적인 문법만 아는상태입니다.(무언가 만들어본적은 아직 없습니다) 이런 상태에서 이 수업을 들어도 괜찮을까요? 아니면 사전에 다른 공부를 준비를해야할까요?

1
js be 프로필

overflow:hidden js be 2일 전
좋은 강의 항상 감사합니다. 역시 실전이 지루하지 않게 빨리 느는 방법인 것 같아요!!! 다름이 아니라, 제가 혼자 예제를 작성해보는 과정 중에  나머지 부분은 다 동일한 방법으로 했는데 "overflow:hidden;"을 door-back클래스가 아닌 "door"클래스에 줬습니다. 그때 왜 door-body의 입체감이 사라지는 알고 싶습니다.  필요없는 질문일 수도 있지만 배울게 있나해서 질문 드립니다! 감사합니다.

2
js be 프로필

background-image js be 2일 전
선생님 강의 감사합니다.  일분이 이미지를 넣어줄 때 background를 쓰면 안 되는데 background-image를 쓰면 되는 이유가 뭔가요?  background-image는 background의 하위속성(?)이여서 background만 써도 먹히는 거 아닌가요?  html,css 시작한지 한달밖에 안되어서 아직 많이 헷갈리네요  열심히 하겠습니다 감사합니다

2
dannychh 프로필

전역변수에 관해 질문드립니다 dannychh 7일 전
전역변수 사용을 피하기 위해서는 코드를 (function() {})(); 로 감싸야 한다고 하셨는데 그냥 블럭{}으로 코드를 감싸도 비슷하게 실행이 되는 것 같아서 두 방법 사이에 큰 차이가 있는지 궁금합니다. 만약 둘 중에 하나를 추천하신다면 어떤 방법이 더 좋은지 그리고 그 이유가 무엇인지 알려주시면 감사하겠습니다.

2
이도현 프로필

객체리터럴이 정확히 무엇인가요? 이도현 8일 전
프로토타입도 객체이기 때문에 중괄호 안에 다시 셋팅 할 수 있다고 알려주셨는데, 새로운 객체를 다시 만드는 방식을 객체리터럴 형태라고 하는 건가요?

1
이장민 프로필

position: relative 질문드립니다. 이장민 12일 전
좋은 강의 감사합니다. 일단 card-side  클래스는 서로 같은 위치에 겹쳐져야하기 때문에 position: absolute를 사용해야하는 건 이해했습니다. 그런데 card 클래스는 왜 relative를 사용해야하는지 이유가 궁금합니다. 

1
AirDream 프로필

유튜브 자바스크립트 파트3 강의 질문 여기다가 해도 되나요?ㅎㅎ AirDream 15일 전
dom script 유튜브 먼저 보고 수강하고 이벤트도 유튜브 먼저 보고 수강하려고 하는데 유튜브 내용에서 질문이 있어서요! 1:52 쯤 방법 3번째에서 전역변수를 만드셨었는데, var currentMenu; 이렇게 선언하셨는데 요즘은 const를 많이 쓰잖아요. 근데 const는 var과 다르게 정의 ? =으로 값을 넣어주어야만 선언할 수 있는데 const를 넣을 경우 코드 변경을 어떻게 해야할까요? ^^ 계쏙 반복 반복 보고있어요~ 인터렉스웹 강의 보기전에 이걸루 반복 학습중이에요~ 또 한가지 질문인데요. const currentMenu; // 현재 활성화된 메뉴를 담을 변수(저장 공간) const menuLinks = document.querySelectorAll('.menu-link'); function clickMenuHandler( ) { if (currentMenu) { currentMenu.classList.remove('menu-active'); this.classList.add('menu-active'); currentMenu = this;  } for (const i = 0; i < menuLinks.length; i++) { menuLinks[i].addEventListener('click', clickMenuHandler); }  왜 menu-active에는 그냥 넣어주나요? currentMenu.classList.remove('menu-active'); this.classList.add('menu-active'); 위에 클래스는 .으로 들어가 있는데

1
원아영 프로필

run과 관련되어 추가 질문있습니다. 원아영 18일 전
해당 강의 다른 질문자 님께서 아래와 같이 질문주셨는데요. ------------------- 3D스크롤예제  23강의에서, requestAnimationFrame을 사용하기위해,  init 메서드 형제 위치에 run 메서드를 추가해주셨는데요, init: function () { ~~~ }, run: function () { ~~~ } }; 왜  init메서드안에 run메서드 내용을 포함 하지 않으신걸까용ㅠㅠ? 특별한 이유가 있는건지 궁금합니다! ---------------- 답변으로 선생님께서 ------------------- init은 초기화할 때 한번만 실행하는 용도의 함수이고, run은 requestAnimationFrame으로 계~~속 실행해주어야 하는 함수이기 때문이에요. init으로 다 합쳐버리면, 초당 거의 60번씩 초기화까지 계속 반복하기 때문에, 엄청난 연산 낭비가 일어나겠지요~^^ ------------------------------------- 위와 같이 답변해주셨는데요. 여기서 init은 초기화할 때 한번만 실행하는 용도라는게 인스턴스를 만들때 init에 들어있는 함수들을 인스턴스에 초기 설정으로 넣어준다는 뜻인가요? 그렇다면 run 메서드도 인스턴스에 들어가는 것이라고 생각해서 init에 포함되도 된다고 생각하는데 아닌가요? 초기화의 정확한 뜻이 뭔지 궁금합니다.... init에 들어있는 함수도 계속 사용해야하는 함수 아닌가요 ㅠㅠ? 아니면 그저 한번 이벤트가 발생할때 한번만 실행되는 이벤트(예를 들어 마우스 클릭해주면 좌로 한칸 이동)과 같은 함수는 init에 넣고, 이벤트가 한번 발생할때 계속 반복적으로 실행되는 메서드는 init과 따로 구분해서 넣는게 연산에 이롭다는 말씀일까요? 영상 여러번 봐서 추측이 난무합니다 ㅠㅠ.... 답변부탁드릴게요

3
박나희 프로필

invaild property value 오류 박나희 18일 전
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Interactive Web</title> <style> body{ background: #222; } @keyframes spaceship-ani{ to { background-position: -2550px 0; } } .spaceship { width: 150px; height: 150px; background: url('images/sprite_spaceship.png') no-repeat 0 0 / cover; animation: spaceship-ani 1s infinte steps(17); } </style> </head> <body> <div class="spaceship"></div> </body> </html> 이 코드로 실행했을 때, 애니메이션이 돌아가지 않고 이렇게 뜹니다. 무슨 오류인 것인가요?

1
달 프로필

step 22일 전
그림이 왼쪽방향으로 이동하는데 몇 px을 이동할 건지 없고 steps(17) 이것만 있는데 어떻게 이미지가 이동을 하는 건지 모르겠어요ㅜㅜ

1
Junyoung Yang 프로필

렌더링이 이상하게 됩니다... Junyoung Yang 26일 전
안녕하세요, 강의 잘 따라서 진행중입니다만 알 수 없는 오류가 있어서 질문 드립니다. 3개의 문 사이에서 마우스를 굉장히 빠르게 이동하면 위 사진과 같이 문이 브라우저 화면 전체로 늘어나면서(?) 열립니다. 강의에서 작성하신 코드와 전체적으로 동일하지만, 사진파일 대신 텍스트 파일을 사용하고 있으며 해당 영역 CSS는 다음과 같습니다..         .content {             position: absolute;             left: 0;             bottom: 0;             width: 100px;             height: 100px;             display: flex;             align-items: center;             text-align: center;             font-family: 'Times New Roman', Times, serif;             color: white;             transform: translate3d(100%, 0, 0);             transition: 0.5s 0.5s;        }  

2
Yoon 프로필

안녕하세요 질문 있습니다 Yoon 1달 전
영상을 여러 번 돌려봤는데 너무 헷갈려서요 제가 제대로 이해한 게 맞는지 확인해주셨으면 합니다. 제가 정리한 내용은 다음과 같습니다. ㅡㅡ 현재 스크롤 상태를 나타내는 scrollState의 기본값은 false이다. 스크롤 이벤트가 실행되면 clearTimeout이 먼저 작동한다. clearTimeout은 setTimeout의 반환값을 매개변수로 하여 setTimeout을 취소시키는 함수이다. 지금은 setTimeout이 실행되지 않았으니 건너뛰고 다음 if문으로 가자. "!(self.scrollState=false)= true", 즉 if(true){} 이므로 if문이 실행된다. running 클래스가 붙어 이제 애니메이션이 작동된다. 다음으로 setTimeout 함수로 가보자. setTimeout은 항상 숫자를 리턴하기 때문에 scrollState는 값을 가지게 되어 true가 된다. setTimeout 안의 내용들은 0.5초 후에 실행되는데 실행되기도 전에 스크롤 이벤트 갱신과 함께 clearTimeout으로 인해 실행되지 못한다. 이제 if문으로 넘어가는데 scrollState가 true이므로 if(!true), 즉, if(false)가 되어 if 문이 실행되지 않는다. 그리고 setTimeout으로 넘어가면 마찬가지로 리턴값을 받아 여전히 true이고, settimeout은 실행되지 않는다. 이렇게 반복되다가 마지막 스크롤일 때 setTimeout이 드디어 실행된다. 왜냐하면 더 이상 스크롤 이벤트가 일어나지 않아 clearTimeout이 동작하지 않기 때문이다. 비로소 scrollstate는 false가 되고 running 클래스는 제거된다.

2
베지밀 프로필

질문있습니다. 베지밀 1달 전
안녕하세요 1분코딩님  강의 너무 재밌게 잘 듣고 있습니다. 간단한 질문이 있습니다. 강의에서는 if문을 써서 ilbuni 클래스를 포함하는지 확인하고 child를 제거했는데 아래쪽과 같이 this.removeChild(e.target)으로 하면 문제가 발생하는건가요?  코드 바꿔서 테스트 해보니 원하는 대로 작동은 하는데 제가 고려하지 못하는 문제점이 있는가해서 여쭤봅니다..! 답변 기다리겠습니다 감사합니다~! if(e.target.classList.contains('ilbuni')){ stage.removeChild(e.target); } this.removeChild(e.target);

2
이은혜 프로필

질문이 있습니다. 이은혜 1달 전
function Test() {}  new Test(); let haha = new Test(); 이렇게 되어 있다고 했을 때 1, 생성자 함수 = Test() 2. new Test() 생성자를 호출한다 = 인스턴스 생성 3. haha 는 인스턴스 생성과 동시에 하나의 변수로 만듦 이라고 이해하면 되는 걸까요 ??

2

55,000원

내 목록 추가 1435 공유
지식공유자 : 1분코딩
총 64개 수업˙총 10시간 48분
평생 무제한 수강
수료증 발급 강의
초급 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스