[Nomad Coders] 바닐라 JS로 그림판 만들기 1

SMONGS·2022년 5월 15일
js

Nomad Coders

목록 보기
1/1

소개

노마드 코더의 바닐라 JS로 그림판을 만드는 개꿀 무료 강의로 그림판을 만들어 보기로 했다.

노마드 코더 바닐라 JS로 그림판 만들기 <- 바로가기

42%만 들었는데, 강의가 알기 쉬우면서 재미있다!

이 블로그를 보는 사람 중 해보지 않았다면 적극 추천!!

현재 진행

<canvas> 태그를 사용한 그릴 수 있는 판을 만들었다.

(벌써부터 재밌고~)

추가로 파일을 저장하거나 불러올 버튼(button 태그)을 만들고, 붓 크기 조절바(input 태그)도 만들었다.
색을 바꿀 버튼(div 태그)도 만들면서 css로 위치 조정했다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>PaintJS</title>
</head>
<body>
    <canvas id="jsCanvas" class="canvas"></canvas>
    <div class="controls">
        <div class="controls_range">
            <input type="range" id="jsRange" min="0.1" max="5.0" value="2.5" step="0.1">
        </div>
        <div class="controls_btns">
            <button id="jsMode">File</button>
            <button id="jsSave">Save</button>
        </div>
        <div class="controls_colors" id="jsColors">
            <div class="controls_color" style="background-color: black;"></div>
            <div class="controls_color" style="background-color: white;"></div>
            <div class="controls_color" style="background-color: red;"></div>
            <div class="controls_color" style="background-color: orange;"></div>
            <div class="controls_color" style="background-color: yellow;"></div>
            <div class="controls_color" style="background-color: rgb(64, 255, 47);"></div>
            <div class="controls_color" style="background-color: rgb(82, 223, 228);"></div>
            <div class="controls_color" style="background-color: rgb(41, 115, 226);"></div>
            <div class="controls_color" style="background-color: rgb(95, 38, 230);"></div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

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;
}

.canvas{
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls{
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls .controls_btns{
    margin-bottom: 30px;
}

.controls_btns button{
    all: unset;
    cursor: pointer;
    background-color: white;
    padding: 5px 0px;
    width: 80px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color:rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}

.controls_btns button:active{
    transform: scale(0.98);
}

.controls .controls_colors{
    display: flex;
}

.controls_colors .controls_color{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls .controls_range{
    margin-bottom: 30px;
}

정리

1. Canvas

마우스로 그림 그려지는 곳

<canvas>

html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트

  • 비트맵 그래픽 지원
  • width와 height 두 속성만 존재
  • id 값으로 접근 할 수 있어야 함
<canvas id="jsCanvas" class="canvas"></canvas>
.canvas{
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

2. 색상 파레트

그리는 색상 바꾸는 파레트

div 태그

  • back-ground-color 옵션 추가
  • 색상 선택
    - rgba(R, G, B, 투명도)
<div class="controls_colors" id="jsColors">
  <div class="controls_color" style="background-color: black;"></div>
  <div class="controls_color" style="background-color: white;"></div>
  <div class="controls_color" style="background-color: red;"></div>
  <div class="controls_color" style="background-color: orange;"></div>
  <div class="controls_color" style="background-color: yellow;"></div>
  <div class="controls_color" style="background-color: rgb(64, 255, 47);"></div>
  <div class="controls_color" style="background-color: rgb(82, 223, 228);"></div>
  <div class="controls_color" style="background-color: rgb(41, 115, 226);"></div>
  <div class="controls_color" style="background-color: rgb(95, 38, 230);"></div>
</div>

3. 붓 크기

붓 크기를 조절하는 바

업로드중..

input 태그

  • type 중 range로 지정 -> 슬라이드 콘트롤
  • 콘트롤 바의 최소, 최대 크기를 지정 (min, max)
  • 현재 값 지정 (value)
  • 단계마다 오르는 값 지정 (step)
<input type="range" id="jsRange" min="0.1" max="5.0" value="2.5" step="0.1">

짧으면서 도움되는 강의 너무 개꿀~

profile
SMONGS
반갑습니당~😄

0개의 댓글