노마드 코더 (바닐라js로 그림판 만들기)

html5의 canvas를 활용한 그림판 만들기

 

canvas에 중점보다는 js와 css에 중점을 두고 구현해봄

 

 

range에 대해 처음 알게됨!!!

<input type="range" 
	min //최솟값
    max //최댓값
    value //기본값
    step //증감수치
 >

 

 

css 에서는 @import "reset.css" 로 css 리셋

 

display: flex;
flex-direction: column;
align-items: center;
cursor:pointer;

 

위와 같이 간단한 css 적용

 

 

 

js에서는 canvas에 대한 내용 제외 한다면

 

Array.from(colors).forEach(color=> 
	color.addEventListener("click",changeColor)); //배열로 변환시켜서 클릭시 함수호출

 

 

grimpan.css

0.00MB

grimpan.html

0.00MB

grimpan.js

0.00MB

 

 

nomadcoders.co/javascript-for-beginners-2/lobby

Watch Now - 노마드 코더 Nomad Coders