Today I Learned #10

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

Javascript

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

Background Image ์ง€์ •ํ•˜๊ธฐ

์ง€๊ธˆ๊นŒ์ง€ ๋งŒ๋“ค์–ด์ง„ momentum์€ ์‹œ๊ณ„, To Do List์˜ ์ €์žฅ๊ณผ ์‚ญ์ œ, ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ–๊ณ ์žˆ๋‹ค. chrome์˜ ์ฒซ ํ™”๋ฉด์œผ๋กœ์„œ ํ•„์š”ํ•œ ๊ฒƒ์€ ๊ฐ–์ถ”์–ด์กŒ๊ณ , ์ด์ œ๋Š” ์ด ํŽ˜์ด์ง€์˜ Background Image๋ฅผ ์ง€์ •ํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์•˜๋‹ค. ์ด๋ฏธ์ง€๋“ค์˜ ์ถœ์ฒ˜๋Š” Unflash๋ผ๋Š” ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€ ๊ณต์œ  ์‚ฌ์ดํŠธ์ด๋‹ค.

Divide & Conquer

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•œ๋‹ค๋ฉด ์Šต๊ด€์ฒ˜๋Ÿผ Divide! bg.js๋ผ๋Š” ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด์ฃผ๊ณ , index.html์— <script src="bg.js"></script>๋ฅผ ์ž‘์„ฑํ•ด์คŒ์œผ๋กœ์„œ ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๋˜ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

Math

javascript์˜ ์ „์—ญ ๊ฐ์ฒด Math๋Š” ๋‹ค๋ฅธ javascript ์ „์—ญ ๊ฐ์ฒด๋“ค๊ณผ ๋‹ฌ๋ฆฌ ์ƒ์„ฑ์ž๊ฐ€ ์•„๋‹ˆ๋‹ค. Math.PI๊ฐ™์€ ๊ฐ์ฒด๋“ค์€ ์ •์ ์œผ๋กœ ํ‘œํ˜„๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์ˆ˜๋กœ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํŠน์ง•์ด ์žˆ๋‹ค.

Background Image๋ฅผ ์—ฌ๋Ÿฌ์žฅ Imageํด๋”์— ์ €์žฅํ•˜์—ฌ, ํŒŒ์ผ๋ช…์„ 1~9์˜ ์ˆซ์ž๋กœ ์ง€์ •, ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ ๊ณ ์นจ ๋  ๋•Œ๋งˆ๋‹ค 1๋ถ€ํ„ฐ 9 ์‚ฌ์ด์˜ ๋‚œ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ํ•ด๋‹น ํŒŒ์ผ์„ ๋ฐฐ๊ฒฝ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ Background Image๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

Math.random()

๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•ด ํ•„์š”ํ•œ ๋ฉ”์„œ๋“œ ์ค‘ ์ฒซ๋ฒˆ์งธ๋Š” Math.random()์ด๋‹ค. ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋Š” 0๋ถ€ํ„ฐ 1๊นŒ์ง€์˜ ์‹ค์ˆ˜ ์ค‘์—์„œ ํ•œ๊ฐ€์ง€๋ฅผ returnํ•˜๋Š” ๋ฉ”์„œ๋“œ์ด๋‹ค.

Math.floor()

Math.floor()์€ ์ˆ˜ํ•™์—์„œ์˜ ๋ฒ„๋ฆผ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋กœ, ์‹ค์ˆ˜๋ฅผ ์ธ์ž๋กœ ํ•˜์—ฌ ๋ฒ„๋ฆผ์„ ํ†ตํ•ด ์ •์ˆ˜๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ด๋‹ค.

const IMG_NUM = 9;

function genRandom() {
    const number = Math.floor(Math.random() * IMG_NUM);
    return number;
}

๋”ฐ๋ผ์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ genRandom() ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด 0~8์‚ฌ์ด์˜ ์ •์ˆ˜๋ฅผ returnํ•˜๋„๋ก ํ–ˆ๋‹ค.

prepend()

์ดํ›„ genRandom()์„ ํ†ตํ•ด ์ƒ์„ฑ๋œ randomnumber๋ฅผ paintImage() ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ๋„˜๊ฒจ์ฃผ๊ณ , paintImage()๋ฅผ ํ†ตํ•ด Background Image๋ฅผ ์„ค์ •ํ•ด์ฃผ์—ˆ๋‹ค.

function paintImage(imgnumber) {
    const image = new Image();
    image.src = `images/${imgnumber+1}.jpg`;
    image.classList.add("bgImage");
    body.prepend(image);
}

