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

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

(38개의 수강평)

525명의 수강생
55,000원
지식공유자 · 1분코딩
63회 수업· 총 10시간 37분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 '초급, 중급, 활용'
오늘 프로필

강의소개 페이지에 있는 우주 인터렉티브 웹을 만들고싶은데 오늘 5일 전

몇강을 참고하면 만들 수 있을까요?

우주 속으로 빨려 들어가는 애니메이션을 구현하고싶어서 여쭤봅니다.

답변 부탁드립니다.

1
헙코딩신 프로필

함수안에 for 문 헙코딩신 9일 전

for문이 들어가였는데 어떠한 이유로 for 반복문을 써야하는건지를 알고싶습니다..

인제 JS를 배우기시작하여서 쓰는 이유가 궁금해서요..

1
Minsun Lee 프로필

mousewheel할때랑 scroll할때 차이가 나는데 Minsun Lee 10일 전

 scroll 할때는 부드럽게 이동이가능한데 mousewheel을 하면 왜 뚝뚝 끊기는 느낌이 날까요? 

1
Jeonghak Hur 프로필

rotateY(90deg) 후 방향은.. ? Jeonghak Hur 24일 전

안녕하세요. 

07:50에  .wall-right를 저는 translateZ(-100vw) 해야한다고 생각했거든요.. 

왜냐하면, rotateY(90deg) 하면 시계방향으로 돌아서 div의 앞면이 우리 시각에서 왼쪽을 향해있다고 생각해서요.

그래서 뒤로 100vw만큼 옮기려면 translateZ(-100vw) 라고 생각했는데 강의에서 양수값으로 나와서 궁금합니다.

제가 잘못 알고 있는게 무엇일까요 ?

1
znffjdznffjd 프로필

rotate() 사용시 좌표 방향 기준 znffjdznffjd 24일 전

강사님 영상 재밌게 보고있습니다.

영상 07:10초쯤에서 오른쪽 측면용 벽 너비를 1000vw로 설정하고 z축으로 이동시켜주신다 하셨는데요.

저는 당연히 x축으로 이동시켜야 된다고 생각했는데, 이게 원리가 3d공간에서 rotate()시 요소의 좌표기준방향도 같이 회전되서 바뀌는 원리인가요??

API관련해서 mdn찾아봐도 관련내용은 쉽게 찾을수가없네용.. 혹시 3d관련해서 참고할 리소스 추천해주실 수 있으신가요?

감사합니당:)

1
znffjdznffjd 프로필

DOMscript파트 강의자료 znffjdznffjd 1달 전

강사님 강의 재밌게 잘보고있습니다! 

DOMscript1부터 같이 따라해보고싶은데 수업자료가 없네용

첨부해주시면 감사하겠습니다.

2
J K 프로필

안녕하세요 질문이 있습니다. J K 1달 전

직접 예제를 해보았는데, removeChild후 child 이미지가 차례대로 다시 적용되는데, 예제랑 달라서 질문 드립니다.

div.stage

 div.img
 div.img
 div.img

------
css

.img:nth-of-type(1){
...
background-image:url(image1);

}

.img:nth-of-type(2){
...
background-image:url(image2);
}

.img:nth-of-type(3){
...
background-image:url(image3);
}

위 상태에서 상단 첫번째 div.img 를 클릭하여 removeChild 하면 첫번째 div랑 image1이 같이 삭제되는 것처럼 보이는게 아니라 첫번째 child가 삭제된 후 child가 두개가 남고

.img:nth-of-type(1)
.img:nth-of-type(2) 가 다시 적용되어 image3이 날라가는 듯한 결과로 나옵니다. 

div.stage

 div.img - image1
 div.img - image2

예제를 잘못 따라한건지 다시 살펴보았는데, 뭐가 잘못된건짐 모르겠네요..

2
무당선생 프로필

스프라이트 이미지 제작 프로그램이 궁금해요! 무당선생 1달 전

좋은 강의 감사드립니다!

예제에서의 스프라이트 이미지 제작 프로그램은 어떤게 있나요?

1
도움 프로필

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

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

2
승어 프로필

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

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

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

1
승어 프로필

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

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

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

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

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

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

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

1
승어 프로필

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

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

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

      from{
        background-position:left ;


      }

1
승어 프로필

질문이요~ 승어 4달 전

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

 

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

1
승어 프로필

질문이요~ 승어 5달 전

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