profile
๐ŸŒฟ ์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค! ๋ถ€์กฑํ•˜๊ฑฐ๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”:)
post-thumbnail

[ Habit Treat Project ] React์—์„œ input์— ์ž…๋ ฅ๋œ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

React์—์„œ๋Š” input์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ์–ด๋–ป๊ฒŒํ•˜๋ฉด ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์„๊นŒ? > inputํƒœ๊ทธ์— ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด state์— ์ƒˆ๋กœ์šด ๊ฐ์ฒด๊ฐ’์„ ํ•˜๋‚˜ ์ถ”๊ฐ€ํ•˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ inputํƒœ๊ทธ์˜ ๊ฐ’์„ ์–ป์–ด์™€์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณ ๋ฏผ ์ค‘์ด์—ˆ๋‹ค. > > DOM์—์„œ๋Š” input์—

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

[ Habit Treat Project ] Component error / key

state์— ๋ฐฐ์—ด์•ˆ์— ๊ฐ์ฒด๋“ค์„ ๋‹ด๊ณ  ์žˆ๋Š” ๊ฐ’์„ map์„ ์ด์šฉํ•ด์„œ ๊ฐ๊ฐ์˜ liํƒœ๊ทธ๋“ค๋กœ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ ํ•œ ๊ฐ€์ง€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๋Š”๋ฐ ์—ฌ๊ธฐ์„œ ์—๋Ÿฌ ๋ฌธ๊ตฌ๋ฅผ ์ž˜ ์‚ดํŽด๋ณด๋ฉด, ๋ฆฌ์ŠคํŠธ์—์„œ๋Š” ๊ณ ์œ ํ•œ key๋ฅผ ์‚ฌ์šฉ ํ•ด์•ผ ๋œ๋‹ค! ๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ๋‚˜

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

ํ„ฐ๋ฏธ๋„์—์„œ yarn ๋ช…๋ น์–ด๋ฅผ ์ด์šฉํ•ด์„œ FontAwesome ์‚ฌ์šฉํ•˜๊ธฐ

๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํฐํŠธ์–ด์ธ์„ ๋ฐ›์•„์„œ ํ”„๋กœ์ ํŠธ์— ์•„์ด์ฝ˜๋“ค์„ ๋„ฃ์–ด์„œ ์‚ฌ์šฉํ•ด ๋ณผ ๊ฒƒ์ด๋‹ค.fontawesome์„ ์„ค์น˜ ํ•œ ๋‹ค์Œ์—๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉํ•  ๋•Œ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.์œ„์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์•„๋ž˜์˜ ์ฝ”๋“œ๋กœ ์ถ”๊ฐ€ํ•ด ๋ณผ ๊ฒƒ์ด๋‹ค.์œ„์˜ impor

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

[ Habit Treat Project ]

๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‚˜ ์ง„ํ–‰ํ•ด ๋ณผ ๊ฒƒ์ด๋‹ค.์ „์ฒด ์Šต๊ด€์˜ ๊ฐœ์ˆ˜๋ฅผ ์…€ ์ˆ˜ ์žˆ๋‹ค.์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ์ฐฝ์— ์ž…๋ ฅํ•œ ๋’ค ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•˜๋‚˜์˜ ์Šต๊ด€์„ ๋ชฉ๋ก์— ์ถ”๊ฐ€ํ•œ๋‹ค.๊ฐ๊ฐ์˜ ๋ชฉ๋ก์„ ์ถ”๊ฐ€ํ•˜๊ณ , ๊ฐ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.๊ฐ๊ฐ์˜ ๋ชฉ๋ก์„ ์‚ญ์ œ ํ•  ์ˆ˜ ์žˆ๋‹ค.Reset ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ชจ๋“ 

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

[๋ฆฌํŒฉํ† ๋ง, ๋ชจ๋“ˆํ™”] carrot harvest game / object.freeze

