Banner

My Tech Blog (๋Œ€๊ฐ์„ )

โœจ์‚ฌ์ง„์— ์Œ์˜ ์ถ”๊ฐ€ํ•˜๊ธฐโœจ ์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ ์‚ฌ์ง„์— ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์ง„์„ ๊พธ๋ฏธ๋Š” ๋ฒ•์„ ๋ฐฐ์›Œ๋ด…์‹œ๋‹ค. ๋‹จ์ƒ‰ ์Œ์˜, ์ค„๋ฌด๋Šฌ ์Œ์˜, ์  ๋ชจ์–‘ ์Œ์˜ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ• ์•Œ๋ ค๋“œ๋ฆด๊ฒŒ์š”. ํฌํ† ์ƒต์ด๋‚˜ ์ผ๋Ÿฌ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ HTML๊ณผ CSS๋งŒ์œผ๋กœ ์ž‘์—… ํ• ๊ฑฐ๋‹ˆ๊นŒ Vscode์—์„œ ๋”ฐ๋ผํ•ด์ฃผ์„ธ์š”. ๐Ÿ“Œ STEP 1. ๋‹จ์ƒ‰ ์Œ์˜ ์ถ”๊ฐ€ํ•˜๊ธฐ โ˜‘๏ธ HTML โ˜‘๏ธ CSS img { box-shadow: offset-x offset-y blur-radius color; } img { box-shadow: 20px 20px 0 #efcfd6; } ๐Ÿ“Œ STEP 2. ์ค„๋ฌด๋Šฌ ์Œ์˜ ๋ฐฐ์น˜ํ•˜๊ธฐ ๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž ::before์„ ํ™œ์šฉํ•˜๋ฉด ์ž์—ฐ์Šค๋Ÿฝ๊ณ  ์žฌ๋ฏธ์žˆ๋Š” ๋Š๋‚Œ์„ ์ฃผ๋Š” ๋Œ€๊ฐ์„  ์ค„๋ฌด๋Šฌ๋ฅผ ๋””์ž์ธํ•  ์ˆ˜ ์žˆ์–ด์š”. โ˜‘๏ธ HTML ์ด๋ฒˆ์—๋Š” ์ด๋ฏธ์ง€ ํƒœ๊ทธ๋ฅผ div ..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'๋Œ€๊ฐ์„ ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก
์ƒ๋‹จ์œผ๋กœ