<복습>
https://wook-2124.tistory.com/98
[JavaScript] #1.0 Project Setup (#코딩공부)
https://youtu.be/rE8eZktwyV8 https://github.com/wook2124/Paint_JS wook2124/Paint_JS Painting Board made with Vanilla JS. Contribute to wook2124/Paint_JS development by creating an acco..
wook-2124.tistory.com
<준비물>
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
https://meyerweb.com/eric/tools/css/reset/
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
<코드기록>
<!-- index.html에 canvas 추가하고 -->
<canvas id="jsCanvas" class="canvas"></canvas>/* style.css로 reset.css를 import하고 꾸며줌 */
@import "reset.css";
body {
background-color: #58b489;
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: 25px;
}
.canvas {
width: 500px;
height: 500px;
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);
}
<!-- div.controls_color*9 으로 한번에 9개의 코드를 작성함 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>PaintJS</title>
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls_colors" id="jsColors">
<div class="controls_color" style="background-color: #2c2c2c;"></div>
<div class="controls_color" style="background-color: white;"></div>
<div class="controls_color" style="background-color: #ff3b30;"></div>
<div class="controls_color" style="background-color: #ff9500;"></div>
<div class="controls_color" style="background-color: #ffcc00;"></div>
<div class="controls_color" style="background-color: #4cd963;"></div>
<div class="controls_color" style="background-color: #5ac8fa;"></div>
<div class="controls_color" style="background-color: #0579ff;"></div>
<div class="controls_color" style="background-color: #5856D6;"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>/* .(class)controls 안의 .(class) controls_colors를 꾸며줌
9개의 색깔의 행을 flex로 일렬로 만들고 */
.controls .controls_colors {
display: flex;
}
/* .(class)controls의 margin-top을 60px정도 띄어주고 */
.controls {
margin-top: 60px;
}
/* border-radius를 width(폭)의 반인 25px로 동그랗게 만들고
cursor를 갖다대면 pointer로 바뀌게함 */
.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);
}
1. Reset CSS 가져오기
https://meyerweb.com/eric/tools/css/reset/
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
2011년에 만들어진 코드지만, 지금까지 통용되고 있다. reset.css를 만들고 홈페이지에서 코드를 복붙하면 된다.
2. canvas 만들기
style.css에서 reset.css을 import(수입)하고 body의 background-color를 꾸며줬다.
index.html, body에 canvas로 id="jsCanvas" class="canvas"를 추가해줬다.
index.html의 body와 .(class)canvas를 꾸며줬다.
JavaScript에서 index.html을 불러올 때는 보통 id를 불러오지만, css는 class를 불러온다.
index.html을 style.css로 꾸며준 결과 canvas가 생겼다.
3. 9개의 canvas color 만들기
canvas color를 control해줄 div class="controls"를 만들고, 그 안에 또 div class="controls_colors" id="jsColors"로 9개의 color를 한번에 생성하는 div.controls_color*9를 쓰면
이렇게 동일하게 적은 div class="controls_color" 코드 9개가 써진다.
9개의 color를 각각 정해주고
style.css에서 .(class)controls_colors 안에 있는 .(class)controls_color 9개의 color를 꾸며줬다.
4. style.css로 이쁘게 꾸미기
.(class)controls 안의 .(class)controls.colors, 즉 9개의 color가 모여있는 colors 전체를 display: flex로 설정하니 9개의 color가 행(row)로 정렬됐다.
마지막으로 .(class)controls로 9개의 color를 포함하는 control 전체를 margin-top으로 60px정도 canvas와 띄우고, 9개의 color 각각의 네모칸을 border-radius로 width(폭)의 반인 25px로 설정해서 동그랗게 만들고, 각 color에 cursor를 갖다대면 pointer로 나오게 설정했다.
※ 코로나19 조심하세요!!!!
'JavaScript > Paint JS' 카테고리의 다른 글
| [JavaScript] #2.2 Recap! (#코딩공부) (0) | 2020.04.24 |
|---|---|
| [JavaScript] #2.1 2D Context (#코딩공부) (0) | 2020.04.18 |
| [JavaScript] #2.0 Canvas Events (#코딩공부) (0) | 2020.04.16 |
| [JavaScript] #1.2 Styles part Two (#코딩공부) (0) | 2020.04.14 |
| [JavaScript] #1.0 Project Setup (#코딩공부) (0) | 2020.04.12 |
댓글