๊ธฐ์กด ์ฝ”๋“œ > ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๊ฐ๊ฐ์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ํ†ตํ•ด ๊ธฐ๋Šฅ์ด ๋™์ž‘๋œ๋‹ค. ๊ฒŒ์ž„ ์‹œ์ž‘ ๊ฒŒ์ž„ ๋ฉˆ์ถค ๊ฒŒ์ž„ ์Šน, ํŒจ์— ๋”ฐ๋ผ ๊ทธ ์•ˆ์—์„œ ๊ฐ๊ฐ ์•Œ๋ฆผ ์†Œ๋ฆฌ์™€ ์•Œ๋ฆผ์ฐฝ์„ ๋‹ค๋ฅด๊ฒŒ ์„ค์ •ํ•œ๋‹ค. ๊ฒŒ์ž„ ์‹œ๊ฐ„์„ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค. ๋‚จ์€ ๊ฒŒ์ž„ ์‹œ๊ฐ„์„ ๋ณด์—ฌ์ฃผ๋Š” ํ•จ์ˆ˜ ๋‚จ์€ ๋ชฉํ‘œ ๊ฐœ์ˆ˜๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ํ•จ์ˆ˜ ๋ฒ„ํŠผ ์ˆจ

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

[๊ตฌํ˜„, ๋ฆฌํŒฉํ† ๋ง] carrot harvest game, ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

๊ฒŒ์ž„์˜์—ญ์„ ์žก์•„์•ผ๋˜๋Š”๋ฐ ๋ถ€๋ชจ ๋ฐ•์Šค์— display: flex๋ฅผ ์ฃผ๊ณ  ๊ฒŒ์ž„ ์˜์—ญ์—๋„ ๋™์ผํ•˜๊ฒŒ ์ฃผ์—ˆ๋Š”๋ฐ ๊ทธ๋Ÿด ํ•„์š”๊ฐ€ ์—†์ด๋ถ€๋ชจ ๋ฐ•์Šค์— ์•„๋ž˜์˜ ์†์„ฑ๋งŒ ์ฃผ์–ด๋„ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ž˜ ์œ„์น˜๋ฅผ ์žก์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.\--> ๋‚ด๊ฐ€ ์•Œ๊ฒŒ๋ชจ๋ฅด๊ฒŒ ๋ถ€๋ชจ ํƒœ๊ทธ์—๋Š” display: flex๋งŒ ์ฃผ๋ คํ•˜๊ณ 

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

[์„ค๊ณ„ํŽธ] carrot harvest game

๊ตฌํ˜„ํ•  ๋•Œ ํ•„์š”ํ•œ ๊ฒƒ ์ƒ๊ฐํ•ด๋ณด๊ธฐ์ œํ•œ๋œ ์‹œ๊ฐ„์•ˆ์— ๋‹น๊ทผ์„ ์—†์• ์„œ ์Šน๋ฆฌํ•ด์•ผ๋˜๋Š” ๊ฒŒ์ž„์„ ๋งŒ๋“ค๊ฒƒ์ด๋‹ค๊ธฐ๋ŠฅsetInterval์„ ์ด์šฉํ•ด์„œ ํƒ€์ด๋จธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ๋‹น๊ทผ์„ ์ œํ•œ์‹œ๊ฐ„์•ˆ์— ๋‹ค ์—†์• ๋ฉด ์Šน๋ฆฌ๋ฒŒ๋ ˆ๋ฅผ ํด๋ฆญํ•  ๊ฒฝ์šฐ ๊ฒŒ์ž„์ด ๋๋‚œ๋‹ค์ œํ•œ๋œ ์‹œ๊ฐ„์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๊ณ , ๋‚จ์€ ๋‹น๊ทผ์˜ ๊ฐœ์ˆ˜๋ฅผ ๋ณด

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

TypeError: Cannot read property 'addEventListener' of null defer๋กœ ํ•ด๊ฒฐ!

HTML์ด ๋ชจ๋‘ ๋กœ๋“œ๋˜๊ธฐ์ „์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜์—ญ์—์„œ HTML์„ ์ฐธ์กฐํ•˜๋Š”๋ฐ addEventListener์—์„œ HTMLํƒœ๊ทธ๋ฅผ ์ฐธ์กฐํ•˜์ง€ ๋ชปํ•ด์„œ ๊ณ„์† ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.๋ณดํ†ต body ํƒœ๊ทธ๊ฐ€ ๋๋‚˜๊ธฐ ๋ฐ”๋กœ ์œ„์— ๋ถ€๋ถ„์— script์˜ ์œ„์น˜๋ฅผ ์˜ฎ๊ฒจ์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งŽ์ด๋“ค ์‚ฌ์šฉํ•˜๋Š”๋ฐ๋‚˜๋Š”

