인터랙티브 웹 개발 제대로 시작하기
인터랙티브 웹 개발 제대로 시작하기
수강정보
(77개의 수강평)
1122명의 수강생
ss S 프로필

선생님 css의 display: inline-flex관련 질문입니다. ss S 1시간 전
선생님 추석 잘 보내고 계신지요?? 오늘 객체4를 공부하다가 flex관련 궁금증이 생겼습니다. 강의 객체4에서  card instance를 여러개 생성했는데요,  instance는 각각 div tag로 생성되는데, 여기서 div가 원래 block요소의 성질을 가지고 있다는 것 까지는 이해를 했습니다. .card 에서 display: inline-flex;  로 설정해 주셨는데 여기서 좀 헷갈리는 게 있습니다. display를 그냥 flex로 해주니까 card instance들이 가로정렬(main-axis?)이 안되고 block level처럼 세로로 죽 나열이 됩니다.이게 갑자기 무엇이랑 헷갈렸냐면 "3개의 문" 강의에서는 container인 .stage에 display: flex만 해줘도 각각의 door item들이 div요소로 이루어 졌음에도가로로 정렬이 되었다는 것이 지금 머릿속에서 명확히 정리가 되지 않습니다.그래서 선생님 이론 강의 flex 도 찾아봤는데 flex와 inline-flex의 차이를 명확히 이해를 못하겠습니다. 선생님께 도움을 구합니다.

0
Jin Lee 프로필

transform-origin과 transition효과 Jin Lee 21시간 전
제가 transform-origin을 설정한 상태에서 transition을 덧붙였는데요.  제 예상은 origin 기준점에서 움직임이 작동하는거 였는데, 실제로는 움직임이 작동 한 후 갑자기 도형이 기준점으로 순간이동으로 하더라고요. origin기준점을 상태로 transition이 반영될 수는 없을까요?

1
Hong GilSeong 프로필

stage에 width height 값을 vw vh 주셨는데 Hong GilSeong 1일 전
house에는 width height에 100%를 주면 다른건가요>?

1
JOON 프로필

