Today I Learned #20

loopbacksealยท2021๋…„ 1์›” 26์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
11/16
post-thumbnail

paintJS


๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉ์ž๊ฐ€ ๋งˆ์šฐ์Šค๋กœ ์ƒ‰์ƒ์„ ์ •ํ•˜๊ณ , canvas ์œ„์— ๋“œ๋ž˜๊ทธ๋ฅผ ํ†ตํ•˜์—ฌ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๊ณ , fill์„ ํ†ตํ•ด ์›ํ•˜๋Š” ์ƒ‰์ƒ์œผ๋กœ ์ฑ„์›Œ๋„ฃ๊ณ , ๊ทธ๋ฆฐ ๊ทธ๋ฆผ์„ ํŒŒ์ผ๋กœ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ vanilla JS๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ฒ ๋‹ค.

index.html

html ํŒŒ์ผ์˜ ์„ธํŒ…์€ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค. <canvas id="jsCanvas" class="canvas">๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” canvas๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ , id์ธ "jsCanvas"๋ฅผ ํ†ตํ•ด Javascript๋กœ ํ•ด๋‹น element์— ์ ‘๊ทผํ•˜๊ณ , class์ธ "canvas"๋ฅผ ํ†ตํ•ด css๋ฅผ ์ œ์–ดํ•˜์˜€๋‹ค. ์ดํ›„์—๋Š” ์„ ํƒ์„ ํ•˜๋„๋ก ํ•˜๋Š” <div class="controls"> ์•ˆ์— ์ƒ‰์ƒ์„ ์„ ํƒํ•˜๋„๋ก ํ•˜๋Š” <div class="controls__colors" id="jsColors">๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๊ณ , ๊ทธ ์•ˆ์— 9๊ฐœ์˜ <div class="controls__color" style="background-color: #2c2c2c"></div>๋ฅผ ๊ฐ๊ฐ์˜ color๋ฅผ ์ฃผ์–ด ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ์—ˆ๋‹ค.

์ดํ›„์—๋Š” <link rel="stylesheet" href="styles.css" />์„ ํ†ตํ•ด css ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•ด์ฃผ์—ˆ๊ณ , <script src="app.js"></script>์„ ํ†ตํ•ด javascript ํŒŒ์ผ์„ ์—ฐ๊ฒฐํ•˜์˜€๋‹ค.

reset.css

๋ณธ๊ฒฉ์ ์œผ๋กœ css๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์ „์—, reset css๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ณต์‚ฌ/๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•˜์—ฌ ์ถ”ํ›„์— ์ž‘์„ฑํ•  css ํŒŒ์ผ์— @import ํ•˜๋„๋ก ํ•˜์˜€๋Š”๋ฐ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ๊ฑฐ์น˜๋Š” ์ด์œ ๋Š” ๊ฐ๊ฐ์˜ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๊ธฐ๋ณธ์ ์œผ๋กœ ์ •ํ•ด์ ธ์žˆ๋Š” css ํŠน์„ฑ์ด ์žˆ๋Š”๋ฐ, ๊ทธ๋Ÿฌํ•œ ํŠน์„ฑ์„ ์ดˆ๊ธฐํ™” ์‹œ์ผœ์ค€ ํ›„ ๋‚˜์˜ css๋ฅผ ์ ์šฉ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณผ์ •์„ ์ง„ํ–‰ํ•œ๋‹ค. ๋‹ค์–‘ํ•œ ๋ฒ„์ „์˜ css reset์ด ์กด์žฌํ•˜์ง€๋งŒ, ์•ž์„  ๋งํฌ๋กœ ์—ฐ๊ฒฐ๋œ css reset์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

styles.css

index.html์˜ ์„ธ๋ถ€์ ์ธ css๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด ์ƒ์„ฑํ•œ styles.css์˜ ์ฒซ๋ฒˆ์งธ ์ค„์—๋Š” ์•ž์„œ ์ž‘์„ฑํ•œ reset.css๋ฅผ @import "reset.css"; ๋ฅผ ํ†ตํ•ด import ํ•ด์ฃผ์—ˆ๋‹ค.

body {
  background-color: #f9f6fc;
  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;
}

๋ฅผ ํ†ตํ•ด body์˜ ๋‚ด์šฉ์„ ์ง€์ •ํ•ด์ฃผ์—ˆ๊ณ , column์„ ํ†ตํ•ด ์„ธ๋กœ๋กœ, center๋ฅผ ํ†ตํ•ด์„œ ๊ฐ€์šด๋ฐ์— ์•„์ดํ…œ์ด ์ •๋ ฌ๋˜๋„๋ก ํ•˜์˜€๋‹ค.

.canvas์—์„œ๋Š” width์™€ height๋ฅผ 600px๋กœ ์ •ํ•ด์ฃผ๊ณ , border-rasdius๋Š” 15px๋กœ ์ง€์ •ํ•˜์—ฌ ๋๋ถ€๋ถ„์ด ๋‘ฅ๊ธ€๋‘ฅ๊ธ€ํ•˜๊ฒŒ ์ง€์ •๋˜๋„๋ก ํ•˜์˜€๋‹ค. box-shadow ํŠน์„ฑ์„ ํ†ตํ•ด์„œ ๊ธฐ์กด์˜ body์™€ canvas๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€๋‹ค.

.controls์™€ .controls__colors์—์„œ๋Š” display:flex;๋ฅผ ํ†ตํ•ด์„œ item๋“ค์ด ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌ๋˜๋„๋ก ํ•˜์˜€๊ณ  (flex-direction์˜ ๊ธฐ๋ณธ๊ฐ’์ธ row) .control__colors์™€ .control__color์˜ ํฌ๊ธฐ๋Š” width์™€ height ๋ชจ๋‘ 50px๋กœ ์ •์‚ฌ๊ฐํ˜• ๋ชจ์–‘์—,border-radius ๊ฐ’์„ ๊ทธ ์ ˆ๋ฐ˜์— ํ•ด๋‹นํ•˜๋Š” 25px๋กœ ์ฃผ์–ด ์›ํ˜•์˜ ์•„์ด์ฝ˜์ด ํ˜•์„ฑ๋˜๋„๋ก ํ•˜์˜€๋‹ค.


์‹คํ–‰๊ฒฐ๊ณผ

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€