๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Daily/Today I Learned

201211_TIL

by joooing 2020. 12. 12.
๋ฐ˜์‘ํ˜•

๐ŸŽ ์˜ค๋Š˜ ํ•œ ์ผ


โœ”๏ธ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

๋Œ“๊ธ€