2021๋…„ 5์›” 19์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[๋ฆฌํŒฉํ† ๋ง] Shopping List project

ํ˜„์žฌ ๋ฆฌ์•กํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋„ ๋” ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š” ์ค‘์ด๋‹ค.๋ฆฌ์•กํŠธ๋ฅผ ์ด์šฉํ•˜๋ฉด html์˜ ๊ธฐ๋ณธ์ ์ธ ์ฝ”๋“œ๋ฅผ ํ•˜๋“œ์ฝ”๋”ฉํ•˜์ง€ ์•Š์•„๋„ ๋˜์ง€๋งŒ, ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ์€ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์•ผ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ html ๊ตฌ์กฐ๋ฅผ ์งœ๋Š”๊ฒƒ์— ๋งŽ์€ ์‹œ๊ฐ„์„ ํˆฌ์žํ•˜๊ณ  ์žˆ๋Š”์ค‘์ด๋‹ค.๐Ÿ’ป ์‹ค๋ ฅ์žˆ

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

[๊ตฌํ˜„] Shopping List project, ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

๊ตฌํ˜„ ํ™”๋ฉด2021.05.11});

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

[์„ค๊ณ„ํŽธ] Shopping List project

๊ตฌํ˜„ํ•  ๋•Œ ํ•„์š”ํ•œ ๊ฒƒ ์ƒ๊ฐํ•ด๋ณด๊ธฐ๊ธฐ๋Šฅ1-1. ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ์ฐฝ์— ๋ชฉ๋ก์„ ์ž…๋ ฅํ•˜๊ณ  Enter key ๋˜๋Š” +๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ํ™”๋ฉด์— ์‡ผํ•‘ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.1-2. ๋ชฉ๋ก ์˜ค๋ฅธ์ชฝ์—๋Š” ํœด์ง€ํ†ต ์•„์ด์ฝ˜์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์„ ํด๋ฆญํ•˜๋ฉด,ํ•ด๋‹น ์‡ผํ•‘ ๋ชฉ๋ก์ด ๋ฆฌ์ŠคํŠธ์—์„œ ์ง€์›Œ์ง„๋‹ค.UI2-1. ์‚ฌ

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

menu์— border ์ ์šฉ์‹œ ์นธ์ด ์›€์ง์ด๋Š” ์—๋Ÿฌ ํ•ด๊ฒฐ

๋ฉ”๋‰ด์— ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ border์™€ background-color๋ฅผ ๋ณ€ํ•˜๋„๋ก ์ง€์ •ํ–ˆ๋”๋‹ˆ, ๊ธฐ์กด ์‚ฌ์ด์ฆˆ์—์„œ border๊ฐ€ ์ ์šฉ๋˜์–ด์„œ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ฐ”๋€Œ๋ฉด์„œ ๋ฉ”๋‰ด๋“ค์ด ์›€์ง์ด๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋‹ค.ํ‰์†Œ์—๋Š” border: transparent;๋ฅผ ์ฃผ๊ณ ,๋งˆ์šฐ์Šค hover์ผ ๋•Œ๋Š”

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

ํ™”๋ฉด์„ ์Šคํฌ๋กค ํ–ˆ์„ ๋•Œ ํ™”๋ฉด์˜ ๋งจ ์œ„๋กœ ์˜ฌ๋ผ๊ฐ€๋„๋ก ์ด๋ฒคํŠธ / ์ „์ฒด ์ด๋ฒคํŠธ๊ฐ€ ์Šคํฌ๋กค๋กœ ๋ฐ”๋€Œ๊ณ , ์Šคํฌ๋กค์ด ๋Š๋ฆฌ๊ฒŒ ์˜ฌ๋ผ๊ฐ€๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

