공부 정리/jsChallenge29 js challenge day 24 sticky Nav Code 배운 점 & 느낀 점 sticky예제를 구현하는 과제였습니다. sticky가 fixed랑 유사한점이 많은데, 역시 sticky는 fixed로 구현할 수 있었습니다. nav의 offsetTop을 저장한 다음, 스크롤을 내릴때마다 fixNav함수를 호출하여 scrollY가 topOfNav보다 커질때 nav를 fixed하는 방식을 사용했습니다. 2023. 2. 24. js challenge day 23 speech Synthesis Code 배운 점 & 느낀 점 SpeechSynthesisUtterance라는 webApi를 이용해서 text를 읽어주는 과제였습니다. 속도나, 억양을 선택할 수 있었습니다. 재밌는 과제였고, 언젠간 쓸날이 있지않을까 ? 하는 생각이 들었습니다.. 2023. 2. 23. js challenge day 22 Following Along Nav Code 배운 점 & 느낀 점 글에서 특정 글에 마우스를 가져다 대면 css를 입혀주는 과제였습니다. 이 과제를 하면서 배운 점은 2가지 입니다. 1. getBoundingClientRect()는 요소의 크기를 가져오는데 매우 유용한 메소드 입니다. 2. append와 appendChild는 모두 DOM에서 사용되는 메소드인데, append는 appendChild와 다르게, 여러요소를 한번에 삽입할 수 있고 DomString을 추가할 수 도 있습니다. ex) const name = 'John'; const age = 30; document.body.append(`My name is ${name} and I am ${age} years old.`); 2023. 2. 22. js challenge day 21 Geolocation Code 배운 점 & 느낀 점 사용자의 위치 정보를 이용해 나침반을 보여주는 과제였습니다. pc에서는 제한된 정보만 얻을 수 있으며 모바일에 더 많은 정보를 제공합니다. 2023. 2. 21. js challenge day 19 web-cam Code const video = document.querySelector(".player"); const canvas = document.querySelector(".photo"); const ctx = canvas.getContext("2d"); const strip = document.querySelector(".strip"); const snap = document.querySelector(".snap"); //비디오 엑세스 권한을 받아서 실행 const getVideo = () => { navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then((localMediaStream) => { console.log(.. 2023. 2. 16. js challenge day 18 Video Code 느낀 점 & 배운 점 video시간들을 모두 합쳐서 시간 / 분 / 초로 출력해주는 과제였습니다. 특별할건 없었고, split(":")으로 나누자말자 map으로 변환해주는 방법을 배울 수 있었습니다. 2023. 2. 15. 이전 1 2 3 4 5 다음 반응형