3개의 문에서 질문드려요 JOON 2일 전
3개의 문 현재의 순서값에 클래스가 붙는걸 활용해서 텝 메뉴를 만들고자 합니다. 순서값을 .box에 어떻게 전달해야 할까요?  jquery에서는 간단히 this.index()로 알아냈는데 javascript로는 어렵네요.  팁을 알려주시면 감사하겠습니다.     <div id="wrap">         <div class="content">             <ul class="menu">                 <li ><a href="#" class="btn"> 0menu</a></li>                 <li><a href="#" class="btn"> 1menu</a></li>                 <li><a href="#" class="btn"> 2menu</a></li>                 <li><a href="#" class="btn"> 3menu</a></li>             </ul>             <ul class="box">                 <li class="inner b01 Active">content01</li>                 <li class="inner b02">content02</li>                 <li class="inner b03">content03</li>                 <li class="inner b04">content04</li>             </ul>         </div>     </div>     <script>         (function(){             const menuList = document.querySelector('.menu');             let currentItem;             const content=document.querySelector('.box');             function handler(e){                 const targetElem = e.target;                 // console.log(targetElem);                 if(currentItem){                     currentItem.classList.remove('On');                 }                 if(targetElem.classList.contains('btn')){                     targetElem.parentNode.classList.add('On');                     currentItem= targetElem.parentNode;                 }                            }             menuList.addEventListener('click',handler);         })()     </script>

5
SIU LEE 프로필

defer은 사용하면 안되나요 SIU LEE 6일 전
head부분에 <script defer>구문 <script>를 사용하면 안되는 건가요 해봤는데 안되는것 같아서 이해가 안되서요 다른곳에서 봤지만 어떤 분은 js파일을 만들고 head부분에         <script defer src="파일이름.js"></script>이렇게 알려주시는 분이 있어서 질문 합니다!

1
cacao621 프로필

선생님 질문있습니다! cacao621 7일 전
이번강에서 배운 내용이랑 관련은 없는데 테스트해보다보니까 새로고침을해도 스크롤은 맨처음으로 안돌아오더라구요 이거는 어떻게 해결해야하나요??

1
SIU LEE 프로필

선생님이 하신 이미지는 가로 로 이미지가 나열 되어있는데 만약 이미지들이 위아래로 있으면 어떻게 하는게 좋을까요 SIU LEE 9일 전
각각의 이미지의 위치를 퍼센테이지로 적용 해서 이미지를 하나나 지정해줘야 할까요?  steps를 사용 할수 없는것 같아서 질문 드립니다.

2
cacao621 프로필

화면 rotate질문이요! cacao621 9일 전
rotate할때 mousePos 객체를 생성해서 하셨는데, translateZ에 zMove변수를 넣어준것처럼  rotate에 객체속성을 호출하는게 아니라 변수를 넣어주면 안되는건가요?? 

1
김동 프로필

선생님 여쭤볼때가 없어서요 ㅠㅠ 질문좀드릴게요 ㅠ 김동 11일 전
(function () {     const Form = document.querySelector('form');     let targetElem;     let currentItem;     function clickHandler(e) {         targetElem = e.target;         currentItem = targetElem.parentNode.parentNode;         const black = document.querySelector('.black')         if (targetElem.classList.contains('button1')) {             currentItem.classList.add('black')         }         if (targetElem.classList.contains('button2')) {             currentItem.classList.add('gold')         }     }     Form.addEventListener('click', clickHandler) })() 제가 버튼 1 2 클릭한것마다 body에 백그라운드색을 바꾸고 싶은데요; 이벤트 함수는 많이쓰면 안좋다고 하셔서 위임 식으로 target을 써서 하려구 하는데 이렇게 코드를치면 한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를 고쳐야 할까요 ㅠ?

4
정태웅 프로필

문열고닫히고 질문.. 정태웅 13일 전
코드를 보면 clickHandler에서 1. currentItem에 값이 들어있을 경우 inactivate 함수를 실행 2. targeElement가 door-body인 경우 activate함수를 실행 1 -> 2 번 순으로 실행해서 다른문이 열리기 전에 열려있던 문이닫히고는 알겠습니다.   그런데 같은문을 클릭했을경우 닫히고 끝인데요  코드만보면 2번도 실행되서 다시 열려야되는거 아닌가요?  그리고 while문으로 특정한 element만 클릭되게 만들시  while문으로 targetElem을 정의하고  2번 코드에서 조건문만 없애고 함수실행해서 인자로 정으된 targetElem만넣어주면 동일한 코드인지 알고싶습니다~

1
김동 프로필

선생님 while 하고 if 문에 parentNode를주면 김동 15일 전
다르게 적용 되나요? while문은 바디 이상까지 계속 찾아서 올라가고 if는 바로 한단계만 올라가고 멈추나요?

1
무당선생 프로필

코드 작성 순서에 대해 질문 있습니다. 무당선생 20일 전
좋은 강의 감사드립니다! 코드를 작성하실 때 보면, 1. 변수 선언 2. clickHandler(e) 함수 작성 3. (클릭)이벤트 관련 처리 이런 순서로 작성을 하시던데요.. 강의의 흐름대로라면 1번 -> 3번 -> 2번이 자연스러운데 혹시 특별한 이유가 있는건가요? 뭐.. 선수들끼리 약속이다... 이런...

2
ss S 프로필

선생님 3개의 문2 10:50 질문입니다(perspective) ss S 21일 전
perspective(800deg)값을 줄때.door:hover .door-body{     transform:perspective(800deg) rotateY(100deg); } 를 적용했는데perspective value를 .door-body 에다 적용해 보니까 view가 다르게 보이긴 하더라구요.제가 혼자 구현을 한다고 생각해보니 어디다 적용할 지 헤맬것이 분명합니다 왜 perspective value를 .door:hover .door-body에 적용을 하셨는지 조금만 더 설명해주셨으면 좋겠습니다 어느 정도 이해는 가는데 정확히 모르겠습니다

2
JOON 프로필

1분이가 계속 한자리에만 생기는데요. info.xPos가 일분이에게 안들어가는거 같아요. 놓친부분이 있는거겠죠? JOON 21일 전
(function(){//즉시 실행 함수     const stageElem = document.querySelector('.stage');     const houseElem = document.querySelector('.house');     const barElem = document.querySelector('.progress-bar');     const mousePos = {x:0,y:0};     let maxScrollValue;     function  resizeHandler(){         maxScrollValue = document.body.offsetHeight - window.innerHeight;     }     window.addEventListener('scroll',function(){         // pageYoffset 스크롤 한 값         // console.log(this.pageYOffset);         // 스크롤 범위 지정하기         // console.log( pageYOffset/maxScrollValue);         const scrollPer = pageYOffset/maxScrollValue         const zMove =scrollPer*970 -490;         houseElem.style.transform = 'translateZ('+zMove+'vw)';         // progress bar         barElem.style.width = scrollPer *100 + '%';     })     window.addEventListener('mousemove',function(e){         // console.log(e.clientX,e.clientY) 마우스 위치 알아내기         mousePos.x = -1+(e.clientX /window.innerWidth)*2;         mousePos.y = 1-(e.clientY /window.innerHeight)*2;         stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.y*5)+'deg)';         // console.log(mousePos);     })     window.addEventListener('resize',resizeHandler)     resizeHandler();     stageElem.addEventListener('click',function(e){         // console.log(e.clientX/window.innerWidth*100)             new Character({//객체의 속성으로 넣어야 함. 다른 것들도 추가해야 하기때문에                 xPos :e.clientX/window.innerWidth*100             });     }) })() function Character(info) {     this.mainElem = document.createElement('div');     this.mainElem.classList.add('charactor');     this.mainElem.innerHTML = '' +         ' <div class="character" >' +             ' <div class="character-face-con character-head">' +                 '<div class="character-face character-head-face face-front"></div>' +                 '<div class="character-face character-head-face face-back"></div>' +             '</div>' +             ' <div class="character-face-con character-torso">' +                 '<div class="character-face character-torso-face face-front"></div>' +                 '<div class="character-face character-torso-face face-back"></div>' +             ' </div>' +             '<div class="character-face-con character-arm character-arm-right">' +                 ' <div class="character-face character-arm-face face-front"></div>' +                 ' <div class="character-face character-arm-face face-back"></div>' +             '</div>' +             '  <div class="character-face-con character-arm character-arm-left">' +                 '<div class="character-face character-arm-face face-front"></div>' +                 '<div class="character-face character-arm-face face-back"></div>' +             '</div>' +             '  <div class="character-face-con character-leg character-leg-right">' +                 '<div class="character-face character-leg-face face-front"></div>' +                 '<div class="character-face character-leg-face face-back"></div>' +             '</div>' +             '  <div class="character-face-con character-leg character-leg-left">' +                 '<div class="character-face character-leg-face face-front"></div>' +                 '<div class="character-face character-leg-face face-back"></div>' +             '</div>' +         '</div>';         document.querySelector('.stage').appendChild(this.mainElem);         this.mainElem.style.left= info.xPos+'%'; }

2
김동 프로필

선생님 클래스 선언할때 한칸띄울때하고 안띄울때는 무슨차이인가요? 김동 21일 전
개념을 잘모르겟습니다. ㅠ  .door-opened  .ilbuni .door-opened.ilbuni 이차이가 어떡해 되나요 ㅠ css를 막배우다보니 개념을 잘 모르겟네요 ㅠ

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