๐Ÿ’ปCSS ๋ฐ•์Šค ์‰๋„์šฐ ์ƒ์„ฑ๊ธฐ

์Šฌ๋ผ์ด๋”๋กœ ๊ฐ’์„ ์กฐ์ ˆํ•˜๋ฉด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ•์Šค ์‰๋„์šฐ๋ฅผ ๋ฏธ๋ฆฌ๋ณด๊ณ  CSS ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒ์„ฑ๋œ CSS ์ฝ”๋“œ
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);

๊ด€๋ จ๋œ ๋„๊ตฌ

๐Ÿ“

PX โ†’ REM/EM ๋ณ€ํ™˜๊ธฐ

๊ธฐ์ค€ ํฐํŠธ ํฌ๊ธฐ๋กœ PXยทREMยทEM ๋‹จ์œ„ ์ฆ‰์‹œ ๋ณ€ํ™˜

 ๐ŸŒ™

๋‹คํฌ ๋ชจ๋“œ ์ƒ‰์ƒ ์ „ํ™˜ ๊ฐ€์ด๋“œ

๋ผ์ดํŠธ ๋ชจ๋“œ ์ƒ‰์ƒ์„ ๋‹คํฌ ๋ชจ๋“œ์— ๋งž๊ฒŒ ๋ณ€ํ™˜

CSS box-shadow๋ž€?

CSS์˜ box-shadow ์†์„ฑ์€ HTML ์š”์†Œ์— ํ•˜๋‚˜ ์ด์ƒ์˜ ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆผ์ž์˜ ์œ„์น˜(XยทY ์˜คํ”„์…‹), ํ๋ฆผ ์ •๋„(๋ธ”๋Ÿฌ), ํฌ๊ธฐ(์Šคํ”„๋ ˆ๋“œ), ์ƒ‰์ƒ๊ณผ ํˆฌ๋ช…๋„๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์นด๋“œ ์ปดํฌ๋„ŒํŠธ, ๋ฒ„ํŠผ, ๋ชจ๋‹ฌ ์ฐฝ, ์ž…๋ ฅ ํ•„๋“œ ๋“ฑ ๋‹ค์–‘ํ•œ UI ์š”์†Œ์— ์ž…์ฒด๊ฐ๊ณผ ๊นŠ์ด๊ฐ์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ํ™œ์šฉ๋ฉ๋‹ˆ๋‹ค.

box-shadow ์†์„ฑ๊ฐ’ ์„ค๋ช…

box-shadow๋Š” ๋‹ค์Œ ์ˆœ์„œ๋กœ ๊ฐ’์„ ๋ฐ›์Šต๋‹ˆ๋‹ค: [inset] offset-x offset-y [blur-radius] [spread-radius] color. offset-x์™€ offset-y๋Š” ํ•„์ˆ˜๊ฐ’์œผ๋กœ, ๊ทธ๋ฆผ์ž๊ฐ€ ์›๋ณธ ์š”์†Œ์—์„œ ์–ผ๋งˆ๋‚˜ ์ด๋™ํ•˜๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. blur-radius๋Š” ๊ทธ๋ฆผ์ž ๊ฐ€์žฅ์ž๋ฆฌ์˜ ํ๋ฆผ ์ •๋„์ด๊ณ , spread-radius๋Š” ๊ทธ๋ฆผ์ž ํฌ๊ธฐ ์ž์ฒด๋ฅผ ํ™•์žฅํ•˜๊ฑฐ๋‚˜ ์ถ•์†Œํ•ฉ๋‹ˆ๋‹ค. inset ํ‚ค์›Œ๋“œ๋ฅผ ์•ž์— ์ถ”๊ฐ€ํ•˜๋ฉด ์š”์†Œ ์™ธ๋ถ€๊ฐ€ ์•„๋‹Œ ๋‚ด๋ถ€์— ๊ทธ๋ฆผ์ž๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

์ข‹์€ ๊ทธ๋ฆผ์ž ๋””์ž์ธ ํŒ

์ž์—ฐ์Šค๋Ÿฌ์šด ๊ทธ๋ฆผ์ž๋Š” ์‹ค์ œ ๊ด‘์›์ด ์œ„์— ์žˆ์„ ๋•Œ๋ฅผ ๊ฐ€์ •ํ•ด Y ์˜คํ”„์…‹์„ ์–‘์ˆ˜๋กœ, ๋ธ”๋Ÿฌ๋ฅผ ์ ๋‹นํžˆ ํฌ๊ฒŒ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ๊ฐ•ํ•œ ๊ทธ๋ฆผ์ž๋ณด๋‹ค ๋ฐ˜ํˆฌ๋ช…ํ•œ(rgba) ์ƒ‰์ƒ์„ ํ™œ์šฉํ•ด ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ํ‘œํ˜„ํ•˜๋ฉด ์„ธ๋ จ๋œ ๋Š๋‚Œ์„ ์ค๋‹ˆ๋‹ค. ๋‰ด๋ชจํ”ผ์ฆ˜(Neumorphism) ์Šคํƒ€์ผ์€ ๋ฐ์€ ๊ทธ๋ฆผ์ž์™€ ์–ด๋‘์šด ๊ทธ๋ฆผ์ž๋ฅผ ๋™์‹œ์— ์ ์šฉํ•ด ์ž…์ฒด์ ์ธ ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด๋ƒ…๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ (FAQ)

Q. box-shadow์™€ filter: drop-shadow์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

A. box-shadow๋Š” ์š”์†Œ์˜ ๋ฐ•์Šค ๋ชจ๋ธ ํ˜•ํƒœ์—๋งŒ ๊ทธ๋ฆผ์ž๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. filter: drop-shadow()๋Š” PNG์˜ ํˆฌ๋ช… ์˜์—ญ์„ ์ธ์‹ํ•ด ์‹ค์ œ ์ด๋ฏธ์ง€ ํ˜•ํƒœ์— ๋งž๋Š” ๊ทธ๋ฆผ์ž๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋ถˆ๊ทœ์น™ํ•œ ๋ชจ์–‘์˜ ์•„์ด์ฝ˜์ด๋‚˜ ์ด๋ฏธ์ง€์—๋Š” drop-shadow๊ฐ€ ๋” ์ž์—ฐ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

Q. ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ทธ๋ฆผ์ž๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

A. ๋„ค, ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„ํ•ด ์—ฌ๋Ÿฌ ๊ฐœ์˜ box-shadow๋ฅผ ๋™์‹œ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์— ์ž‘์„ฑํ•œ ๊ทธ๋ฆผ์ž๊ฐ€ ์œ„์— ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. ์˜ˆ: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);

Q. ์„ฑ๋Šฅ์— ์˜ํ–ฅ์ด ์žˆ๋‚˜์š”?

A. box-shadow๋Š” GPU ๊ฐ€์†์„ ๋ฐ›์ง€ ๋ชปํ•ด ๋ณต์žกํ•œ ๊ทธ๋ฆผ์ž๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋ฉด ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์—์„œ ์‚ฌ์šฉํ•  ๋•Œ๋Š” filter: drop-shadow๋‚˜ after ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ์„ฑ๋Šฅ์ƒ ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.