[그림판 앱] 1. 프로젝트 소개

Vanilla JavaScript를 이용하여 웹에서 작동하는 그림판 앱을 구현하는 프로젝트이다. 데스크톱 프로그램 중에 그림판의 축소된 기능을 가진 앱이다.  접속 링크는 다음과 같다.

 

https://jb-painter.herokuapp.com/

Painter

 

완성된 형태는 다음과 같다.

 

 

기능은 크게 다섯 가지가 있다.

1. 캔버스의 크기를 조절하는 기능

2. 캔버스를 색칠하거나 그림을 그리는 기능

3. 결과물을 이미지로 저장하는 기능

4. 리셋 기능

5. 색 선택 기능

 

화면은 html 코드로 기능은 Vanilla JavaScript로 구현하였고 Heroku에 배포하였다.

 

소스 깃 주소

https://github.com/Jongbeom2/painter

Jongbeom2/painter

 

코드의 대부분은 노마드 코더의 강의를 참고하였고 추가적인 공부를 위해 몇 가지 기능을 추가하였다. 강의를 복기하고자 블로그 글로 정리를 시작하였다.

 

https://academy.nomadcoders.co/

Academy

[전체 글]

[그림판 앱] 5. 마무리

[그림판 앱] 4. app.js

[그림판 앱] 3. reset.css, style.css

[그림판 앱] 2. index.html

[그림판 앱] 1. 프로젝트 소개