์šฐ์„  ํ™”๋ฉด์—์„œ ์Šคํฌ๋กค์„ ํ•  ๋•Œ ๊ทธ ํ™”๋ฉด์˜ ๋†’์ด๊ฐ€ ํ™ˆ ํ™”๋ฉด์˜ ๋†’์ด๋ฅผ ๋„˜์–ด๊ฐ€๊ฒŒ ๋˜๋ฉด, ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•  ๋ฒ„ํŠผ์„ ๋ณด์ด๊ฒŒ ํ•˜๊ณ , ์Šคํฌ๋กค ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค.๊ทธ๋Ÿฐ๋ฐ, ์šฐ์„  ํ™”๋ฉด ์˜์—ญ์— ๋”ฐ๋ผ ๋ฒ„ํŠผ์„ ๋ณด์ด๊ณ , ๊ฐ์ถ”๋Š” ๊ฒƒ์€ ์ž˜ ์ ์šฉ๋˜์—ˆ์œผ๋‚˜,์Šคํฌ๋กค ์ด๋ฒคํŠธ๋ฅผ ๋”ฐ๋กœ ์ •์˜ํ•ด ๋†“

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

ํ™”๋ฉด์˜ ํ™ˆ ๋ถ€๋ถ„ ์Šคํฌ๋กค ์‹œ ์ปจํ…์ธ  ์„œ์„œํžˆ ํ๋ฆฌ๊ฒŒ ๋งŒ๋“ค๊ธฐ / ์ „์ฒด๊ฐ€ ๋‹ค ํ๋ ค์ง€๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

์›น ํŽ˜์ด์ง€์˜ ๋ฉ”๋‰ด๋ฅผ ๋นผ๋ฉด ์ œ์ผ ์ƒ๋‹จ์„ home๋ถ€๋ถ„์œผ๋กœ ๋งŒ๋“ค์–ด ๋†“์•˜๋‹ค.์šฐ์„  Element.getBoundingClientRect()๋ฅผ ์ด์šฉํ•ด์„œ home์˜์—ญ์˜ ํฌ๊ธฐ๋ฅผ ๊ตฌํ•˜๊ธฐ๋˜ window.scrollY์˜ ๊ฐ’์„ ๊ตฌํ•ด์„œ ์œ„์—์„œ ๊ตฌํ•œ home ์˜์—ญ์„ ์ด์šฉํ•ด์„œ ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ๊ธฐhom

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

๋ฉ”๋‰ด ํด๋ฆญ ์‹œ ํ•ด๋‹น ๋ถ€๋ถ„์œผ๋กœ ์ด๋™ํ•˜๊ธฐ , ํ”„๋กœ์ ํŠธ ์„น์…˜ ๋ถ€๋ถ„์ด navbar ์œ„๋กœ ์˜ฌ๋ผ์˜ค๋Š” ์—๋Ÿฌ ๋ฐœ์ƒ

๋ฉ”๋‰ด๊ฐ€ ํด๋ฆญ๋˜๋ฉด ๊ฐ’์„ ๊ฐ€์ ธ์™€์„œ addEventListener์— ๋“ฑ๋กํ•œ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค.๋“ค์–ด์˜จ event ๊ฐ์ฒด์˜ target์— ์ ‘๊ทผํ•ด์„œ ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ์ผ์–ด๋‚œ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.๋ฉ”๋‰ด์˜ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์™€์„œ ํด๋ฆญ ์ด๋ฒคํŠธ๊ฐ€ ์ผ์–ด๋‚ฌ์„ ๋•Œ์˜ ๋™์ž‘์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋จผ์ € ๊ทธ ์š”์†Œ๋ฅผ ๊ฐ€

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

navbar scroll์‹œ ์—๋Ÿฌ ํ•ด๊ฒฐ / ๋ฉ”๋‰ด๊ณ ์ • ๋ฐ ์ƒ‰ ๋ณ€๊ฒฝ

menu ๊ตฌํ˜„ํ•˜๊ธฐ ํ™”๋ฉด์—์„œ ์Šคํฌ๋กค์„ ํ•˜๋ฉด, ๋ณดํ†ต ํ™”๋ฉด ์ƒ๋‹จ์— ์œ„์น˜ํ•œ ๋ฉ”๋‰ด๊ฐ€ ์‚ฌ๋ผ์งˆ๊นŒ? ์‚ฌ๋ผ์ง€๊ฒŒ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด, ์Šคํฌ๋กค ์‹œ ๋ฉ”๋‰ด๋ฅผ ์‚ฌ๋ผ์ง€๊ฒŒ ํ–ˆ๋‹ค๊ฐ€ ๋งˆ์šฐ์Šค๋ฅผ ํ™”๋ฉด์˜ ์ƒ๋‹จ์œผ๋กœ ๊ฐ€์ ธ๊ฐ€๋ฉด, ๋ฉ”๋‰ด๊ฐ€ ๋‚˜ํƒ€๋‚˜๋„๋ก ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ์ด๋ฒˆ์— ๊ตฌํ˜„ํ•˜๋ ค๊ณ ํ•˜๋Š” ๊ธฐ๋Šฅ์€ ๋ฉ”๋‰ด๊ฐ€ ์ƒ๋‹จ์—

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

