profile
์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ์„ฑ์žฅ๊ธฐ๐Ÿ˜Ž
post-thumbnail

Javascript30 - Sticky Nav

์ด๋ฒˆ์— ์ง„ํ–‰ํ•œ ์‹ค์Šต์€ Sticky Nav๋กœ, scroll๋˜๋Š” ์œ„์น˜๋ฅผ ํŒŒ์•…ํ•ด์„œ Nav์˜ ์†์„ฑ์„ fixed๋กœ ๋ฐ”๊พธ์–ด์ฃผ๋Š” ๊ฐ„๋‹จํ•œ ์‹ค์Šต์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

2021๋…„ 3์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Follow along link Highlighter

์˜ค๋žœ๋งŒ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 30 ํฌ์ŠคํŒ…์ด๋‹ค! ์ตœ๊ทผ์— ์ง„ํ–‰ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ์‹ ๊ฒฝ ์“ฐ๋Š๋ผ, ์ƒ๋Œ€์ ์œผ๋กœ ๊ณ„์† ์šฐ์„ ์ˆœ์œ„์—์„œ ๋ฐ€๋ฆฌ๊ณ  ์žˆ๋‹ค๐Ÿ˜‚๐Ÿ˜‚ ๊ทธ๋ž˜์„œ ์ฃผ๋ง ์˜ค์ „์— ์งฌ์„ ๋‚ด์„œ ์ง„ํ–‰ํ•ด๋ณด์•˜๋‹ค. ์ด๋ฒˆ ์‹ค์Šต์€ Link Highlighter๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค.

2021๋…„ 2์›” 20์ผ
ยท
1๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Adding Up Times with Reduce

์ด๋ฒˆ ์‹ค์Šต์€ ์˜์ƒ์ด ์ญ‰ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ , data-time(dataset attribute)์— ํ‘œํ˜„๋˜์–ด ์žˆ๋Š” ์˜์ƒ ๊ธธ์ด ์ •๋ณด๋ฅผ ํ•œ๋ฒˆ์— ๊ฐ€์ ธ์™€์„œ console.log๋กœ ์ฐ๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์•˜๋‹ค.

2021๋…„ 2์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Sort Without Articles

์ด๋ฒˆ ์‹ค์Šต์€ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋œ ์š”์†Œ๋ฅผ 'A', 'An', 'The'์™€ ๊ฐ™์€ ๋‹จ์–ด ๋นผ๊ณ  ์‚ฌ์ „์‹์œผ๋กœ ์ •๋ ฌํ•ด๋ณด๋Š” ์‹ค์Šต์„ ํ•ด ๋ณด์•˜๋‹ค.๋‚ด๊ฐ€ ์ง  ์ฝ”๋“œ์™€ ์ •๋‹ต์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•ด๋ณด๋ฉฐ ์ •๊ทœํ‘œํ˜„์‹์˜ ์œ„๋Œ€ํ•œ ํž˜์„ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ๐Ÿ˜‚๐Ÿ˜‚์ •๊ทœํ‘œํ˜„์‹์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.Array.prototype.sort

2021๋…„ 1์›” 31์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - LocalStorage

์ด๋ฒˆ ์‹ค์Šต์—๋Š” Localstorage๋ฅผ ์ด์šฉํ•ด์„œ ํŽ˜์ด์ง€๊ฐ€ refresh ๋์„๋•Œ๋„ ์ž…๋ ฅํ–ˆ๋˜ ๊ฐ’์ด ์‚ฌ๋ผ์ง€์ง€ ์•Š๊ณ  ์œ ์ง€๋  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ•ด ๋ณด์•˜๋‹ค. ๐Ÿ˜Ž

2021๋…„ 1์›” 30์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - slide in on scroll

์ด๋ฒˆ ์‹ค์Šต์€ scroll event๋ฅผ ํ†ตํ•ด ํŠน์ • ์œ„์น˜์— ๋„๋‹ฌํ•˜๊ฒŒ ๋˜๋ฉด ํœ™~ํ•˜๊ณ  image๋“ค์ด slide-in ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค.

2021๋…„ 1์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Custom Video Player

html video tag์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•œ๋‹ค. transition์œผ๋กœ ๊ฐ์ถ”๊ณ , hover ๋ ๋•Œ up ๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์žฌ์ƒ bar๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•ด์„œ ๊ตฌํ˜„ํ•ญ ๋ฐฉ์‹์ด ์ธ์ƒ๊นŠ์—ˆ๋‹ค.

2021๋…„ 1์›” 23์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Sequence Key Detection

