๐ ์ค๋ ํ ์ผ
โ๏ธJavascript๋ก ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ (~Advanced)
์์งํ ๋ง์ง๋ง ํ ์คํธ๋ ์ ํต๊ณผ๋์ง ๋ชจ๋ฅด๊ฒ ๋ค. ๋ด์ผ ๋ง์ ์ ์ ์ผ๋ก ์ฐจ๊ทผ์ฐจ๊ทผ ๋ค์ ๋ด์ผ์ง..! ๋ญ๊ฐ ์๊พธ ์์ฌ์ด ์๊ฒจ์ ์ด๊ฒ์ ๊ฒ ์ถ๊ฐํ๋ค๋ณด๋๊น ์ค๋์ ์ง์ง ํ๋ฃจ์ข ์ผ ๊ณ์ฐ๊ธฐ๋ง ๋ณด๊ณ ์์๋ ๊ฒ ๊ฐ๋ค,, ๊ฟ์๋ ๋์ฌ๋ฏ ๐ค
โ๏ธ์์ ๊ตฌํ๊ธฐ ๋ฌธ์ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ํ์ด๋ณด๊ธฐ
์๋ฆฌ์คํ ํ ๋ ์ค์ ์ฒด๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๋ค์ ํ์ด๋ดค๋ค. ๋ชจ๋ ์ซ์๋ฅผ ์ฐ์ ๋งจ์ฒ์์ ๋ฐฐ์ด์ ๋ค ์ ์ฅํด๋๊ณ , ์ฒด๋ก ๊ฑธ๋ฌ๋ด๋ฏ์ด ์ญ์ ํด ๋๊ฐ๋ค. ์ฌ๋ฐ๋ ๋ฐฉ๋ฒ์ด๊ธฐ๋ ํ์ง๋ง ๊ธฐ์กด ๋ฐฉ๋ฒ๋ค๋ณด๋ค ๋ ํจ์จ์ ์ธ์ง๋ ์ ๋ชจ๋ฅด๊ฒ ๋ค.
๐ ๊ธฐ์ตํ ๊ฒ
โ๏ธ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๊ณ ์๋ ๋์ :hover, ํด๋ฆญํ๊ณ ์๋ ๋์ :action
โ๏ธ querySelector๋ก HTML์์๋ฅผ ์ ํํ๊ณ , textContent๋ฅผ ํตํด ํ ์คํธ๋ฅผ ์ง์ด๋ฃ๋๋ค.
๐ ๋ ๊ณต๋ถํ ๊ฒ
โ๏ธ addEventListener
- event ์ ๋ฆฌ
โ๏ธ ๊ณ์ฐ๊ธฐ
- ํค๋ณด๋๋ก ์ ๋ ฅ๋ฐ๋ ๊ธฐ๋ฅ ์ถ๊ฐํด๋ณด๊ธฐ
- ์ฝ๋ ๊ฐ์ ํ๊ธฐ (์ค๋ณต, ํ์์๋ ๊ธฐ๋ฅ ์ ๊ฑฐ)
- ๋ฆฌ๋ทฐ / ์ ๋ฆฌ (๊ธฐ๋ฅ ์ค๋ช , ์ฃผ์ ๋ฌ๊ธฐ)
โ๏ธ CSS
- Flex, Grid ์ ๋ฆฌ
โ๏ธ ํ์์ ๋ฌธ์ ๊ฐ์๊ฑฐ ํ ๋ ์์์ ํ๋ฆ๋๋ก ์ด๊ฒ์ ๊ฒ ์ถ๊ฐํ๊ณ ๋นผ๋ณด๋ฉด์ ์์ฑํด๋๊ฐ๋ ํธ์ด๋ผ ์ ๋ฆฌ๊ฐ ์๋๋ ๋๋์ด ์์๋๋ฐ, ํ์ด๋ถ๋ค๊ณผ ๋ฌธ์ ๋ฅผ ํ๋ค๋ณด๋ ๋ด๊ฐ ์๊ฐํ ๊ฑธ ์ค๋ช ํ๊ณ , ์ฌ๋ฌ ๋ฐฉ๋ฒ๋ค์ ๋ํด์ ์์(?)๋ฅผ ํด์ผํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ค. ๊ทธ๋ ๊ฒ ๋ง๋ก ํํํ๋๊น ๋ด๊ฐ ๋ฌธ์ ์ ๋ํด ์ด๋ค ์์ผ๋ก ์ ๊ทผํ๊ณ , ์ ๊ทธ๋ฐ ์ฝ๋๋ฅผ ์ผ๋์ง ๋ญ๊ฐ ์ข ๋ ์๊ฐ์ด ์ ๋ฆฌ๋๋ ๊ฒ ๊ฐ์๋ค.
โ๏ธ ์ค๋์ ๊ฐ์ฅ ์ค์ํ ๊นจ๋ฌ์ : ๋ฌธ์ ํ๋ค ๋งํ๋ฉด ๋ด๊ฐ ์ด ์ฝ๋๋ง ๋ค์ฌ๋ค๋ณด์ง๋ง๊ณ , ํ ์คํธ๋ฅผ ํ์ ๋ ์๋ํ๋ ์์๋ถํฐ ๋ค์ ์๊ฐํด๋ณด์! ์ด๋ค ๊ฐ์ด ์ ๋ ฅ๋๊ณ , ์ ๋ ฅ์ ๋ฐ๋ผ ์ด๋์ ์ด๋ค ๊ธฐ๋ฅ์ด ์๋ํ๋์ง ํ๋์ฉ ๋์ ํด๋ณด๋ฉด์ ์๊ฐํ๋ค๋ณด๋ฉด ์ ๊ธฐํ๊ฒ๋ ์ด๋์๋ถํฐ ์๋ชป๋๊ฑด์ง, ์ด๋ ๋ถ๋ถ์ ์๋ชป ์๊ฐํ๊ฑด์ง ์ ์ ์๊ฒ ๋๋ค.
โ๏ธ ์ฃผ๋ง๋์ ๋ ๊ณต๋ถํ ๊ฒ์ ์ ์ด๋๋๊ฒ๋ค๋ ๋ง๋ฌด๋ฆฌ ์ง๊ณ ์ ๋ ํน ์๋ฌ์ผ๊ฒ ๋ค. ๋ฐฐํฐ๋ฆฌ ๋๋ฌธ์ธ์ง ๋งฅ๋ถ์ ๋ง์ ์๋ค์ด์ ๋ด์ผ์ ๊ผญ ์๋ฆฌ๋ฐ์ผ๋ฌ ๊ฐ๋ด์ผ๊ฒ ๋ค ใ ใ
'Daily > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
201214_TIL (0) | 2020.12.15 |
---|---|
201212_TIL (0) | 2020.12.13 |
201210_TIL (0) | 2020.12.10 |
201209_TIL (0) | 2020.12.10 |
201208_TIL (0) | 2020.12.09 |
๋๊ธ