세팅
프로젝트 파일의 전체 구조는 다음과 같다. app.js, index.html, reset.css, style.css가 앞으로 작성할 파일들이다.
우선 server를 생성하고 시작하기 위한 초기 세팅을 한다.
npm init이를 실행하면 package.json이 생성된다. 이후 http-server를 다운받는다.
npm i http-server서버를 실행할 수 있도록 package.json에 스크립트를 작성한다. package.json은 다음과 같다.
{
"name": "painter",
"version": "1.0.0",
"description": "nomadcoders",
"main": "app.js",
"scripts": {
"start": "http-server -c-1"
},
"dependencies": {
"http-server": "^0.12.3"
},
"devDependencies": {},
"repository": {
"type": "git",
"url": "git+https://github.com/Jongbeom2/painter.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Jongbeom2/painter/issues"
},
"homepage": "https://github.com/Jongbeom2/painter#readme"
}
npm start을 입력하면 서버가 실행되며 localhost:8080에서 결과물을 확인할 수 있다. 다음으로는 index.html을 작성한다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meata charset="utf-8"/>
<meta name="viewport"content="width=device-width initial-scale=1.0"/>
<link rel ="stylesheet" href="reset.css"/>
<link rel ="stylesheet" href="style.css"/>
<title>JS Painter</title>
</head>
<body>
<div class="title">JS Painter</div>
<div class="controls">
<div class="controls__size">
<div class = "text">Width :</div>
<input class = "controls__width" type="number" id="jsWidth" value="600"/>
<div class = "text">Height :</div>
<input class = "controls__height" type="number" id="jsHeight" value="500"/>
<button id="jsResize">Resize</button>
</div>
</div>
<div class="content">
<canvas id="jsCanvas" class="canvas"></canvas>
</div>
<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">Fill</button>
<button id="jsSave">Save</button>
<button id="jsReset">Reset</button>
</div>
<div class="controls__colors" id="jsColors">
<div class="controls__color jsColor" style="background-color: #2c2c2c"></div>
<div class="controls__color jsColor" style="background-color: white"></div>
<div class="controls__color jsColor" style="background-color: #ff3b30"></div>
<div class="controls__color jsColor" style="background-color: #ff9500"></div>
<div class="controls__color jsColor" style="background-color: #ffcc00"></div>
<div class="controls__color jsColor" style="background-color: #4cd963"></div>
<div class="controls__color jsColor" style="background-color: #5ac8fa"></div>
<div class="controls__color jsColor" style="background-color: #0579FF"></div>
<div class="controls__color jsColor" style="background-color: #5856D6"></div>
<label for="jsMyColorControl"><div class="controls__color jsColor" id = "jsMyColor" style="background-color: white">My</div></label>
<input type="color" id="jsMyColorControl" name="jsMyColorControl" value="#ffffff" style="display:none">
</div>
</div>
<script src="app.js"></script>
</body>
</html>사용하는 css 파일은 reset.css과 style.css이고 javascript 파일은 app.js이다. Body 내부는 세 컴포넌트들로 구성되어 있다. class는 css에서 선택자의 속성을 위해 설정하였고 id는 js에서 선택자의 속성을 위해 설정하였다.
첫 번째 컴포넌트는 canvas의 사이즈를 변경하는 control 컴포넌트이다. 설정할 canvas의 width와 height를 input에 입력하고 button을 클릭하면 canvas의 사이즈를 변경하게 된다.
두 번째 컴포넌트는 canvas가 존재하는 content 컴포넌트이다. 위에서 설정한 사이즈에 맞는 canvas가 존재하며 마우스의 입력에 따라 그림을 그리게 된다.
마지막 컴포넌트는 canvas에 그리는 옵션을 설정하는 control 컴포넌트이다. jsRange라는 id를 가진 input은 canvas에 그림을 그릴 때의 굵기를 설정하는 위젯이다. 0.1부터 5 사이의 값을 가지고 기본적으로는 2.5를 가진다. 변경 가능한 크기는 0.1 단위이다.
jsMode라는 id를 가진 button을 클릭하면 canvas에 그림을 그리는 paint 모드에서 canvas에 색으로 채우는 fill 모드로 변경된다.
jsSave라는 id를 가진 button을 클릭하면 canvas에 그려진 그림을 파일로 저장한다.
jsReset이라는 id를 가진 button을 클릭하면 canvas와 설정을 초기화한다.
jsColors라는 id를 가진 div 내부에 위치한 div를 클릭하면 색이 변경된다.
기능의 상세 구현은 app.js에 있어 다음 글에서 설명하도록 하겠다.
[전체 글]
'개인 개발 프로젝트 > 그림판 앱' 카테고리의 다른 글
| [그림판 앱] 5. 마무리 (0) | 2020.04.05 |
|---|---|
| [그림판 앱] 4. app.js (0) | 2020.04.05 |
| [그림판 앱] 3. reset.css, style.css (0) | 2020.04.05 |
| [그림판 앱] 1. 프로젝트 소개 (2) | 2020.03.09 |