์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” secret key๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ํ™”๋ฉด์— ๊ท€์—ฌ์šด ์œ ๋‹ˆ์ฝ˜์ด ์ถœ๋ ฅ๋˜๋Š” ์žฌ๋ฏธ์žˆ๋Š” ์‹ค์Šต์„ ํ•ด๋ณด์•˜๋‹ค.๋‚ด๊ฐ€ ์„ค์ •ํ•œ secret Key์ธ 'fun javascript'๋ฅผ ์ž…๋ ฅ ํ•  ๋•Œ๋งˆ๋‹ค ํ™”๋ฉด์— ์œ ๋‹ˆ์ฝ˜์ด ์ถ”๊ฐ€๋œ๋‹ค๐Ÿ˜„๐Ÿ˜„์–ด๋ฆด๋•Œ 'ํ‚น์˜ค๋ธŒํŒŒ์ดํ„ฐ'๋ผ๋Š” ๊ฒŒ์ž„์—์„œ โ†โ†’โ†โ†’โ†

2021๋…„ 1์›” 20์ผ
ยท
2๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - CheckBox

์ด๋ฒˆ chapter์—์„œ๋Š” html์˜ input ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ณ , shift๋ฅผ ๋ˆ„๋ฅธ์ฑ„๋กœ ๋‘๊ฐœ์˜ checkbox๋ฅผ ์„ ํƒํ•˜๋ฉด ๊ทธ ์‚ฌ์ด์— ์กด์žฌํ•˜๋Š” checkbox๋“ค์„ ๋‹ค ์„ ํƒ๋œ ์ƒํƒœ๋กœ ๋งŒ๋“œ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด์•˜๋‹ค! ๐Ÿ˜Ž

2021๋…„ 1์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Array practice2

์ด๋ฒˆ ์‹ค์Šต์€ 3์ผ์ฐจ์— ํ–ˆ๋˜ javascript array practice์— ์ด์€ 2๋ฒˆ์งธ ์‹ค์Šต์œผ๋กœ console์ฐฝ์„ ํ™•์ธํ•˜๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

2021๋…„ 1์›” 6์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Type Ahead

fetch API์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.Regular expression์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.json์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.๊ธฐ๋ณธ์ ์œผ๋กœ fetch()๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ 2๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›๋Š”๋‹ค. ์ฃผ์†Œ๊ฐ’์€ ํ•„์ˆ˜ parameter์ด๋‹ค. fetch API๋Š” ajax ํ†ต์‹ ์˜ ์„ฑ๊ณต/์‹คํŒจ ์—ฌ๋ถ€์™€

2020๋…„ 12์›” 18์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Flex panel

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” flexbox์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค!Flexbox์™€ ๊ทธ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด ์ดํ•ดํ•œ๋‹ค. (flexbox...๋‹ค ์•„๋Š”์ค„ ์•Œ์•˜๋Š”๋ฐ...์–ด๋ ต๋‹ค)CSS Transition์— ๋Œ€ํ•ด ์ดํ•ดํ•œ๋‹ค.forEach๋ฌธ๊ณผ Event.propertyName์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.css์˜ tag๋“ค์€

2020๋…„ 12์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - Array practice

Javascript Array object์˜ ๊ธฐ๋ณธ function์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.

2020๋…„ 12์›” 7์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript30 - CSS Variable and Puzzle

input tag๋ฅผ ์ด์šฉํ•ด padding์ด๋‚˜ blur๋ฅผ ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค. CSS์—์„œ ๋ณ€์ˆ˜๋กœ ์„ค์ •ํ•ด ๋†“๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋™์ ์œผ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์‚ฌ์ง„์€ ๋‚ด๊ฐ€ ์ง์ ‘ ์‚ฌ์„œ ๋งž์ถ˜ ํ‚คํ‚ค ํผ์ฆ์ด๋‹ค...:root๋ฅผ ์ด์šฉํ•œ css๋‚ด์—์„œ์˜ ๋ณ€

2020๋…„ 12์›” 4์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript 30 - Drum Kit

data-* attribute์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค. queryselector๋ฅผ ์ด์šฉํ•˜์—ฌ ํŠน์ •ํ•œ tag๋ฅผ ์ฐพ๋Š” ๊ณผ์ •์„ ํ•™์Šตํ•œ๋‹ค.transitionend event์— ๋Œ€ํ•ด ํ•™์Šตํ•œ๋‹ค.Ev

2020๋…„ 12์›” 1์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
post-thumbnail

Javascript 30

12์›” ๋ชฉํ‘œ : ์ž๋ฆฐ์ด ํƒˆ์ถœ๐Ÿ˜Ž Javascript ๊ณต๋ถ€ํ•˜๋Š” ์ž๋ฃŒ๋ฅผ ์ฐพ๋‹ค๊ฐ€, 30์ผ๋™์•ˆ vanila javascript๋ฅผ ์—ฐ์Šต ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ˆ์ œ๋“ค์„ ์ œ๊ณตํ•ด์ฃผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋‹ค! ํ•˜๋ฃจ์— ํ•˜๋‚˜์”ฉ ์ง„ํ–‰ํ•ด์„œ ํ•œ๋‹ฌ๋งŒ์— ๋๋‚ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค ๐Ÿ˜

2020๋…„ 12์›” 1์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€