paintImage()์˜ ๋‚ด์šฉ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๊ณ , prepend()๋ฅผ ํ†ตํ•ด body์— ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค. prepend()๋Š” Node ๊ฐ์ฒด ๋˜๋Š” DOMstring ๊ฐ์ฒด๋ฅผ ์ฒซ๋ฒˆ์งธ ์ž์‹ Node๋กœ ์‚ฝ์ž…ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œ์ด๋‹ค. Image๋Š” Element์ด๋ฏ€๋กœ Node ๊ฐ์ฒด์— ํฌํ•จ๋œ๋‹ค.


์•ฝ๊ฐ„์˜ CSS

paintImage()์—์„œ image.classList.add("bgImage")๋ฅผ ํ†ตํ•ด class๋ฅผ ์ง€์ •ํ•ด์ฃผ์—ˆ๋Š”๋ฐ, CSS๋ฅผ ํ†ตํ•ด image์˜ ํŠน์„ฑ์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: fadeIn 0.5s linear;
}

์•„๋ž˜์˜ ๋‚ด์šฉ์€ ๊ทธ ์ค‘ ๊ธฐ๋กํ• ๋งŒํ•œ ๋‚ด์šฉ๋“ค์˜ ์ผ๋ถ€์ด๋‹ค.

z-index

z-index๋ž€ position์ด ์ง€์ •๋œ Element ์‚ฌ์ด์˜ z์ถ• ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” CSS ์†์„ฑ์„ ๋งํ•œ๋‹ค. ์ด z์ถ•์˜ ์‹œ์ž‘์ ์„ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด 0์ด ๋ชจ๋‹ˆํ„ฐ์ด๊ณ , ๊ฐ’์ด ์–‘์œผ๋กœ ์ ์  ์ปค์งˆ์ˆ˜๋ก ๋‚˜์˜ ๋ˆˆ์— ๊ฐ€๊นŒ์›Œ์ง€๊ณ , ์Œ์ˆ˜๋กœ ์ ์  ์ž‘์•„์ง„๋‹ค๋ฉด ๋ชจ๋‹ˆํ„ฐ ์†์œผ๋กœ ๊นŠ์ด ๋“ค์–ด๊ฐ„๋‹ค๊ณ  ์ดํ•ดํ•˜๋ฉด ์ดํ•ด๊ฐ€ ํŽธํ•˜๋‹ค.

animation

javascript์˜ ๋„์›€ ์—†์ด๋„ ๋™์ ์ธ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, css์˜ animation์†์„ฑ์ด ๋ฐ”๋กœ ๊ทธ ์†์„ฑ์ด๋‹ค. animation์˜ ๊ฐ’ fadeIn 0.5s linear๋Š” ๊ฐ๊ฐ animation-name animation-duration animation-timing-function์— ํ•ด๋‹นํ•œ๋‹ค.

@keyframes

@keyframes๋Š” animation-name์— ์†ํ•˜๋Š” ์†์„ฑ์„ ์„ ์–ธํ•˜๋Š” ๊ทœ์น™์œผ๋กœ, ์ด ์ฝ”๋“œ์—์„œ๋Š” fadeIn์— ๋Œ€ํ•œ ์„ธ๋ถ€์ ์ธ ์„ค์ •์„ @keyframes๋ฅผ ํ†ตํ•ด ์„ ์–ธํ•˜๊ณ  ์‚ฌ์šฉํ–ˆ๋‹ค.

linear

linear๋Š” animation-timing-function์˜ ์ผ๋ถ€๋กœ, animation์„ ๋“ฑ์†์œผ๋กœ ์ง„ํ–‰ํ•œ๋‹ค. ์ •ํ™•ํžˆ๋Š” cubic_bezier(0.0,0.0,1.0,1.0)์œผ๋กœ ์ง„ํ–‰ํ•˜๊ณ , cubic bezier๋ž€ ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์—์„œ ๊ณก์„ ์„ ๊ทธ๋ฆฌ๋Š” ๋ฐฉ์‹์œผ๋กœ, cubic_bezier()์˜ ๋„ค ์‹ค์ˆ˜ ๊ฐ’์€

์ˆœ์„œ๋Œ€๋กœ p0,p1,p2,p3์˜ ๊ฐ’์„ ์˜๋ฏธํ•˜๊ณ , cubic_bezier(0.0,0.0,1.0,1.0)๋Š”

์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ๊ธฐ ๋•Œ๋ฌธ์— animation์˜ ์‹œ๊ฐ„๋‹น ์ง„ํ–‰ ์†๋„๊ฐ€ ์ผ์ •ํ•˜๋‹ค.

profile
CAU Business Administration

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