55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
주석처리
강사님 아톰에서 /* */ 주석처리 하시는거 단축키 이용하시는거 같은데 무슨 키로 주석처리 하신건가요? 윈도우는 안되는건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
CSS 3D 파트 파이어폭스 브라우저 질문
안녕하세요. CSS 3D 파트 3편을 듣고 질문 드립니다. 크롬, 사파리, IE에서 호환되도록 하는 것을 보고, 다음으로 사용율이 높을 것이라 생각되는 엣지랑 파이어폭스에서 한번 실행해보았는데 파이어폭스에서 뒷면이 제대로 안나와서 파이어폭스에서는 어떻게해야 제대로 나올지 궁금해서 질문 올립니다. ㅠㅠ -moz-backface-visibility: hidden이랑 -moz-transform-style: preserve-3d 둘다 추가해보았는데 제대로 작동을 안하네요. 이 친구도 IE처럼 분해를 해야할 것 같지는 않아서 궁금해요..!! 사진은 파이어폭스에서 hover했을 시 사진입니다.
- 미해결인터랙티브 웹 개발 제대로 시작하기
css 값 갱신 주기 문의
안녕하세요. 강의 잘 듣고 있습니다. scroll 시 house element 에 transform: translateZ(zMove) 형태로 할당되어 있잖아요. zMove 계산 시 maxScrollValue 를 사용하고 있고, maxScrollValue 는 window resize 시 갱신되게 되어 있고요. 궁금한건 resize 되었을 경우 scroll event 가 발생하지 않는데, 왜 resize event 추가해서 maxScrollValue 를 갱신하면 의도한대로(?) 동작을 하는걸까요? css 에 할당된 값은 브라우저 내부에서 따로 갱신을 하는건가요? 글로 궁금한걸 묻기가 쉽지 않네요;
- 해결됨인터랙티브 웹 개발 제대로 시작하기
화면그림판
강사님 화면에 그림판은 무슨 프로그램인가요? 너무 편해보여용
- 해결됨인터랙티브 웹 개발 제대로 시작하기
transform- origin
transform-origin: 0% 0% 이면 x축 0%, y 축 0% 으로 left bottom이 기준이 되야하지않나요? 또 100% 100% 이면 right top 일거같은데.. 왜 right bottome 인지요? 숫자가 양수일때 x축은 오른쪽으로 y 축은 위쪽으로 올라가는것 아닌가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
흠 선생님 질문 있습니다!
해당 영상과는 관련이 없는 질문이지만, 따로 여쭤볼 곳이 없어서 질문드립니다! ( 확실히 기본기를 익히고 넘어갈려고 다시 선생님 강의를 정주행 하고 있습니다 !) 제가 하루마다 배운 내용을 총 학습하고 정리하여 T스토리 라는 사이트에 배운 내용들을 정리하는 습관이 생겼는데, 제가 글쓰는 공간에 선생님 이름을 남기면서 써도 될지 질문드립니다.배운 내용을 한번더 복습하자고 가는 의미에서 적을 생각입니다! ex) 어떤분 어떤분에게 배웠고, 오늘은 이런내용을 학습하였다 ex) transform ~~~~ 기본기에 대해 ~~~~ 더 확실히 ~~~ 했다 이런식의 내용을 쓸 생각입니다 ! 하지만 강의도 유료 강의이고, 사진 동영상들은 당연스럽게 안넣을 생각이고, 그냥 제가 배운내용에 대해 적고 복습하는 차원으로 쓰고 싶은 생각입니다 ! (허락 해주신다면 쓸 생각입니다! ㅎ) 읽어주셔서 감사합니다^^
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 강의랑은 관련 없는 질문일수도 있습니다만..
안녕하세요 선생님~ 이번강의를 완강을 다 하고, 3d 템플렛을 수강을 듣고 있는 학생입니다. 3d 템플렛 강의가 끝난 후, svg를 들을려고 하던 도중 선생님 유튜브에 svg 강의 영상도 있더군요. 기본적인 부분들을 보고있는데, 제가 궁금한 점이 생겼습니다! 제가 현재는 front-end 개발자로 취업하고 싶은 개발자이고, 최종적으로는 풀스택 개발자로써 살아가고 싶은 개발초보입니답 ㅠㅠ. 그래서 svg도 front에 관련된 공부인지 궁금해서 질문을 드립니다. 조금이라도 도움이 된다면 들을 생각입니다! ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
전역변수를 피해보려고
전역변수를 피해보려고 (function () {} )(); 함수로 시도해보고있었는데요, 최대한 간단하게 해보려고 했는데 제가 임의로 지정한 function이 안되네요. (function(){ const menu = document.querySelector('.menu'); menu.addEventListener('click', function clickShow(e){ let elem = e.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; if(elem.nodeName = 'BODY') { elem = null; return; } } }) clickShow(); })(); 원래 이렇게 addeventListener에서 바로 function을 집어넣고 event는 안되나요? 그냥 따로 function으로 빼야만 될까요? ( function () { const menu = document.querySelector('.menu'); menu.addEventListener('click', clickShow = (e) => { let elem = e.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; if(elem.nodeName = 'BODY') { elem = null; return; } }; } clickShow(); })(); 이렇게도 해봤는데 자꾸 missing ) after argument list라는 식으로만 뜨네요ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
선생님 질문 드립니다 ㅠㅠ!
제 개인적인 생각으로는.. !! setTimeout은 몇초 후에 값을 나타나게 하는 기능인거 같고, clearTimeout은 멈추게 하는 기능인거 같고..? ㅠㅠ../ 라고 생각하는 도중에 궁금한점이 문득 생겼습니다! 간단하게 button으로 예를 들자면.. setTimeout을 5초(5000) 뒤에 20이라는 값을 나오게 가정하고, clearTimeout도 같이 지정해줬을시, 이 20이라는 값이 5초전에 나오기전에 버튼을 클릭하면 clearTimeout이 실행되면 그 값이 나오지 않나요? 지금 일분이는 무엇을 클릭하기전에 알아서 clearTimeout이 작동하는것은 알겠는데 무엇을 클릭 했을시에도 멈추어지는 기능인지 궁금합니다!! 제가 질문드리는데 아직 배운게 얼마 많지 않아 ㅠ 두서없이 말씀드린거 같습니다.. 죄송합니다 흑..ㅠㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
화살표함수를 쓰는 경우
안녕하세요 선생님. 저같은 경우에는 해외에 거주중이고 학교에서는 화살표함수를 위주로 가르치고있어요.그래서 강의를 보는 동안 화살표 함수를 이용해서 따라하고있었는데, 그렇게되면 (저는 정확히 모르고 구조만 알다보니) 오류가 자주 나더라구요. 이 강의에서도 console.log(this)를 찍는 경우에는 윈도우 자체를 읽는 것 같아요. (function(){ //이벤트 위임 //ilbuni대신에 stage를 클릭해서 이벤트가 발생하도록 함. const stage = document.querySelector('.stage'); const clickHander = (e) => { stage.removeChild(e.target); }; stage.addEventListener('click', clickHander) })(); 이런 경우에는 여기에서 어떻게 해야 클릭시 stage를 잡아낼 수 있을까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
여기서 변수설정해줄때 질문있습니다.
this.lastScrollTop을 선언해줄때 계속 코드를 작성하던 이벤트 함수 안이나 init함수 안에서 선언해주는것이 아닌 생성자 함수를 만들때 넣어주시는데 꼭 그렇게 하는 이유가 있나요? 혹시 나중에 다른 추가적인 함수들에서 그 변수를 쓸 경우를 고려하셔서 그렇게 하시는 건가요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
키다운-업 연속 시 캐릭터에 .running class
안녕하세요 강사님. 26강까지 다 듣고, 강사님이 주신 원본이랑 비교까지 다 했는데도 궁금한 점이 있어서요! 다름이아니라, 제 파일에서 키다운 이벤트 시, 키코드 37번과 39번은 문제없이 작동하는데, 위 아래 키보드를 클릭하면 running클래스가 랜덤하게 작동합니다. 1. forward 시에 running클래스 정상작동, 얼마 안가서 backward시 running이 붙지 않고, 돌아옵니다. 2. forward로 끝까지 갔다가 backward시에는 running이 붙었다가 중간에 또 forward와 backward를 반복하면 running이 붙지 않은채 움직입니다. 원본 파일에서 개발자 코드를 켜놓고 character 클래스를 볼 때도, forward에는 running이 붙다가 backward에는 running이 붙지 않고 돌아오는데, 이 부분 해결방법 여쭤봅니다. 저는 크롬이랑, 웨일에서 개발자도구를 실행시켰습니다. 감사합니다!
- 미해결인터랙티브 웹 개발 제대로 시작하기
리셋 코드에서 왜 사용하는지 잘 모르겠는 부분이 있어 질문드립니다.
html { height: 100%; } body { min-height: 100%; } 다른 부분은 왜 사용하는지 이해가 가는데 html, body의 height을 100%로 잡아주는 이유가 무엇인지 모르겠습니다. html, body height 100%의 이유가 무엇인지요 ㅠㅠ
- 해결됨인터랙티브 웹 개발 제대로 시작하기
reflow관련 질문 드립니다.
안녕하세요? 1분코딩 강좌를 즐겁게 듣고있습니다. reflow라는 단어가 나와서 검색하고 공부하던 도중에 궁금함이 생겨 질문드립니다. https://stackoverflow.com/questions/27637184/what-is-dom-reflow 위 스택오버플로우 답변 중에 animating a DOM element not necessarily trigger reflow, for eg. if you are using CSS3 property to transform, reflow doesn't happen 라는 답변이 있습니다. 위 답변에 따르면 해당 강좌에서 배운 transform 속성을 쓰면 reflow가 일어나지 않는다고 해서요. 그럼 transform 속성을 쓰면 reflow가 일어나지 않고 repaint만 일어나서 성능에 이점이 있다고 이해해도 될까요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
제가 질문이 너무 많네요ㅠ self에 대해서 질문 할게요
제가 지금 한 여섯번 정도 들어봐도 이해가 잘 안가서요...this를 여기서 self로 바꿔준 이유가 window를 객체로 삼았기 때문에 협소하게 만들어서 init안에서 활동하도록 self로 지정해준 거잖아요? 그래서 const self = this; 로 지정하고 init안에서는 this대신에 init으로 썼다는 건 이해가 가는데, 갑자기 run에서는 이것조차 지워버리고 객체 안에 self를 넣는 순간부터 설명이 좀 이해가 안가서요ㅠ 잘 따라가다가 마지막에 run: function(self) { if(self.direction == 'left') { self.xPos -= self.speed; } else if(self.direction == 'right') { self.xPos += self.speed; } //실제로 움직이게 만들어주려면 left값을 계속 갱신해줘야 하니까 이걸 넣는다. self.mainElem.style.left = self.xPos + '%'; // 반복시켜줘야하니까 쓰는 것 method를 호출. (context가 바뀐 것) requestAnimationFrame(function() { self.run(self); }) } 왜 self가 들어가야하는건지, 위에 keydown event에서는 왜 또 self를 넣어야 이게 작동되는건지.. 혹시 ㅜㅜ 좀 더 깔끔한 설명 가능할까요? 아니면 앞 강의 중 어떤 걸 들어야 이게 좀 더 명확하게 다가올까요. 사실 this를 이해하는 것도 좀 오래걸리긴했는데 여기서 완전 멘붕이 오네요ㅠ
- 미해결인터랙티브 웹 개발 제대로 시작하기
여기서 말한 그 스크롤 업앤다운
쇼핑몰에서 바가 보이고 숨겨지고 하는 내용을 말씀하셨는데, 만약 그게 작동되려면 매번 CSS에서 data-direction 값으로 지정해준 뒤에 js에서 작동시켜야하는걸까요?만약 실제로 코드를 짠다면, data-direction = 'show' { display: flex; }data-direction = 'hidden' { display:hidden;} 이렇게 해서 보이도록 짜야할까요?? 이 data-direction구조에서 transform이 아니어도 다른 css가 들어가도 상관 없는걸까요??
- 미해결인터랙티브 웹 개발 제대로 시작하기
질문 있습니다.
background: url("images/sprite_spaceship.png") no-repeat 0 0 / auto 150px; no-repeat뒤에 0 0 의 값의 뜻이 뭔가요?..
- 미해결인터랙티브 웹 개발 제대로 시작하기
애니메이션을 작성할 때
애니메이션을 작성할 때 CSS 최상단에 작성 하는 이유가 따로 있나요?
- 미해결인터랙티브 웹 개발 제대로 시작하기
궁금한점이 아직 지금 14회까지 봤는데요.
이건 너무 많은 내용이라서 그냥 선생님이 주신 CSS를 복붙하고 그냥 설명을 들으라는 건가요...? 아니면 혹시 뒤에가서 처음부터 적어내려가면서 쓰는 걸 보여주시는건가요..? 사실 11강까지는 괜찮았는데 12강부터는 좀 혼란스러워서요...
- 미해결인터랙티브 웹 개발 제대로 시작하기
안녕하세요 선생님 !
html , css를 독학으로 하고 인터넷 강의로 선생님 강의를 고르고 멋있는 ! 동적인 인터랙티브한 웹을 만들어볼려고 하는 20대 초반 풀스택 개발자를 꿈꾸고 있는 학생입니다! 선생님 강의를 보면서 잘 따라가고 있는 와중에 질문이 하나 생겨서 이렇게 질문드립니다 ㅎㅎㅎ (정말 궁금해서 질문 드립니다 ㅠㅠ) 독학으로 java script를 배우다가 힘들어서 강의를 보았는데, 재미도 있고 더 욕심이 나는거 같더라구요 ㅎㅎ...; 본론으로 질문을 드릴것은.. 혹시 순수 java script로 간단한 비디오 게임 이런것들을 만들어 볼려고 할 경우에는, 어느정도 숙련도가 필요할지 너무 궁금합니다.