[그림판 클론코딩] 0. JS로 그림판도 만들 수 있다고?

# 학습 내용 정리/Paint CloneCoding(JS) / / 2021. 5. 20. 00:53

지난번에 크롬 앱 클론코딩과 2주 챌린지를 하면서 JS에 대해 포스팅을 올렸습니다. 챌린지 과정을 마치고 VanillaJS 관련 기초 강의가 하나 더 만들어져서 우테캠 2차 코딩테스트 공부용으로 바로 수강하려고 했으나 상황이 여의치 않아서 이제서야 강의를 수강하게 되었습니다.

 

이번 VanillaJS 클론코딩은 그림판 클론코딩 강의입니다. 텍스트로만 커뮤니케이션을 했던 지난 강의와 달리 조금 더 색다르게 마우스 클릭 등으로 컴퓨터와 상호작용을 할 수 있다는 점에서 재밌어보여서 지난번 클론코딩보다 하나하나 더 자세하게 기록을 남기며 수강해보려고 합니다!

 

그렇다면 바로 강의 정리로 들어가시죠!

 

※ 아래는 노마드코더 홈페이지에서 바닐라 JS로 그림판 만들기 강의를 무료로 수강할 수 있는 링크입니다!

 

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

Build a Painting App

nomadcoders.co

 

목차

    0. 기본 설정

    가장 먼저 JS를 사용하기 위한 기본 설정을 할 필요가 있습니다.

    강의 내에서 조금 특이한 점이라고 하면, README file과 .gitignore(node) 파일을 미리 생성하고 시작합니다.

    이는 Git clone을 사용하여 파일을 가져올 것이기 때문에 그렇고, 굳이 시작할 때 생성하지 않아도 따로 VSCode 상에서 만들어주셔도 무방합니다.

    레포지토리 생성을 비롯하여 Git clone 등 간단한 내용들을 아래 사진으로 갈음합니다!

    레포지토리를 생성합니다.
    깃 클론을 위한 주소를 복사합니다.
    VSCode에서 git clone을 진행합니다. cd로 폴더 안으로 접근합니다.

     

    이제 폴더 내부에서 사용할 파일들인 index.html, styles.css, app.js를 만들어줍니다.

    그리고 index.html에 기본적인 내용을 넣어줍시다. (styles.css, app.js와의 연결)

    Tip! 아래 내용을 작성할 때 ! 혹은 html:5를 입력하고 스페이스바를 누르면 편하게 입력하실 수 있습니다!

    <!-- index.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" /> <!-- style.css 연결 -->
    <title>PaintJS</title>
</head>
<body>
    <script src="app.js"></script> <!-- app.js 연결 -->
</body>
</html>

    1. Style 지정

    이번엔 styles.css를 만져봅시다!

    여기서는 reset CSS라는 CSS Tool을 이용합니다.

    VSCode에서 reset.css이라는 파일을 만들고, 아래 사이트에 들어가셔서 css부분을 복사하신 후 reset.css에 붙여넣어줍니다.

     

    CSS Tools: Reset CSS

    CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

    meyerweb.com

    그리고 이렇게 만든 reset.css를 styles.css에서 import합니다.

    import방법은 @import "reset.css" 형식으로 하면 됩니다. 다만 여기서 파일을 같은 디렉토리가 아닌 곳에 설정했다면 추가로 "" 안의 주소를 변경해주시면 됩니다!

    import 후에는 body 안에 기본적인 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
}

    2. Canvas 생성

    html과 css를 수정해가며 캔버스를 만들어봅시다.

    html 내에서 canvas 태그를 이용해 동적 렌더링을 허용하는 canvas를 만들어줄 수 있습니다.

    그리고 css 파일 내에서 .canvas 클래스를 통해 디자인을 바꿔줄 수 있죠.

    디자인을 어떻게 만드냐는 자신의 자유입니다! 자유롭게 꾸며보시죠! 

    <!-- index.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" /> <!-- style.css 연결 -->
    <title>PaintJS</title>
</head>
<body>
    <!-- JS를 편집할 때는 ID를 사용하고, css를 편집할 때는 class를 사용할 예정  -->
    <canvas id="jsCanvas" class="canvas"></canvas> <!-- class가 아닌 id를 사용해도 같다! -->
    <script src="app.js"></script> <!-- app.js 연결 -->
