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

p / h1~h6 / emphasis / anchor / img / list

ํƒœ๊ทธ์˜ ์šฉ๋„์™€ ์›น ํ‘œ์ค€์— ๋งž๊ฒŒ ์ž‘์„ฑํ•˜๊ณ , HTML๊ณผ CSS์˜ ์ค‘์š”์„ฑ์„ ์•Œ๊ธฐ ๋•Œ๋ฌธ์— ์›น์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋˜‘๋ฐ”๋กœ, ์ œ๋Œ€๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ HTML์„ ๊นŠ๊ฒŒ ๋ณต์Šตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.์˜๋ฏธ๊ฐ€ ๊ฐ™๊ธฐ๋•Œ๋ฌธ์— ์•„๋ฌด๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•ด๋„ ๋จem: strong: aํƒœ๊ทธ: ๋‹ค๋ฅธ ๊ณณ์œผ๋กœ ์ด๋™ํ•˜๊ธฐ ์œ„ํ•œ ํƒœ๊ทธattri

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

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

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

2021๋…„ 5์›” 11์ผ
ยท
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 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

ํ•จ์ˆ˜๋กœ ๋ฐ์ดํ„ฐ ๋‹ค๋ฃจ๊ธฐ

๊ธฐ์กด์—๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด html ํŒŒ์ผ์—๋‹ค๊ฐ€ ํƒœ๊ทธ๋กœ ๊ฐ’์„ ํ•˜๋“œ์ฝ”๋”ฉ ํ•ด๋†จ์—ˆ๋‹ค.jsํŒŒ์ผ์— ๊ฐ๊ฐ ๊ฐ์ฒด๋“ค์— ์ด๋ฆ„, ์ž‘์„ฑ์ผ, ๊ธ€ ๋‚ด์šฉ์„ ๋‹ด์•„๋†“์€ ๋ฐฐ์—ด์„ ๊ฐ€์ง€๊ณ ,๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ™”๋ฉด์— ๋ฐ์ดํ„ฐ๋“ค์„ ์ถœ๋ ฅํ•  ๊ฒƒ์ด๋‹ค.์ž…๋ ฅ๋ฐ›์€ ๋ฐฐ์—ด ์•ˆ์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ํ•˜๋‚˜์”ฉ ๋ฟŒ๋ฆฌ๋Š” ์ž‘์—…์„ ํ•œ๋‹ค.๋ฐ์ด

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

DOM

DOM์€ HTML์„ ๊ตฌ์กฐ์ ์œผ๋กœ ์ ‘๊ทผํ•œ๋‹ค.๊ทธ๋ ‡๊ธฐ๋•Œ๋ฌธ์— DOM์€ HTML์„ ๋‹จ์ˆœํ•œ ๋ฌธ์„œ์—์„œ ๊ทธ์น˜์ง€ ์•Š๊ณ , ์›น ์•ฑ์œผ๋กœ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ํ•ต์‹ฌ ํ‚ค๊ฐ€ ๋œ๋‹ค.๋ธŒ๋ผ์šฐ์ €์˜ ํ™˜๊ฒฝ์—์„œ DOM์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด์„œ ๊ธฐ์กด์— ์กด์žฌํ•˜๋Š” element์—

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

์›น ์•ฑ ๋ชจ์–‘ ๋งŒ๋“ค๊ธฐ

์›น ์•ฑ ๊ตฌํ˜„ํ•˜๊ธฐ > mock up > >

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

HTML, BOX

ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋ฉด, ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ์›นํŽ˜์ด์ง€์— ํƒœ๊ทธ๋“ค์— ๋งž๊ฒŒ ๋‚ด์šฉ์„ ํ‘œ์‹œํ•ด์ค€๋‹ค.HTML์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์‹คํ–‰ ํŒŒ์ผ์ด๋‹ค.HTML์€ markup์–ธ์–ด๋กœ ๊ตฌ์กฐ์ ์œผ๋กœ ํƒœ๊ทธ๋“ค์„ ์ด์šฉํ•ด์„œ ๋ณด์—ฌ์ง„๋‹ค.HTML ์ƒ์œ„ ํƒœ๊ทธ ์•ˆ์—๋Š” head, body

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

