인프런 업데이트 소식 🔨👷🏼‍♂️
인터랙티브 웹 개발 제대로 시작하기

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

(26개의 수강평)

372명의 수강생

55,000원

평생
초급, 중급, 활용
수료증
62회 수업, 총 10시간 14분
위시리스트 추가
승어 프로필

복습 질문이요~ 승어 7일 전

            function Card(text, naming,size) {
                this.text = text;
                this.naming = naming;
                this.size = size;
                this.init();
            }

            Card.prototype = {
                constructor: Card,
                init: function() {
                    const mainElem = document.createElement('div');
                    mainElem.innerHTML = this.text;
                    mainElem.style.fontsize= this.size;
                    mainElem.classList.add('card');
                    document.body.appendChild(mainElem);
                }
            }

            const card1 = new Card('dd', 'dd','25px');

위에처럼 생성자 함수 인자를 text,naming으로 둘다 문자 속성으로 만들었는데 프로토타입에서 어떻게 해야 둘다 생성자 함수로 호출해서 쓸 수 있을까요?

innerHTML 으로 둘다 값을 넣어주면 아래 네이밍만 살아남은채로 나오는데;

그리고 fontsize 값을 넣어줬는데 작동이 안하네요 뭔가 잘못한거 같은데 모르겠어요~

선생님 도움이 필요합니다

1
승어 프로필

stage클릭시 문 안닫히는 효과 승어 12일 전

stage클릭했을 문 안닫히는 효과는 어떤식으로 줄 수 있을까요? if문으로 해야 한다는건 알겠는데 그 다음이 막막하네요;;

1
승어 프로필

이번 강의랑은 관련 없는 질문인데요 승어 12일 전

선생님 이번 강의 잘 들었습니다~

다름이 아니라 샘 다른 강의도 들어보고 싶은데

코알못이랑 SVG 강의가 있는데 어떤것 듣는게 나을까요?

제가 완전 초보는 아닌데 코알못을 들어도 될까요?

이번강의에서 3D파트에서 뒷부분 캐릭터JS부분만 어려웠는데 코알못을 들어도 도움이 될까요?

끝으로 좋은 강의 감사드립니다~

1
승어 프로필

애니메이션 시작점 승어 16일 전

애니메이션 시작점을 캐릭터가 문여는 시점부터 시작하려면 애니메이션 값을 어떻게 줘야 할까요?

그리고 아래 처럼 백그라운드 포지션값에 레프트 , 라이트 값으로 주게되면 이상하게 동작하는데 원리가 알고싶습니다~

      from{
        background-position:left ;


      }

1
승어 프로필

질문이요~ 승어 19일 전

      that.scrollState = setTimeout (function () {
          that.scrollState = false;
          that.mainElem.classList.remove('running');
      },500);

 

위 코드에서 that.scrollState = false; 이 부분이 왜 들어가야 하는지 모르겠어요 ;; 설명해주신거 같은데 잘 이해를 못한건지 ㅠㅠ 위 생성자함수안에 this.scrollState = false; 이 값을 셋팅해 줬는데 또 왜 주는지 모르겠어요

1
승어 프로필

