CSS : Shadow

daymoon_ยท2022๋…„ 3์›” 9์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
12/18
post-thumbnail
post-custom-banner

๊ทธ๋ฆผ์ž(Shadow)

ํ…์ŠคํŠธ๋‚˜ ์š”์†Œ์— ๊ทธ๋ฆผ์ž(Shadow) ํšจ๊ณผ๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ํ”„๋กœํผํ‹ฐ์ด๋‹ค.


๐ŸŽจ ์ข…๋ฅ˜

  • text-shadow
  • box-shadow

ํ…์ŠคํŠธ ๊ทธ๋ฆผ์ž(text-shadow)

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
MDN text-shadow
W3SCHOOLS CSS text-shadow Property
CODINGFACTORY text-shadow

ํ…์ŠคํŠธ์— ๊ทธ๋ฆผ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” CSS ์†์„ฑ์ด๋‹ค.

๊ฐ ๊ทธ๋ฆผ์ž๋Š” ์š”์†Œ, ํ๋ฆผ ๋ฐ˜๊ฒฝ ๋ฐ ์ƒ‰์ƒ์˜ X ๋ฐ Y ์˜คํ”„์…‹ ์กฐํ•ฉ์œผ๋กœ ์„ค๋ช…๋œ๋‹ค.


๐Ÿ“ ๊ตฌ๋ฌธ

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
poiemaweb CSS3 Shadow
MDN inherit
MDN initial
MDN unset

text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color
  • Horizontal-offset : ๊ทธ๋ฆผ์ž์˜ ์ˆ˜ํ‰ ๊ฑฐ๋ฆฌ โ–ถ ํ•„์ˆ˜
  • Vertical-offset : ๊ทธ๋ฆผ์ž์˜ ์ˆ˜์ง ๊ฑฐ๋ฆฌ โ–ถ ํ•„์ˆ˜
  • Blur-Radius : ๊ทธ๋ฆผ์ž์˜ ํ๋ฆผ ์ •๋„ ์ง€์ • โ–ถ ์„ ํƒ
  • Shadow-Color : ๊ทธ๋ฆผ์ž์˜ ์ƒ‰์ƒ ์ง€์ • โ–ถ ์„ ํƒ

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
  • inherit : ๋ถ€๋ชจ ์š”์†Œ์˜ ์†์„ฑ๊ฐ’์„ ์ƒ์†๋ฐ›๋Š”๋‹ค.
  • initial : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.
  • unset : ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์ƒ์†ํ•  ๊ฐ’์ด ์กด์žฌํ•˜๋ฉด ์ƒ์†๊ฐ’์„, ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ์ดˆ๊นƒ๊ฐ’์„ ์‚ฌ์šฉํ•œ๋‹ค.


๋ฐ•์Šค ๊ทธ๋ฆผ์ž(box-shadow)

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
MDN box-shadow
W3SCHOOLS CSS Box Shadow
CODINGFACTORY box-shadow

์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ์— ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” CSS ์†์„ฑ์ด๋‹ค.

๋ฐ•์Šค ๊ทธ๋ฆผ์ž๋Š” ์š”์†Œ์—์„œ์˜ ์ˆ˜ํ‰์ˆ˜์ง ๊ฑฐ๋ฆฌ(์˜คํ”„์…‹), ํ๋ฆฟํ•จ๊ณผ ํ™•์‚ฐ ์ •๋„, ์ƒ‰์ƒ์œผ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.


๐Ÿ“ ๊ตฌ๋ฌธ

๐Ÿ“Œ ์ฐธ๊ณ ์ž๋ฃŒ
poiemaweb CSS3 Shadow

box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color
  • Inset : ๊ทธ๋ฆผ์ž๊ฐ€ ์š”์†Œ ์•ˆ์ชฝ์— ์œ„์น˜ โ–ถ ์„ ํƒ
  • Horizontal-offset : ๊ฐ€๋กœ ์œ„์น˜ (์–‘์ˆ˜ : ์˜ค๋ฅธ์ชฝ & ์Œ์ˆ˜ : ์™ผ์ชฝ) โ–ถ ํ•„์ˆ˜
  • Vertical-offset : ์„ธ๋กœ ์œ„์น˜ (์–‘์ˆ˜ : ์•„๋ž˜์ชฝ & ์Œ์ˆ˜ : ์œ„์ชฝ) โ–ถ ํ•„์ˆ˜
  • Blur-Radius : ๊ทธ๋ฆผ์ž์˜ ํ๋ฆผ ์ •๋„ โ–ถ ์„ ํƒ
  • Spread : ๊ทธ๋ฆผ์ž ํ™•์žฅ ๋ฐ ์ถ•์†Œ (์–‘์ˆ˜ : ํ™•์žฅ & ์Œ์ˆ˜ : ์ถ•์†Œ) โ–ถ ์„ ํƒ
  • Shadow-Color : ๊ทธ๋ฆผ์ž์˜ ์ƒ‰์ƒ โ–ถ ์„ ํƒ

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
  • inherit : ๋ถ€๋ชจ ์š”์†Œ์˜ ์†์„ฑ๊ฐ’์„ ์ƒ์†๋ฐ›๋Š”๋‹ค.
  • initial : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.
  • unset : ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์ƒ์†ํ•  ๊ฐ’์ด ์กด์žฌํ•˜๋ฉด ์ƒ์†๊ฐ’์„, ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ์ดˆ๊นƒ๊ฐ’์„ ์‚ฌ์šฉํ•œ๋‹ค.


profile
๋ฏธ์ง€์˜ ๊ณต๊ฐ„๐ŸŒ™
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€