코딩이야기/JS-그림판 만들기6 [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. [JavaScript] - 그림판 만들기 ③ (모드바꾸기⑴) 그리기 모드, 그림 채우기 모드와 전체 배경색 채우기 모드 만들기 html에 버튼을 3개 만들어 준 후 JS에 변수를 선언합니다. 그 후 클릭이벤트 3개를 만들어 줍니다. 1 2 3 4 5 6 7 8 그리기모드 그림채우기 배경채우기 const paintingBtn = document.querySelector(".painting-btn"); const paintingFillBtn = document.querySelector(".painting-fill-btn"); const bgFillBtn = document.querySelector(".bg-fill-btn"); cs 1 2 3 paintingBtn.addEventListener("click", paintingBtnClick); paintingFillB.. 2022. 7. 25. 이전 1 2 다음
