게시글
질문&답변
2024.01.31
반응형에 대해 질문이 있습니다 !
안녕하세요 :) CSS 작성 방식은 프로젝트 요구사항 또는 개발자들의 취향에 따라 달라질 수 있을 것 같아요. 개인적인 생각으로는 모바일이 우선인 프로젝트라면 모바일부터 PC 가 우선이면 PC부터 작성하면 될 것 같습니다. 즉 상황에 따라 작성하면 될 것 같고 웹 사이트의 미니멈과 맥시멈 사이즈는 기획자분과 논의하여 처리하면 될 것 같습니다. 물론 다양한 경우의 수가 있겠지만 인터랙티브한 사이트는 1920사이즈가 넘어가면 성능에 영향을 주는 경우도 있기에 초기에 고려하여 작업 면 될 것 같습니다 :) 물론 개발자의 작업 방식에 따라 달라지겠지만 이너 사이즈를 1920에 맞추고 나머지는 100%로 활용한다면 1920이상의 디자인에도 대응되는 경우가 있지만 디자인에 따라 다른 사항이니 상황에 따라 협의하여 진행하면 될 것 같습니다. :) 그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 69
질문&답변
2024.01.10
renderGame 함수에 로그를 찍으면 무한루프가 돕니다
안녕하세요 수업에서 requestAnimationFrame은 무한 반복 되는게 맞습니다~ 필요에 따라 requestAnimationFrame을 종료해야 한다면 cancelAnimationFrame을 사용하여 정지하면 됩니다 :)
- 0
- 1
- 65
질문&답변
2023.11.23
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
안녕하세요:D 네 규격만 맞추면 가능합니다. 😄 만약 규격을 맞추는 작업이 오히려 복잡하다면 소스를 수정하여 만들면 될 것 같습니다. 그럼 또 다른 궁금증이 생기면 문의주세요 :)
- 0
- 1
- 139
질문&답변
2023.11.06
함수가 정의되기 전에 함수 호출
안녕하세요 :) 해당 부분은 getPercet, render 함수를 먼저 작성하였지만 해당 함수들은 바로 실행되는 것이 아니라 메모리에 올라가 있는 상태이고요 init 함수를 호출하면 순차적으로 함수들이 호출됩니다: D 이 부분에 대해 더 자세히 공부하고 싶다면 호이스팅에 관하여 알아보면 도움이 될 것 같아요. :) 그리고 그 외 질문에 대한 주관적인 생각입니다~ 사실 코딩 문법 숙지는 많이 하다 보면 자연스럽게 국어처럼 익숙해져서 어느 순간 잘 알게 되어 있어요. 그리고 계속 개발을 하다 보면 문법은 그냥 기초적인 부분이라고 깨우치게 되실거고 중요한건 문법이 아니라 설계를 하고 문제를 해결하는 부분이 더 중요하단 걸 알게 되실 거예요. 다만 문법을 빠르게 숙지 하기 위해선 반복 학습이 최고라고 생각 되네요~! 그럼 또 다른 궁금증이 생기면 문의주세요 :)
- 0
- 1
- 148
질문&답변
2023.10.16
섹션12 보너스 챕터에 관한 질문입니다!
안녕하세요 :) 먼저 해당 질문은 수업과 연관이 없는 부분 이고 굳이 왜 그렇게 구현 을 해야하는지 의문이 드네요^^; 이 문제를 해결하려면 먼저 animation 속성의 특징을 살펴보고 직접 테스트를 진행해 봐야 할 것 같습니다. (섹션 12는 animation 을 활용해 인터렉션을 구현했기 때문이죠?) ** 굳이 억지로 구현해야 한다면 아래와 같이 구현할 수 있을것 같지만 이 코드는 브라우저마다 호환성이 떨어질 수 있습니다. 이유는 브라우저마다 animation을 처리하는 부분이 다를 수 있기 때문입니다. css수정 (코드 추가) .fix_box .txt.active { opacity: 1 !important; } html수정 (첫번째 엘리먼트에 클래스 추가) 안녕하세요 스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬) 스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬) arr.classList.remove('active'); ** 다시한번 말하지만 위 코드는 여러 브라우저에서 다르게 동작할 수 있습니다(크롬에서 테스트 진행). 억지로 구현해야 한다면 css animation에 대해 살펴보고 조건문 등을 활용해 직접 테스트를 진행해 보길 추천드립니다. :) ** 만약 해당 문제를 꼭 해결해야 한다면 fake엘리먼트를 사용해 보는 것도 방법이 될 수 있겠습니다. :) 그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 233
질문&답변
2023.10.12
5-3-1 강좌 섹션 질문 합니다.
안녕하세요! :) 영상에 보면 모두 나와 있는 내용인데 다시 한번 설명드릴게요 :) 그리고 섹션5가 조금 난이도가 있는 편이고 수업의 수식 코드는 계속 반복되기에 조금 어렵다면 처음부터 끝까지 한번 학습하고 다시 한번 학습해 보는걸 추천드립니다. ^^ [질문] parallaxSpeed를 1200로 초기화 하셨는데, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요 ? 숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다. 혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다. 답변 : start, end값을 생각하시는 걸 보니 패럴럭스 오픈소스 라이브러리 개념으로 접근하셔서 혼동스러워 하는 것 같네요~! 물론 코드를 조금 응용하면 start, end값으로 작동하도록 변경할 수 있습니다. 수업에서는 섹션 .sec_parallax 엘리먼트를 기준으로해 백분율(패럴럭스 시간)을 구하는데요. 이 엘리먼트의 위치값을 계산해 parallaxThisTop에 담았고 이 값이 패럴럭스 시작 기준이 되는 겁니다. ^^ 그리고 parallaxSpeed 값으로 백분율 시간을 조절해 패럴럭스 요소들이 조금 더 빨리 이동하고 느려지도록 조절하고 있는데요. 이 부분이 end값(거리)이라고 생각하면 될 것 같습니다. 어떻게 보면 start, end 값과 비슷하지만 이 예제에선 스피드 개념에 더 가깝다고 생각하면 될 것 같아요. parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음 [질문] 여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?, 이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요? 강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요 답변 : 이 부분은 위 답변에서 설명한 부분입니다. parallaxPercent 백분율을 구하는 부분이예요 :) 수업에서 여러 차례 나오는데 이 백분율 값을 조정해 패럴럭스 시간을 구하고 이동할 거리를 백분율 값에 곱해 인터렉션을 구현하는 겁니다. :) var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다. [질문] 패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요? 변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요? 패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요? var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드 var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다 답변 : 네 요소는 이미지가 맞습니다. :) css 코드를 보면 이미지는 position: absolute로 위치를 잡아 두었고 js코드를 보면 translate로 위치값을 조정하는데요. 이때 parallaxStartValue를 이용해 parallaxMoveDistance 값을 구했고 이 값이 이미지 요소에 translate 로 적용되어 이미지 위치를 조정하는 겁니다. (개발자 도구로 확인해 보면 스크롤 전에 parallaxStartValue 값이 이미지에 적용되어 있는 것을 확인할 수 있을 거예요.) 다시 한번 말씀드리는데 영상에 모두 나와있는 내용입니다. parallaxThisTop은 위에서 충분히 설명드렸네요 ^^; [질문] 첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요? parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음 parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함 답변 : 이 부분은 위에서 모두 설명한 내용입니다. :) 제 생각엔 의미 부여로 접근하기보다 로그를 찍어보며 수식, 작동 원리에 대한 이해로 접근하는 게 좋을 것 같네요 ^^ [질문] parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고, parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다. 답변 : 모든 변수명에 para~를 붙인 이유는 스코프 개념이 없는 초보자 분들을 위함입니다. :) 이 수업은 기초적인 부분보다는 수식과 스크롤 인터렉션에 대한 이해에 중점을 두고 있습니다 :) parallaxPercent 역시 위에서 충분히 설명했다고 생각이 드네요 ^^ 그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 138
질문&답변
2023.06.23
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
안녕하세요~! 먼저 해당 수업 자료를 다른곳에 올리면 안 됩니다~! 그리고 수업 외 다른 라이브러리를 사용한 질문은 받지 않습니다. 또한 말씀 하신 질문 내용이 이해하기가 조금 힘든데요 제가 이해한 바로는 background-attachment: fixed; 를 사용하고 싶다는 말씀인가요? 해당 수업에서는 이미지를 fixed 로 화면에 고정 해두고 Javascript로 위치를 이동 시키는 방식으로 구현되어 있습니다. 따라서 fixed를 absolute로 변경하면 화면에 고정된게 아니라 부모 엘리먼트 기준으로 위치가 정해 지기 때문에 absolute 로 변경하면 제대로 작동하지 않을겁니다. 또한 background-attachment: fixed; 로 구현이 가능 하다면 background-attachment: fixed; 를 이용해 구현해도 무방합니다. 코드를 작성할 때 정해진 건 없습니다. 본인이 생각하는대로 작성해 나가며 문제를 해결하는게 코딩의 재미 아닐까 하는 생각이 드네요~! 마지막으로 수강생님의 질문을 정확히 이해한건지 잘 모르겠지만 제가 생각한게 맞다면 css기초가 부족해 보입니다. css기초 부분을 다시한번 학습해 보시면 도움이 될 것 같아요 :) absolute, fixed 등의 정확한 차이점을 다시 한번 학습해 보시면 좋을 것 같습니다.
- 1
- 3
- 221
질문&답변
2023.04.27
화면 높이 관련 질문 있습니다.
안녕하세요 :) 해당 수업을 자세히보면 설명이 나와있는데요. 다시한번 말씀드리겠습니다~! :D 말씀하신대로 실질적으로 콘텐츠가 보이는 곳 을 화면 높이라 생각하시면 됩니다 그리고 섹션1의 높이는 아신다고 하셨죠? 섹션1높이 - 화면높이 = 실제 스크롤 거리 라고 생각하시면 됩니다 :)
- 0
- 1
- 260
질문&답변
2023.04.19
선생님
안녕하세요 :) 네 웹사이트를 제작해도 됩니다. 압축된 수업 예제 폴더를 열어보면 lisence.txt 파일에 관련된 내용이 들어있습니다. :)
- 0
- 1
- 229
질문&답변
2023.04.11
수리검 방지턱(?) 현상
안녕하세요 :) 1.문제: 문의 주신 내용은 css의 아주 기초적인 부분인데요! .game_app 스타일을 확인해보면 min-width 라는 속성이 있습니다. min-width 속성은 요소의 최소 너비 를 설정하는 속성으로 현재 1280px 이 최소 넓이로 설정되어 있고 수강생님의 모니터 또는 브라우저의 해상도 크기가 1280px보다 작다면 스크롤바 가 생길 수 있습니다. 2.해결법 : min-width 속성 을 1280px 보다 작게( 모니터 해상도 보다 작게 ) 수정하면 스크롤바가 생기지 않을 거예요 :) 3.기타: 최소 넓이를 설정한 이유는 게임을 원활하게 진행 하기 위한 최소 넓이로 제가 설정한 값입니다. 수강생님이 만드는 게임이 예를들어 780px 에서도 원활하게 진행 할 수 있다면 780px로 지정해도 무관합니다. 그럼 또 다른 궁금증이 생기면 문의주세요 :)
- 0
- 2
- 248