๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

box-shadow1

CSS) box-shadow ์†์„ฑ ์ด๊ณณ์ €๊ณณ์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ฐ•์Šค ์ฃผ์œ„์— ๊ทธ๋ฆผ์ž๊ฐ€ ์ƒ๊ธฐ๋Š” ๋””์ž์ธ์„ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ์†์„ฑ์ด ๋ฐ”๋กœ box-shadow ์ด๋‹ค. box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); ์ฒซ๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๊ฐ€ ๊ฐ€๋กœ์ถ•์œผ๋กœ ์ด๋™ํ•˜๋Š”์ง€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ฐ’์ด +๋ฉด ์˜ค๋ฅธ์ชฝ์œผ๋กœ, -๋ฉด ์™ผ์ชฝ์œผ๋กœ ๊ทธ๋ฆผ์ž๊ฐ€ ๋ป—์–ด๋‚˜๊ฐ„๋‹ค. ๋‘๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๊ฐ€ ์„ธ๋กœ์ถ•์œผ๋กœ ์–ผ๋งˆ๋‚˜ ์ด๋™ํ•˜๋Š”์ง€, ์„ธ๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๋ฅผ ์–ผ๋งˆ๋‚˜ ํ๋ฆฌ๊ฒŒ ํ• ์ง€, ๋„ค๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๋ฅผ ์–ผ๋งˆ๋‚˜ ํผ์ง€๊ฒŒ ํ• ์ง€๋ฅผ ์ •ํ•œ๋‹ค. ๋งˆ์ง€๋ง‰ rgba๊ฐ’์„ ์ด์šฉํ•ด ๊ทธ๋ฆผ์ž์˜ ์ƒ‰์ƒ, ํˆฌ๋ช…๋„๋ฅผ ์„ค์ •ํ•œ๋‹ค. ๊ฐ€๋กœ์ถ• ์„ธ๋กœ์ถ• ๋ธ”๋Ÿฌ ์Šคํ”„๋ ˆ๋“œ 2021. 10. 29.
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”