질문이요~ 승어 24일 전

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    body[data-char='ragirl'] {
      background: #ff7200;
    }

    body[data-char='ilbuni'] {
      background: dodgerblue;

    }

    body{
      height:500vw;
      font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif;
      -webkit-overflow-scrolling: touch;
      color: #555;

    }

    .world{
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      perspective: 1000px;
    }
    .house {
      width: 100vw;
      height: 100vh;
      transform: translateZ(-490vw);
      transform-style: preserve-3d;

    }

    .wall-front-a { transform: translateZ(300vw); }
    .wall-front-b { transform: translateZ(50vw); }
    .wall-front-c { transform: translateZ(-200vw); }
    .wall-front-d { transform: translateZ(-500vw); }

    .wall-content{
      position: absolute;
      display:flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    h2{
      font-size: 15rem;
    }

  </style>
</head>

<body>
  <div class="click-button">
    <button class="buttonboy" data-char="ilbuni"></button>
    <button class="buttongirl" data-char="ragirl"></button>
  </div>
  <div class="progress-bar-con">
    <div class="progress-bar"></div>
  </div>
<div class="world">
  <div class="house">

    <div class="wall-front-a">
      <div class="wall-content">
        <h2 class="wall-title">안녕하세요</h2>
      <!-- <img src="Bible.png" alt=""> -->
      </div>
    </div>

    <div class="wall-front-b">
      <div class="wall-content">
        <h2 class="wall-title">Hello</h2>
      <!-- <img src="K-108.png" alt=""> -->
    </div>
    </div>

    <div class="wall-front-c">
      <div class="wall-content">
        <h2 class="wall-title">Hola</h2>
      <!-- <img src="Bible.png" alt=""> -->
    </div>
    </div>

    <div class="wall-front-d">
      <div class="wall-content">
        <h2 class="wall-title">こんにちは</h2>
      <!-- <img src="K-108.png" alt=""> -->
    </div>
    </div>

  </div>
</div>


  <script type="text/javascript">
(function () {

const houseElem = document.querySelector('.house');
let maxScrollValue;

window.addEventListener('scroll',function () {
  const scrollPer = pageYOffset / maxScrollValue;
  const zMove = scrollPer *980 -450;
  houseElem.style.transform = 'translateZ('+zMove+'vw)';
})

function resize() {
  maxScrollValue = document.body.offsetHeight - window.innerHeight;
}
resize();


})();
  </script>
</body>

</html>

 

복습하면서 예제랑 비슷하면서 간단하게 만들려고 위에처럼 코드를 짜봤는데 스크롤 움직이면 제대로 작동은 하는데 폰트들이 왼쪽으로 휘면서 커지네요...

이건 어떤 문제가 있는걸까요??

1
승어 프로필

질문이요~ 승어 1달 전

function Character(info) {

  this.mainElem.style.left = info.xPos + '%';

info의 정체가 무엇인가요??

info.xPOS로 어떻게 xpos를 가져올수 있는걸까요?

1
승어 프로필

질문이요~ 승어 1달 전

function Character() {
      this.mainElem = document.createElement('div');
      this.mainElem.classList.add('character');

위에 생성 함수 mainElem안에 createElement으로 div를 생성하고

그안에 add로 character 클래스를 추가한다는 뜻인가요?

즉 , mainElem 안에 div가 있고 div 형제 클래스로 character가 있는건가요?

그 전 강의에서도 들었는데 이해가 잘안가서요 ;;

 

너무 초보 질문이라 죄송합니다;;

1
youngmin kim 프로필

안녕하세요~ 이번에 캔버스 강의를 참여했었는데요..(일요일 못감 ㅜ.ㅜ) youngmin kim 1달 전

혹시 제가 캔버스로 작곡 노트 같은 것을 만들어야 되는데요. `tone.js`를 참조해서 만들고있어요.. 

https://learningmusic.ableton.com/make-beats/make-beats.html

이정도 기능 구현을 만드는데 얼마나 걸릴지 궁금합니다. ^^;;

이번에 svg 강의도 가요~! 항상 좋은 강의 감사합니다!!

1
승어 프로필

가운데 마우스 포인트 값 생성할때 승어 1달 전

mousePos.x = -1 + (e.clientX / window.innerWidth) *2;
mousePos.y = 1 - (e.clientY / window.innerHeight) *2;

위에 처럼 가운데 마우스 포인트 값을 0주시기 위해서 위에 식을 주셨는데 설명은 자세히 안해주셨네요 ㅠㅠ

-1+, 1- , *2 주신 부분이 이해가 잘 안가서요

 

그냥 저 식은 많이 쓰는 식이니깐 외우는게 좋나요?

아니면 부가 설명 살짝 부탁드려도 될까요? ^^

1
승어 프로필

window객체 승어 1달 전

window객체 잘이해가 안되서요 ㅠ

window.addEventListener('click', function (e) {

여기서 window자리에 ballElem쓰면 반응을 안하던데 왜 그런걸까요 선생님....

 

Animation 이벤트에서는 아래처럼 가능했는데

ballElem.addEventListener('click',function () {

transition속성이라서 다른건가요?

1
승어 프로필

안되네요 ㅠㅠ 승어 1달 전

 

    .ilbuni.zoom {
      transform: scale(2);
      border: 2px solid red;
    }


  <script type="text/javascript">
    (function() {


        const outputElem = document.querySelector('.output');
        const ilbuniElem = document.querySelector('.ilbuni');
        let num=0;

        function showValue() {
          let posY = ilbuniElem.getBoundingClientRect().top;
          outputElem.innerHTML = posY;
          // console.log(window.innerHeight);
          if (posY<window.innerHeight * 0.2) {
            ilbuniElem.classList.add('zoom');
          } else{
            ilbuniElem.classList.remove('zoom');

          }
        }


        window.addEventListener('scroll', function () {
            showValue();
        });


        showValue();


        })();
  </script>



똑같이 작성했는데 이미지 크기가 변하지 않아요
확인해보려고 줌 클래스에 보더값을 추가했는데 보더값은 반응해서 나오더라구요.

혹시 삽입된 그림이 크거나 뭔가 호환상에 따라서 안될수도 있는건가요??

그리고
let num=0;  이값은 영상에서는 설명이 없던데 갑자기 왜 넣으신걸까요?

그리고 이벤트리스너 부분을 아래처럼 변경 해도 똑같이 값이 나오는데 이대로 써도 문제없는건가요?
window.addEventListener('scroll', showValue);

설명 부탁드립니다 선생님~

1
승어 프로필

질문 이요~~ 승어 1달 전

 

프로토타입 안에서 기존body에 appendChild해서 붙여주는걸 body 말고 contains이라는 클래스에 붙이고 싶은데

아래처럼 getElementsByClassName으로 불러오면 에러가 나옵니다. queryselctor로 가능하다는건 아는데 겟 엘리멘츠로도 해보고 싶어서요

도와주세요 선생님~

 

Card.prototype = {
  constructor:Card,
  init:function () {
    const mainElem=document.createElement('div');
    mainElem.style.color= 'red';
    mainElem.innerHTML= "bye";
    mainElem.classList.add('card');
   

document.getElementsByClassName('contains').appendChild(mainElem);

  }

1
승어 프로필

질문 있습니다~ 승어 1달 전

선생님  

아래에서 div는 왜 생성해줘야 하나요?

다른 요소를 생성해도 되나요?

constructor:Card,
  init: function () {
    const mainElem=document.createElement('div');

1
승어 프로필

질문이요~~ 승어 1달 전

선생님

if currentItem 함수 if targetElem순서를 바꾸면 작동을 안하더라구요. 무슨 원리인지 잘 모르겠습니다

function doorHandler(e) {

  const targetElem = e.target;

  if (currentItem) {
      inactivate(currentItem);
  }

  if (targetElem.classList.contains('door-body')) {
      activate(targetElem.parentNode);
  }

1