javascript13 [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. [JavaScript] - 그림판 만들기 완성! 지금까지 한 기능들을 종합해서 이쁘게 css로 꾸며줍니다. 완성! 2022. 7. 25. [JavaScript] - 그림판 만들기 ⑤ (이미지 불러오기) html에 input을 만들고 type을 file로 설정합니다. 동영상이나 다른 파일이 들어오지 못하게 accept 속성을 이용합니다. JS에 변수 선언을 하고 change 이벤트를 만들어 줍니다. 1 2 3 const fileInput = document.querySelector("#file"); fileInput.addEventListener("change", fileChange); cs change이벤트 함수에 console.dir(event.target);을 해보면 사용자가 선택한 이미지 파일이 브라우저에 들어가 있는 것을 확인할 수 있습니다. FileList에서 첫번째 파일을 변수로 선언합니다. (여러 개를 넣을 수 있는 multiple 속성을 input에 추가하면 여러 개를 업로드할 수도 있습.. 2022. 7. 25. [JavaScript] - 그림판 만들기 ④ (모드바꾸기⑵) 저장버튼, 화면 지우기 버튼, 지우개 버튼 만들기 html에 버튼 3개를 만들고 JS에서 변수를 선언해줍니다. 그 후 클릭이벤트를 각각 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //-------------html----------------// const saveBtn = document.querySelector(".save"); const newBtn = document.querySelector(".new-btn"); const eraserBtn = document.querySelector(".eraser-btn"); saveBtn.addEventListener("click", saveClick); //저장하기 newBtn.addEventListener("c.. 2022. 7. 25. 이전 1 2 3 4 다음