background image ํ™”๋ฉด ํฌ๊ธฐ์— ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ ๋ฐœ์ƒ

css์—์„œ background ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ url๋กœ ํ•ด๋‹น ๊ฒฝ๋กœ์˜ ์ด๋ฏธ์ง€๋ฅผ ์ง€์ •ํ•ด ์ค€ ํ›„ ์ด๋ฏธ์ง€๋ฅผ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  no-repeat๋ฅผ ์ถ”๊ฐ€์ ์œผ๋กœ ์„ค์ •ํ•ด์ฃผ์—ˆ๋Š”๋ฐ ๋˜ ํ•˜๋‚˜๊ฐ€ ์ƒ๊ฐ๋Œ€๋กœ ์ž˜ ๋˜์ง€ ์•Š์•˜๋‹ค.์ด๋ฏธ์ง€๊ฐ€ ๋ฐ˜๋ณต๋˜์ง€ ์•Š๋Š” ๊ฒƒ์€ ์ž˜ ์ ์šฉ๋˜์—ˆ์ง€๋งŒ, ํ™”๋ฉดํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ณ  ์ค„์ผ

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

navbar ๋ฉ”๋‰ด ์„ ํƒ ์‹œ ์—๋Ÿฌ ํ•ด๊ฒฐ

nav ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ulํƒœ๊ทธ ๋ฐ‘์— li๋“ค์„ ๋งŒ๋“ค์–ด์„œ ๋ฉ”๋‰ด๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๊ณ  ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€๋‹ค.css์—์„œ ํ•ด๋‹น liํƒœ๊ทธ์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ธ์„ ๋•Œ ๋™์ž‘์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•  ๊นŒ ์ƒ๊ฐํ–ˆ๋‹ค.์‚ฌ์šฉ์ž์—๊ฒŒ ํด๋ฆญ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•ด cursor: pointer ๋ฅผ ์ฃผ์—ˆ๋‹ค. hove

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

fetch, weather API ํ™œ์šฉ

๊ฐ์ฒด ๋ฐ ๋ฐฐ์—ด์„ JavaScript๋กœ ๋‹ค๋ฃจ๊ธฐUI๋ฅผ ์™€์ด์–ดํ”„๋ ˆ์ž„์œผ๋กœ ๊ทธ๋ฆฐ ํ›„, HTML & CSS๋กœ ๋””์ž์ธํ•˜๊ธฐํŠน์ • ๋„์‹œ์™€ ํ˜„์žฌ ์‹œ์ ์— ๋Œ€ํ•œ ๋‚ ์”จ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ๊ฐ์ฒด๋กœ ์ฃผ์–ด์ง€๋Š” ๋‚ ์”จ ๋ฐ์ดํ„ฐ ๊ฐ’์„ ํŠน์ • element์— DOM์„ ํ™œ์šฉํ•˜์—ฌ ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง ํ•˜๊ธฐ์ž์›(resource

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

addEventListener, ํ•จ์ˆ˜ ์ž‘์„ฑ

addEventListener( )๋Š” EventTarget์˜ ํ•จ์ˆ˜์ด๋‹ค.addEventListener( ) ๋ฉ”์†Œ๋“œ๋Š” ์ง€์ •ํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋Œ€์ƒ์— ์ „๋‹ฌ๋  ๋•Œ ๋งˆ๋‹ค ํ˜ธ์ถœํ•  ํ•จ์ˆ˜๋ฅผ ์„ค์ •ํ•œ๋‹ค.์‚ฌ์šฉ๋ฐฉ๋ฒ•์—๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.1\. ํ‘œํ˜„์‹์„ ํ†ตํ•ด ๊ตฌํ˜„ํ•œ ํ•จ์ˆ˜๋ฅผ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•2\. ์ต๋ช…ํ•จ์ˆ˜

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