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

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

(30개의 수강평)

423명의 수강생
55,000원
지식공유자 · 스튜디오밀
63회 수업 · 총 10시간 37분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급, 중급, 활용'
BEGON Miyoung 프로필

animation에서요 BEGON Miyoung 22일 전

안녕하세요 .

오늘부터 수강하기 시작해서 재미있게 잘 듣고 있습니다.

위에 첨부 된 이미지와같이 저는구글크롬을 사용하고 현재 윈도우10 을 이용하고 있는데 속성창에서 애니메이션 속성값을 볼 수 없게 되어있네요.

그리고

 .box:hover{

animation-play-state: paused;

}

가 적용이 안되요.

혹시 아신다면 답변 부탁드립니다 ^^

1
도움 프로필

ie11, 엣지에서 문제입니다. 도움 1달 전

perspactive가 적용된 상태에서 회전을 시키면 backface-visibility가 ie11에서는 꼭 transition이 없는 상태처럼 적용이 됩니다. 엣지에서는 앞면 카드가 90퍼센트 정도 회전을 하고 정지하고 사라지지않고 남아있습니다. 소스를 선생님과 똑같이 적어도 그런데 어떤게 문제일까요... perspactive를 제거하면 3d 효과는 사라지나 위에 문제들이 발생하지 않습니다. 크롬에서는 잘 동작합니다.

2
승어 프로필

복습 질문이요~ 승어 1달 전

            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클릭시 문 안닫히는 효과 승어 2달 전

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

1
승어 프로필

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

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

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

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

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

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

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

1
승어 프로필

애니메이션 시작점 승어 2달 전

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

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

      from{
        background-position:left ;


      }

1
승어 프로필

질문이요~ 승어 2달 전

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

 

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

1
승어 프로필

질문이요~ 승어 2달 전

<!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
승어 프로필

질문이요~ 승어 2달 전

function Character(info) {

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

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

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

1
승어 프로필

질문이요~ 승어 2달 전

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 2달 전

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

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

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

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

1
승어 프로필

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

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

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

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

 

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

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

1
승어 프로필

window객체 승어 2달 전

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

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

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

 

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

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

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

1
승어 프로필

안되네요 ㅠㅠ 승어 2달 전

 

    .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
승어 프로필

질문 이요~~ 승어 2달 전

 

프로토타입 안에서 기존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
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스