월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
우측의 navigator 클릭 시 이동하는 곳에 대해 질문이 있습니다
안녕하세요~ 강의를 듣다가 질문이 있어서 여쭤봅니다 : ) 우측의 navigator 를 클릭할 때 원하는 top 에 가고 싶은 게 문제인데요, 현재는 scrollTo 의 top 값이 각 섹션의 offsetTop 으로 지정이 되어 있어서 섹션이 시작하는 상단으로 이동을 하잖아요~ 그런데 이 부분을 scroll 할 때처럼 화면의 절반이 지났을 경우의 위치로 오게 할 수 있는.. 좋은 방법이 있을까요? 일단 제가 테스트를 해본건 1) 각 섹션의 offsetTop 값에 윈도우 창의 높이 1/2값을 빼주는 방법 -> 섹션 중간에 멈춰서 뭔가 부자연스러워 보여서 패스했어요. window.scrollTo({ top: section[pageNum].offsetTop - window.outerHeight/1.5, behavior: 'smooth' }); 2) offsetTop 값에 img 높이값만큼 고정값을 선언하여 빼주는 방법 -> 원하는 높이로 이동하지만, 고정값으로 선언한거라 유연하게 대응이 불가능할 것 같다는 생각입니다. window.scrollTo({ top: section[pageNum].offsetTop - 258, behavior: 'smooth' }); 혹시 이럴 경우.. img 높이값을 변수로 받아와서 유동적으로 처리를 해주면 되는걸까요? ... 질문을 하다가 정리가 된 것 같은데 😅 다른 좋은 방법이 있을까요~??
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일에서 작동이 안되는 것 같아요.
올려주신 파일 PC에서는 잘 구현이 됩니다. 모바일에서는 디바이스를 기울여도 적용이 안되네요. 확인 디바이스 - 아이폰 12 (사파리, 크림) - 아이패드 미니 5 (사파리, 크림) - 갤럭시 노트9 (기본 인터넷, 크롬) 아래는 올려주신 소스 제 사이트에 업로드한 링크입니다 입니다. 확인 부탁드리겠습니다. (__)
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
z-index 질문 드립니다
innerwrap에 z-index가 높게 설정되어있어서 설명이 항상 사진보다 앞에 올 줄 알았는데 스크롤을 사진만 나오도록 멈췄다가 설명이 나오도록 내리면 사진이 설명을 가리더라구요? 일단 사진에 z-index를 설명 z-index보다 작게 잡아서 해결을 했는데, 왜 반대로 가렸는지는 이해할 수 없었습니다. z-index를 따로 설정해두지 않으면 default가 0인거 아니였나요?
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
outerheight/2가 생각했던 전체 창 크기의 절반보다 컸던 이유
outerheight가 전체 창크기라고 알려주셨는데 검색창이랑 제목표시줄까지 포함하는 창이였구요. 실제 브라우저에서 CSS가 보이는 화면을 포함하는 창의 크기는 innerheight였습니다. 저처럼 헷갈리시는 분이 있으실까봐 공유합니다. [javascript] 윈도우 창 크기 (window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight) - 종종 올리는 블로그 (tistory.com)
- 미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
CD 플레이어 관련 질문드립니다.!
현재 CD 플레이어 강의 부분을 학습하고 있습니다. vscode에 live sass compiler 플러그인을 설치 하였고 scss 파일을 css 파일로 컴파일하는 것 까지 성공을 했습니다. 하지만 작성한 css가 전혀 적용되지 않고 있는 상황입니다. 이를 어떻게 해결해야 하는지 궁금합니다!
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
믿고보는 코딩일레븐 강의
이번 강의를 손꼽아 기다렸습니다. 완강하는 그날 까지 코딩일레븐님 잘부탁드립니다.
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
질문 있습니다
위와같이 하고 있는데요. 화살표가 0에 위치했다가 다시 돌아가게끔 해주고싶은데, 처음에 400도가 나왔다고 하면 해당 위치에서 다음 값의 위치로만 움직입니다. 해당 이슈를 해결하려면 어떻게 해야할까요..? 아래 코드 첨부했습니다! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 400px; height: 400px; background: red; border-radius: 50%; display: flex; justify-content: center; align-items: center; } h1 { font-size: 80px; transition: all 600ms cubic-bezier(1, -0.06, 0.985, 1.01); } </style> </head> <body> <div> <h1>↑</h1> </div> <button>동작</button> <script> const btn = document.querySelector("button"); const arrow = document.querySelector("h1"); const arrowRotate = (aLot = 5) => { const rotateValue = aLot * 360 + Math.ceil(Math.random() * 360); arrow.style.transform = `rotate(${rotateValue}deg)`; }; const arrowInit = () => { arrow.style.transition = "0"; arrow.style.transform = `rotate(0deg)`; }; const moveArrow = (aLot) => { arrowInit(); setTimeout(() => { arrowRotate(aLot); }, 1000); }; btn.addEventListener("click", () => { moveArrow(); }); </script> </body> </html>
- 해결됨인터랙티브 개발 실무 끝장내기 [역량 강화편]
강의 올려 주셔서 너무 너무 감사합니다!
칼 구매 했습니다!