On the left of the screen, There is a NEW Hammer Button that you can change your mouse cursor. On the right of the scree, There are RESET Button and SELECT Button. You can change background picture randomly By click the RESET Button. And you can select own picture to replace the background Picture by click the SELECT Button.
ํ๋ฉด๋ถ์๊ธฐ ํ๋ก๊ทธ๋จ
๋ฐ์ ์ฃผ ๋ฐ์ํ ๋ฐ์งํธ ์์ฑ๋ฏผ
- ๋ฐ์ ์ฃผ - ๋ง์ฐ์ค ํฌ์ธํฐ ๋ง์น๋ก ์ค์
- ๋ฐ์ํ - ํ๋ฉด ์ด๊ธฐํ, ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ ํ
- ๋ฐ์งํธ - ํ๋ฉด ํด๋ฆญ/๋๋ธํด๋ฆญ ์ ๊นจ์ง ํจ๊ณผ ๋ฐ BANG ํ ์คํธ ๋ ธ์ถ
- ์์ฑ๋ฏผ - ๋๋ค ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋ ธ์ถ
- Git
- Slack
- ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๊ฒฝ๋ก๋ฅผ ๋ฐฐ์ด๋ก ์ ์ธ
- ์ถ๋ ฅ์ด ํ์ํ ๋ ๋์๋ฅผ ์์ฑํด์ ๋๋ค์ผ๋ก ์ธ๋ฑ์ฑ
- ์ ํ๋ ์ด๋ฏธ์ง์ ๊ฒฝ๋ก๋ฅผ img ํ๊ทธ์ src ์์ฑ์ ํ ๋นํ์ฌ ํด๋น ์ด๋ฏธ์ง๋ฅผ ํ์ํฉ๋๋ค.
- input ํ๊ทธ์์ ์ฌ์ฉ์๊ฐ ์ ํํ ํ์ผ์
File
๊ฐ์ฒด๋ก ๊ฐ์ ธ์ค๊ธฐ - ์ด๋ฏธ์ง๊ฐ ๋ง๋์ง ํ์ฅ์ ์ ํจ์ฑ ๊ฒ์ฌ
- ์ด๋ฏธ์ง ํ์ผ์ด ๋ง์ผ๋ฉด
FileReader
๊ฐ์ฒด๋ก ํ์ผ ๋ด์ฉ์ ์ฝ์ด ํด๋น ์ด๋ฏธ์ง ํ์
- ๋ง์ฐ์ค ํธ๋ฒ๊ฐ ์ ์ฉ๋๋ DOM์ ์ค์ HTML ํ๊ทธ๊ฐ ๋ณด์ด์ง ์๋ ๊ฐ์ ํด๋์ค
getElementBy~()
๋ก ์ ํ ๋ถ๊ฐ
document
๊ฐ์ฒด ๋ด์์ ๋ง์ฐ์ค๋ฅผ ์์ง์ด๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ฐ๋ผ์ค๋๋ก ๊ตฌํ
- ํ ๋ฒ ํด๋ฆญ์ ์์ ํฌ๊ธฐ, ๋๋ธ ํด๋ฆญ ์ ํฐ ํฌ๊ธฐ์ crack ์ด๋ฏธ์ง๋ฅผ ์ฝ์
document.body.appendChild(image);
์ฌ์ฉ
- ํด๋ฆญํ ์ขํ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ขํ์ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ๊ณ ๋ คํด ์ด๋ฏธ์ง ์ค์ ๋ฐฐ์น
// ๊ทธ๋ฆผ ํํ์ ๋ฐ๋ผ ์ ํ๋๋ฅผ ๋์ด๊ธฐ ์ํด ๋ฃ์ด์ค ๊ฐ '50'
const imageX = clickX - imageSize / 2 - 50;
const imageY = clickY - imageSize / 2 + 50;
-
innerHTML ์ ํ์ฉํด์ bang!!! ์ด๋ผ๋ ํ ์คํธ ์ถ๊ฐ
-
ํ ์คํธ ํฌ๊ธฐ๋ฅผ 1.2๋ฐฐ ์ฆ๊ฐ์์ผฐ๋ค๊ฐ ์๋ ํฌ๊ธฐ๋ก ๋ณ๊ฒฝ
const newSize = (parseFloat(currentSize) * 1.2) + 'px';
- ํจ์์ 0.2์ด ์ง์ฐ์๊ฐ ์ธ์๋ฅผ ์ฃผ์ด ์ ๋๋ฉ์ด์ ํจ๊ณผ
setTimeout(() => {
boomText1.style.fontSize = '50px'; // ์๋ ํฌ๊ธฐ๋ก ์ค์
}, 200); // 200ms์ด๋ฏ๋ก 0.2์ด๋ง ์ปค์ก๋ค๊ฐ ์์์ง๋ค.
- ์ผ์ ์๊ฐ ๋ค ํ
์คํธ ์จ๊ธฐ๊ธฐ
- ๋ค์ ์ถ๋ ฅํ ๋
boomText1.style.display = 'block';
- ๋ค์ ์ถ๋ ฅํ ๋
setTimeout(() => {
boomText1.style.display = 'none'; // ๊ธ์ ์จ๊ธฐ๊ธฐ
}, 1000);
git ์ ๋ฏธ์ํ์ฌ git์ ํตํด ์๋ก ์์ฑํ ๋ถ๋ถ์ ํฉ์น๋๋ฐ ์ด๋ ค์์ด ์์์ต๋๋ค.
ํ์๋ค ๋ชจ๋ ๊ฒ์ํด์ ์ดํดํ ์ฌ๋์ด ์ค๋ช
ํด์ฃผ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ์์ต๋๋ค.
๋ชจ์๋ฆฌ ๋ถ๋ถ์ ํด๋ฆญ์ผ๋ก ํ๋ฉด์ด ๊นจ์ง๋ ํจ๊ณผ๋ฅผ ์ฃผ์์ ๋, ๊นจ์งํจ๊ณผ ์ด๋ฏธ์ง๊ฐ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ๋ฒ์ด๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค. body ํ๊ทธ์ overflow ์์ฑ์ ์ถ๊ฐํ์ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ๋ฒ์ด๋๋ ํจ๊ณผ๋ฅผ ์๋ผ๋ด๋ ๋ฐฉ์์ผ๋ก ํด๊ฒฐํ์ต๋๋ค.
body {
overflow : hidden;
}
์ฌ์ฉ์๊ฐ ์
๋ก๋ ๋ฒํผ์ ๋๋ ์ ๋ ์ ํํ ํ์ผ์ ์๋ฐ์คํฌ๋ฆฝํธ์์ File
๊ฐ์ฒด๋ก ๋ฐ์์ฌ ์ ์๋๋ฐ, ์ด ํ์ผ์ ๋ฐ์ด๋๋ฆฌ ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ ๋ชฐ๋ผ ๋ฐฐ๊ฒฝํ๋ฉด์ผ๋ก ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ์ด๋ ค์์ด ์์์ต๋๋ค.
์ฐพ์๋ณด๋ FileReader
๊ฐ์ฒด๊ฐ ํ์ผ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ค๋ ๊ฒ์ ์๊ฒ๋์ต๋๋ค. ์ด ๊ฐ์ฒด๋ฅผ ํตํด ์ป์ ํ์ผ๋ฐ์ดํฐ๋ฅผ img ํ๊ทธ์ src ์์ฑ ๊ฐ์ผ๋ก ์ฌ์ฉํ์ฌ ํด๊ฒฐํ์ต๋๋ค.
css์ ์ปค์์ต์
์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ถ์ฌํ์๋ ํด๋น ๋ธ๋ผ์ฐ์ ์ ๋๋ถ๋ถ์ผ๋ก ๋ง์ฐ์ค๋ฅผ ์ด๋์ํค๋ฉด ์ด๋ฏธ์ง๊ฐ ๊ธฐ๋ณธ ์ปค์๋ก ๋ณ๊ฒฝ๋๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ปค์๋ก ์ฌ์ฉ๋ ์ด๋ฏธ์งํ๊ทธ๋ฅผ ์ถ๊ฐํ์ฌ mousemove ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ์ด๋ฏธ์ง๋ฅผ ๋ง์ฐ์ค์ ์์น๋ก ์ด๋์์ผ์ฃผ์ด ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์์ต๋๋ค.
์ถ๊ฐ๋ก ๋ง์ฐ์ค๊ฐ ๋ธ๋ผ์ฐ์ ์์ญ ๋ฐ๊นฅ์ผ๋ก ๋ฒ์ด๋ ์ ์ด๋ฏธ์ง๊ฐ ์ฌ๋ผ์ง ์ ์๋๋ก mouseleave ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์ด๋ฏธ์ง๋ฅผ ๋นํ์ฑํ ํ์์ต๋๋ค.
๋ฆฌ์
๋ฒํผ์ ๋๋ ์ ๋ ํ๋ฉด์ด ์ด๊ธฐํ ๋์ด๋ ํด๋ฆญ ํจ๊ณผ ๋๋ฌธ์ ํ๋ฉด์ด ์์ ํ ๊นจ๋ํด์ง์ง ์๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
event.target.id === ๋ฒํผ ๊ฐ์ฒด์ id
ํตํด ์ด๋ฒคํธ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋์์์ด ๋ฆฌํด์ํค๋๋ก if ๋ฌธ์ ํ์ฉํ์ต๋๋ค.
๋ฐ์ ์ฃผ
๊ฐ์ ํด๋์ค์ ๊ฐ๋ ์ด ์์ํ์ง๋ง ์๋ฃ๋ฅผ ๋ณด๋ฉฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์ดํดํ๋ ์์ฑ ํ ์ ์์์ต๋๋ค. ๋ณ์๋ช ์ ์ง๋๋ฐ 'ํธ๋ฒ, ํฌ์ธํฐ, ์ปค์'๋ฑ ํผ๋์ด ์์ด ๋ณ์๋ช ์ ๋ฏธ๋ฆฌ ์๊ฐํด๋๋๊ฒ์ด ์ค์ํ๊ณ ์ถ๊ฐ๋ก git์ฌ์ฉ์ ์ฐ์ตํด์ผ๊ฒ ๋ค๊ณ ๋๊ผ์ต๋๋ค.
๋ฐ์ํ
์์์น ๋ชปํ ์ด์๊ฐ ๋ง์์ง๋ง ํ์๋ค๊ณผ ๊ฐ์ด ์ฐพ์๊ฐ๋ฉฐ ์์ฌ์ํตํ ๋๋ถ์ ์ ๋ง๋ฌด๋ฆฌ ํ ์ ์์์ต๋๋ค. ํ์ ์ ์ํด ์ฝ๋ ์ปจ๋ฒค์ , ์ํํ ์์ฌ์ํต, Git ์ ์ค์์ฑ์ ์ฒด๊ฐํ์ต๋๋ค.
๋ฐ์งํธ
์ฒ์์ผ๋ก ์น ๋์์ธ ํ์ ์ ํด๋ณด์์ต๋๋ค. ์์ง ์ฒ์์ด๋ผ ๋๋ฌด ์ด๋ ค์ ์ง๋ง, ์ด๋ค ํ๋ฆ์ผ๋ก ํ์ ์ด ์ด๋ค์ง๋์ง ์ํฌํ๋ก์ฐ๋ฅผ ๋ณผ ์ ์์์ต๋๋ค. ๋ํ html, css ๊ทธ๋ฆฌ๊ณ js๊ฐ ์์ง ๋ฏธ์ํ์ง๋ง ์ ์ฒด์ ์ธ ๊ฒ์ ๋ฐฐ์ ๊ธฐ์ ๊พธ์คํ ๊ณต๋ถ๋ฅผ ์ด์ด๋๊ฐ ์ค๋ ฅ์ ๋๋ฆฌ๋๋ก ํ๊ฒ ์ต๋๋ค. ๋ฌด์๋ณด๋ค ํ์ ์ ํ๊ธฐ์ํด์๋ ๊น์ ์ํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ ๊ฐ์ง๋๋ค.
์์ฑ๋ฏผ
css์ ๋ํ ์ดํด๊ฐ ๋ถ์กฑํ์ฌ ์ฌ์ง์ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ์ฑ์ฐ๋๋ฐ ์๊ฐ์ด ์ค๋๊ฑธ๋ ธ์ต๋๋ค. git ์ฌ์ฉ๋ฒ์ด ๋ฏธ์ํ์ฌ mergeํ๋ ๊ณผ์ ์์ ์ด๋ ค์์ ๊ฒช์๊ณ , ํ์ ์์ git์ ์ค์์ฑ์ ๋๋ผ๊ฒ ๋์์ต๋๋ค. ๋ํ ํ๋ก์ ํธ์ ๋ฒ๊ทธ๋ฅผ ์์ ํ๋ ๊ณผ์ ์์ ์์ธ์ ์ฐพ๊ณ ํด๊ฒฐ๋ฐฉ์์ ๋์ถํด ๋ด๋ ๊ณผ์ ์์ ์ค๋ ฅ์ด ํฅ์๋ ๊ฒ ๊ฐ์ต๋๋ค.