Juun의 개발 기록

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/8] [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/8] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] 2022.06.06 - [Programming/JavaScript].. puenti.tistory.com 이전 글에서는 그림을 그려주는 기능을 만들어보았다! 이번 포스팅은 paint 색상을 클릭하면 색상이 바뀌고 붓 사이즈를 바꿔주는 기능을 넣어보자 먼저 paint 색상을 바꾸는 기능부터 만들자 ..

2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/9] 저번 시간까지 기본적인 디자인은 마쳤다!! 이제 기본적인 디자인은 끝났으니 이제 JS를 해.. puenti.tistory.com 저번 포스팅에서 마우스로 좌표 기능까지 넣어봤다! 이번 포스팅은 그림을 그릴 수 있게 기능을 넣어보자! app.js const canvas = document.getElement..

2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/8] [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스.. puenti.tistory.com 저번 시간까지 기본적인 디자인은 마쳤다!! 이제 기본적인 디자인은 끝났으니 이제 JS를 해보자! 먼저 ..

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] 3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼.. puenti.tistory.com 이전 글에서 색상까지 추가해봤다!! 이제 이걸 저장하고 채워줄 버튼과 붓 두께를 설정해줄 range를 만들어보자! 먼저 index.html에서 save, fill 버튼과 range를 만들어준다 Fill Save 그 다음은 st..

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] 3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼겸 JS로 간단한 그림판을 한 번 만들어볼게요!! 먼저 index.html, app.js, styles.css 를 만들어줄게요! styles.css @import "reset.css"; bo.. puenti.tistory.com 이전 글에서는 캔버스를 만들어봤다 이제 색칠할 물감을 추가해보자!! index.html 9가지 색상을 넣어준다! styles.css @import "reset.css"; body { background-color: #f6f9f..

3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼겸 JS로 간단한 그림판을 한 번 만들어볼게요!! 먼저 index.html, app.js, styles.css 를 만들어줄게요! styles.css @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; display: flex; flex-direction: column; align-items: center; padding: 50px 0px; } .ca..