2022.07.22(Fri)
[TIL] Day61
[SEB FE] Day62
: ์ฌ๋ฌ ๊ฐ์ CSS ์คํ์ผ์ ๋ถ๋๋ฝ๊ฒ ์ ํ์์ผ์ค
: ์๊ฐ ์์๋๋ก ์ ๋ฐํ๊ฒ ์ง์ฌ์ง ์ ๋๋ฉ์ด์ ์ ๋ง๋ค ์ ์์
/* % ๋จ์๋ก ์๊ฐ ์งํ์ ๋ฐ๋ฅธ ์ํ ์์ฑํด์ฃผ๊ธฐ! */
@keyframes lotate { /* Animation Name */
0% { /* = from */
transform : rotate(0deg)
}
50% {
transform : rotate(180deg) /* 180๋ ํ์ */
}
100% { /* = to */
transform : rotate(360deg) /* 360๋ ํ์ */
}
: ์ ๋๋ฉ์ด์ ์ค๊ฐ ์ํ๋ฅผ ์ง์ ํ๋ ์ด๋ฆ (@keyframes ๋ธ๋ก์ ์์ฑ)
#logo {
animation-name: lotate; // ์ ์ฉํ๊ณ ์ ํ๋ ์์์ ์ ๋๋ฉ์ด์
์ด๋ฆ ์์ฑํด์ฃผ๊ธฐ
}
: ํ cycle์ ์ ๋๋ฉ์ด์ ์ด ์ฌ์๋ ์๊ฐ ์ง์
#logo {
animation-duration: 3s; /* 3์ด ๋์ ์ ๋๋ฉ์ด์
์ฌ์ */
}
: ์ ๋๋ฉ์ด์ ์์ ์ง์ฐ์ํฌ ์๊ฐ ์ง์
#logo {
animation-delay: 0s; /* ์ฆ์ ์ฌ์ */
animation-delay: 3s; /* 3์ด ๋์ ์ ๋๋ฉ์ด์
์ฌ์ */
}
/* animation-name, duration, delay ์์ฑ์ ์ฐจ๋ก๋ก ํ๋ฒ์ ์ง์ ๊ฐ๋ฅ! */
#logo {
animation: lotate 3s 3s;
}
: ์ ๋๋ฉ์ด์ ์ฌ์ ๋ฐฉํฅ ์ง์
normal
: default. ์ฌ์ ๋๋๋ฉด ์ฒจ๋ถํฐ ๋ค์ ์ฌ์reverse
: ์ญ๋ฐฉํฅ ์ฌ์alternate
: ์๋ฐฉํฅ๋ถํฐ ์ญ๋ฐฉํฅ์ ๋ฒ๊ฐ์๊ฐ๋ฉฐ ์ฌ์alternate-reverse
: ์ญ๋ฐฉํฅ๋ถํฐ ์๋ฐฉํฅ์ ๋ฒ๊ฐ์๊ฐ๋ฉฐ ์ฌ์#logo {
animation-direction: alternate;
}
: ์ ๋๋ฉ์ด์ ์ด ๋ช ๋ฒ ๋ฐ๋ณต๋ ์ง ์ง์
infinite
- ๋ฌดํ ๋ฐ๋ณต#logo {
animation-iteraion-count: 3; /* ์ ๋๋ฉ์ด์
3๋ฒ ๋ฐ๋ณต */
}
: ์ ๋๋ฉ์ด์ ์ฌ์ ์ํ (๋ฉ์ถ๊ฑฐ๋ ๋ค์ ์ฌ์)
running
pause
#logo {
animation-play-state: pause;
}
: ์ค๊ฐ ์ํ๋ค์ ์ ํ์ ์ด๋ ํ ์๊ฐ ๊ฐ๊ฒฉ์ผ๋ก ์งํํ ์ง ์ง์ โ ์ ๋๋ฉ์ด์ ์งํ ์๋ ์ค์
ease
linear
ease-in
ease-out
ease-in-out
: ์ ๋๋ฉ์ด์ ์ ์ฌ์ ์ & ํ ์ํ ์ง์
none
: default. ์ฌ์์ค์ด ์๋ ๊ฒฝ์ฐ ์์ ์คํ์ผ ์ ์งforwards
: ์ฌ์์ค์ด ์๋ ๊ฒฝ์ฐ ๋ง์ง๋ง ํคํ๋ ์ ์คํ์ผ ์ ์งbackwards
: ์ฌ์์ค์ด ์๋ ๊ฒฝ์ฐ ์ฒซ ๋ฒ์งธ ํคํ๋ ์ ์คํ์ผ ์ ์งboth
: ์ฌ์ ์ ์ ์ฒซ ๋ฒ์งธ ํคํ๋ ์ ์คํ์ผ, ์ฌ์ ํ์ ๋ง์ง๋ง ํคํ๋ ์ ์คํ์ผ ์ ์ง: HTML <canvas>
ํ๊ทธ์ JS๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ๊ทธ๋ํฝ ์์ ์์ฑ ๊ฐ๋ฅ
<canvas id="canvas" width="500" height="500"></canvas>
// width, height ์์ฑ์ ๋ฌด์กฐ๊ฑด pixel๋ก ์ธ์!
// DOM์ผ๋ก width, height ์ค์ ํด์ฃผ๋ ๋ฐฉ๋ฒ
canvas.width = 50vw;
canvas.heigth = 50vh;
// ํ๋ฉด ํฌ๊ธฐ ๋ง์ถฐ์ ์ค์ ๋ ๊ฐ๋ฅ
canvas.width = window.innerWidth;
canvas.heigth = window.innerHeight;
const canvas = document.querySelector('#canvas');
// 1. ์ฌ๊ฐํ ๋ด๋ถ๋ฅผ ์์น ํ ์์ ์ค์
ctx.fillStyle = 'green';
// 2. ์ฌ๊ฐํ ๊ทธ๋ฆฌ๊ธฐ
ctx.fillRext = (10, 10, 50, 50); // x์ขํ, y์ขํ, ๊ฐ๋ก๊ธธ์ด, ์ธ๋ก๊ธธ์ด
// 1. ์ ๊ตต๊ธฐ, ์ ์์ ์ค์
ctx.lineWidth = 5; // ์ ๊ตต๊ธฐ
ctx.strokeStyle= 'black'; // ์ ์์
// 2. ์ฌ๊ฐํ ๊ทธ๋ฆฌ๊ธฐ
ctx.strokeRect(10, 10, 50, 50); // x์ขํ, y์ขํ, ๊ฐ๋ก๊ธธ์ด, ์ธ๋ก๊ธธ์ด
ctx.clearRect(20, 20, 30, 30); // x์ขํ, y์ขํ, ๊ฐ๋ก๊ธธ์ด, ์ธ๋ก๊ธธ์ด
โจย ํด๋ฆญ์ Canvas ์์์์ ๋ง์ฐ์ค ์์น๋ฅผ ๊ตฌํ๋ ค๋ฉด, ํ๋ฉด์ ๋ง์ฐ์ค ์์น - ์บ๋ฒ์ค ์์น
โฐย ํ๋ฉด์ ๋ง์ฐ์ค ์์น ๊ตฌํ๋ ์ด๋ฒคํธ ๊ฐ์ฒด ์์ฑ
event.clientX
event.clientY
โฐย ํ๋ฉด์ ์บ๋ฒ์ค ์์น ๊ตฌํ๋ ์์ฑ
ctx.canvas.offsetLeft
(event.offsetX
)ctx.canvas.offsetTop
(event.offsetY
)// ํด๋ฆญ์ canvas ์์ ์ฌ๊ฐํ ๊ทธ๋ฆฌ๊ธฐ
canvas.onclick = function (event) {
const x = event.clientX - ctx.canvas.offsetLeft
const y = event.clientY - ctx.canvas.offsetTop
ctx.fillRect(x - 15, y - 15, 30, 30);
// ํด๋ฆญํ ๋๋ง๋ค 30px * 30px ์ฌ๊ฐํ ๊ทธ๋ฆฌ๊ธฐ!!
// x,y ๊ทธ๋๋ก ์ ๋ฌ์ ์ขํ๋ถํฐ ์ฌ๊ฐํ ์์ -> ์ด์ -> ํด๋ฆญ ์์น๋ฅผ ์ฌ๊ฐํ ์ ์ค์์ด ๋๋๋ก!
// => '์ฌ๊ฐํ ํฌ๊ธฐ / 2' ๋งํผ ์ขํ์์ ๋นผ์ฃผ๊ธฐ
// ์ฆ, x-15, y-15 ์ ๋ฌ
}
: ์ฌ๋ฌ ์ฐจํธ ์ ํ์ ํผํฉํ๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ ์ง ์๊ฐ, ๋ก๊ทธ ๋ฑ์ ์ฝ๊ฒ ํ์ ๊ฐ๋ฅ + ์ ๋๋ฉ์ด์ ์ ๊ณต
$ npm install chart.js
<canvas id="popChart" width="500" height="500"></canvas>
// DOM์ ํตํด ์ฐจํธ๋ฅผ ์ธ์คํด์คํ!
let popCanvas = document.getElementById('popChart');
let popContext = document.getElementById('popChart').getContext('2d');
// ๋ชจ๋ ํ๋ผ๋ฏธํฐ๋ค์ Constructor์ ์ ๋ฌ
let barChart = new Chart(popCanvas, {
type: 'bar', // ์ฐจํธ ์ ํ
data: { // ์ค์ ๋ฐ์ดํฐ
labels: ['Korea', 'Japan', 'China', ...]
datasets: [{
label: 'Population',
data: [234234, 234234, 2342356, ...],
backgroundColor: [
'rgba(255, 255, 255, 0.5)',
...
]
}]
}
});
์ ๋ฒ์ ๊ตฌํํ๋ ๋ฐ์ํ ์น ์ฌ์ดํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก CSS Animation๊ณผ Canvas ์ ์ฉํด๋ณด๊ธฐ ๐
- Nav๋ฐ ์ข์ธก์ ๋ก๊ณ ์ด๋ฏธ์ง๋ฅผ @keyframes๋ฅผ ํ์ฉํ์ฌ ํ์ ์์ผฐ์ผ๋ฉฐ,
- Main ๋ถ๋ถ์ ๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ์ฌ ์ฌ๊ฐํ์ ๊ทธ๋ฆฌ๊ณ ์๋์ผ๋ก ์ฌ๋ผ์ง๋๋ก ๊ตฌํํด๋ณด์๋ค.
- ๋ฉ์ธ ํ๋ฉด ๋ถ๋ถ๊ณผ ๋ณ๋์ ์บ๋ฒ์ค ์์ญ์ ๋ฐ๋ก ๊ตฌ๋ถํ๋ ๊ฒ์ด ์๋๋ผ ๋ฉ์ธ ํ๋ฉด ์ ์ฒด ๋ถ๋ถ์ ์บ๋ฒ์ค์ฒ๋ผ ์ฌ์ฉํ๋ ค๊ณ ํ ์ ์์ ์ด๋ฅผ ํด๊ฒฐํ๋๋ฐ ์๊ฐ์ด ์ค๋๊ฑธ๋ ธ๋ค. ๊ฒฐ๊ตญ ํ์ด๋์ด ํด๊ฒฐํ์ จ๋๋ฐ ์๊ฐ๋ณด๋ค ์ฝ์ง ์์๋ค.,, ๋ญ๊ฐ ๋ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ด ์์ ๊ฒ ๊ฐ๊ธด ํ๋ฐ ๋ ๊ณต๋ถํด๋ด์ผ ํ ๋ถ๋ถ!!