HTMLCollection / NodeList

HTMLCollection id ์†์„ฑ์„ ํ™œ์šฉํ•ด์„œ ํƒœ๊ทธ ์„ ํƒํ•˜๊ธฐ > getElementById( ) id๋ฅผ ์ด์šฉํ•ด์„œ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•  ๋•Œ ์กด์žฌํ•˜๋Š” ํƒœ๊ทธ๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด ํƒœ๊ทธ ์ „์ฒด์˜ ๊ฐ’์„ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค. > id๋ฅผ ์ด์šฉํ•ด์„œ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•  ๋•Œ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํƒœ๊ทธ๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด nul

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

Anchor

Anchor >์›นํŽ˜์ด์ง€์—์„œ ํŠน์ •ํ•œ ์œ„์น˜๋กœ ์ด๋™ํ•  ๋•Œ ์“ฐ์ด๋Š” ํƒœ๊ทธ๋ฅผ Anchor ํƒœ๊ทธ๋ผ๊ณ  ํ•œ๋‹ค. Anchorํƒœ๊ทธ๋Š” ํ˜„์žฌ ์œ„์น˜์—์„œ ๋‹ค๋ฅธ ๋งฅ๋ฝ, ์œ„์น˜๋กœ ์ด๋™ํ•  ๋•Œ ์“ฐ์ธ๋‹ค. > ``๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋™์ž‘์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค. > aํƒœ๊ทธ์—๋Š” attribute, ์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์„œ

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

Headings & Paragraph & Emphasis

Heading >๊ฐ ๊ธ€์—๋Š” ์ œ๋ชฉ์ด ์žˆ๊ณ , ์ค‘์š”๋„์— ๋”ฐ๋ผ ๊ธ€์”จ์˜ ํฌ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค. > Heading tag์—๋Š” 6๊ฐ€์ง€์˜ ํฌ๊ธฐ๊ฐ€ ์žˆ๋‹ค. h1 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. h2 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. h3 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. h4 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. h5 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. h6 ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. Paragraph >๋ฌธ๋‹จ,

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

Array Like Object

DOM์„ ๋‹ค๋ฃจ๊ธฐ ์ „์— ๊ธฐ๋ณธ์ ์œผ๋กœ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•ด์˜ค๋Š” ๋ฐฉ๋ฒ•์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์˜ค๋Š˜์€ HTMLCollection์— ๋Œ€ํ•ด์„œ ์ž์„ธํžˆ ๊ณต๋ถ€ํ•ด ๋ณผ๊ฒƒ์ด๋‹ค.javascript์—์„œ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.๊ทธ์ค‘ ๋จผ์ € id๋กœ ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•˜๋Š” ๋ฒ•๊ณผ class๋กœ ํƒœ๊ทธ๋ฅผ

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

nav ๊ณ ์ •์‹œํ‚ค๊ธฐ

navigation์„ ๊ณ ์ •์‹œํ‚ค๋Š” ๋„ˆ๋ฌด๋„ˆ๋ฌด ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ƒˆ๋‹ค. ๋ฐ”๋กœ sticky! ์ด๋ฆ„์—์„œ๋ถ€ํ„ฐ ์›ํ•˜๋Š” ์ž๋ฆฌ์— ๋”ฑ ๊ณ ์ •์‹œ์ผœ๋†“์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ๋งจ ์œ„์— ์Šคํฌ๋กค์„ ๋†จ์„ ๋•Œ์˜ ๋ชจ์Šต์ด๊ณ , navigation ๋ถ€๋ถ„์„ sticky๋ฅผ ์ค˜์„œ ํ™”๋ฉด top์— ๊ณ ์ •์‹œ์ผœ ๋†“์•„๋ณผ

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