</body>
</html>
    /* 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-top: 50px;
}

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

    현재까지 결과물

    3. 색상 선택표 만들기

    html에 color를 선택할 수 있는 div를 만들고, color를 넣어두기 위한 div들을 만들어줍니다. controls 아래 controls__colors가 있고, 그 아래에 controls__color가 있다는 사실을 꼭 기억합시다!

    css에서는 역시 입맛에 맞게 바꿔주시면 됩니다.

    몇 가지 css 요소들에는 주석처리로 내용설명을 해 놓았으니 참고하시면 됩니다!

    <!-- index.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" /> <!-- style.css 연결 -->
    <title>PaintJS</title>
</head>

<body>
    <!-- JS를 편집할 때는 ID를 사용하고, css를 편집할 때는 cls를 사용할 예정  -->
    <canvas id="jsCanvas" class="canvas"></canvas> <!-- clas 아닌 id를 사용해도 같다! -->
    <div class="controls">
        <div class="controls__colors" id="jsColors"><!-- div를 한번에 여러개 생성할 때 div.class명*개수 엔터를 누르면 여러개 생성이 가능하다! -->
            <!-- 다중 커서 - 여러 줄 선택하는 방법은 ctrl+alt를 누른 채로 방향키를 눌러 영역을 선택합니다. -->
            <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:green"></div>
            <div class="controls__color" style="background-color:skyblue"></div>
            <div class="controls__color" style="background-color:blue"></div>
            <div class="controls__color" style="background-color:violet"></div>
        </div>
    </div>
    <script src="app.js"></script> <!-- app.js 연결 -->
</body>

</html>
    /* 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-top: 50px;
}

.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; /* 위쪽 마진 */
}

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

    현재까지 결과물

    4. 기능 버튼들 만들기

    채우기 버튼, 저장 버튼, Range 패널을 만들어 보겠습니다.

    색상 선택표를 만들었을 때와 똑같이 controls div 아래에 controls__btns와 controls__range를 만들어줍니다. 그리고 그 아래에 button들과 range를 추가해줍니다.

    css는 역시 입맛대로 바꿔주시고, 강의에 나온 내용에서 개인적으로 생소했던 부분은 주석으로 남겨놓았으니 참고하시기 바랍니다!!

    <!-- index.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" /> <!-- style.css 연결 -->
    <title>PaintJS</title>
</head>

<body>
    <!-- JS를 편집할 때는 ID를 사용하고, css를 편집할 때는 cls를 사용할 예정  -->
    <canvas id="jsCanvas" class="canvas"></canvas> <!-- clas 아닌 id를 사용해도 같다! -->
    <div class="controls">
        <div class="controls__range"> <!-- range 바 생성 --> 
            <!-- 0.1 간격으로 조정 가능하고, 최대 0.1부터 5까지 조정 가능, 초기값 2.5 -->
            <input type="range" id="jsRang" min="0.1" max="5" value="2.5" step="0.1"/>
        </div>
        <!-- 아래 div 생성 단축 명령어 div.controls__btns>button#jsMode+button#jsSave -->
        <!-- Fill, Save 버튼 생성 (Fill 클릭하면 Painting, 다시 클릭하면 Fill) -->
        <div class="controls__btns">
            <button id="jsMode">Fill</button>
            <button id="jsSave">Save</button>
        </div>
        <div class="controls__colors" id="jsColors"><!-- div를 한번에 여러개 생성할 때 div.class명*개수 엔터를 누르면 여러개 생성이 가능하다! -->
            <!-- 다중 커서 - 여러 줄 선택하는 방법은 ctrl+alt를 누른 채로 방향키를 눌러 영역을 선택합니다. -->
            <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:green"></div>
            <div class="controls__color" style="background-color:skyblue"></div>
            <div class="controls__color" style="background-color:blue"></div>
            <div class="controls__color" style="background-color:violet"></div>
        </div>
    </div>
    <script src="app.js"></script> <!-- app.js 연결 -->
</body>

</html>
    /* 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; /* top과 bottom에 각각 50px씩 패딩 추가 */

}

.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; /* controls의 flex들은 세로로 배치 */
    align-items: center;
}

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

.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__btns{
    margin-bottom: 30px;
}

.controls__btns button {
    all: unset;
    cursor: pointer;
    background-color: white;
    padding: 5px 0px;
    width: 80px;
    text-align: center;
    border-radius: 5px; /* 외곽선 부드럽게 만들기 */
    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: 800; /* 폰트 굵기 */
    font-size: 12px;
}

.controls__btns button:active{ /* 클릭하면 0.98만큼 줄어듦! 클릭시 액션 넣는 css! */
    transform: scale(0.98);
}

    현재까지 진행된 모습!

    이번 포스팅에서는 JS의 바탕이 되는 html과 css를 작성하였습니다.

    다음 포스팅부터는 드디어 VanillaJS를 본격적으로 사용하겠네요! 기대됩니다 ㅎㅎ

    그렇다면 다음 포스팅에서 뵙도록 하겠습니다! 감사합니다!!

    반응형
    저작자표시
    • 네이버 블로그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기
    # 학습 내용 정리/Paint CloneCoding(JS) 관련 글
    글 더보기

    티스토리툴바