Shadow

1. κ°œμš”

shadowλŠ” ν…μŠ€νŠΈλ‚˜ μš”μ†Œμ— 그림자효과λ₯Ό λΆ€μ—¬ν•˜κΈ° μœ„ν•œ ν”„λ‘œνΌν‹°μ΄λ‹€.

2. text-shadow

text-shadowλŠ” κΈ€μžμ— 그림자 효과λ₯Ό μ£ΌλŠ” ν”„λ‘œνΌν‹°μ΄λ‹€.

μ‚¬μš©λ²• text-shadow: offset-x offset-y blur-radius color | none | initial | inherit

μ•„λž˜λŠ” text-shadow의 ν”„λ‘œνΌν‹° κ°’μ˜ μ„€λͺ…이닀.

ν”„λ‘œνΌν‹° κ°’
μ„€λͺ…
μƒλž΅

offset-x

그림자λ₯Ό ν…μŠ€νŠΈμ˜ 였λ₯Έμͺ½μœΌλ‘œ μ§€μ •κ°’λ§ŒνΌ μ΄λ™μ‹œν‚¨λ‹€.

λΆˆκ°€λŠ₯

offset-y

그림자λ₯Ό ν…μŠ€νŠΈμ˜ μ•„λž˜λ‘œ μ§€μ •κ°’λ§ŒνΌ μ΄λ™μ‹œν‚¨λ‹€.

λΆˆκ°€λŠ₯

blur-radius

그림자의 흐림정도λ₯Ό μ§€μ •ν•œλ‹€. μ§€μ •κ°’λ§ŒνΌ κ·Έλ¦Όμžκ°€ 컀지고 흐렀진닀.

κ°€λŠ₯

shadow-color

그림자의 색상을 μ§€μ •ν•œλ‹€.

κ°€λŠ₯

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2:nth-child(1) {
        text-shadow: 3px 3px;
      }
      h2:nth-child(2) {
        text-shadow: 3px 3px 3px;
      }
      h2:nth-child(3) {
        text-shadow: 3px 3px 3px gray;
      }
      h2:nth-child(4) {
        color: white;
        text-shadow: 3px 3px 3px black;
      }
      h2:nth-child(5) {
        color: white;
        text-shadow: 0px 0px 3px black;
      }
      h2:nth-child(6) {
        color: white;
        text-shadow: 3px 3px 3px black, 3px 3px 3px gray;
      }
    </style>
  </head>
  <body>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
  </body>
</html>
text-shadow

3. box-shadow

box-shadowλŠ” μ„ νƒν•œ μš”μ†Œμ— 그람자 효과λ₯Ό λ§Œλ“€μ–΄ μ€€λ‹€.

μ‚¬μš©λ²• box-shadow: x-position y-position blur spread color | inset | initial | inherit

μ•„λž˜λŠ” box-shadow의 ν”„λ‘œνΌν‹° κ°’μ˜ μ„€λͺ…이닀.

ν”„λ‘œνΌν‹° κ°’
μ„€λͺ…
μƒλž΅

x-position

κ°€λ‘œ μœ„μΉ˜, μ–‘μˆ˜λ©΄ 였λ₯Έμͺ½, 음수면 μ™Όμͺ½μ— κ·Έλ¦Όμžκ°€ λ§Œλ“€μ–΄μ§„λ‹€.

λΆˆκ°€λŠ₯

y-position

μ„Έλ‘œ μœ„μΉ˜, μ–‘μˆ˜λ©΄ μ•„λž˜μͺ½, 음수면 μœ„μͺ½μ— κ·Έλ¦Όμžκ°€ λ§Œλ“€μ–΄μ§„λ‹€.

λΆˆκ°€λŠ₯

blur

그림자λ₯Ό νλ¦Ών•˜κ²Œ λ§Œλ“ λ‹€. 값이 클수둝 λ”μš± 흐렀진닀.

κ°€λŠ₯

spread

μ–‘μˆ˜λ©΄ 그림자λ₯Ό ν™•μž₯ν•˜κ³ , 음수면 μΆ•μ†Œν•œλ‹€.

κ°€λŠ₯

color

그림자 색을 μ •ν•œλ‹€.

κ°€λŠ₯

inset

그림자λ₯Ό μš”μ†Œμ˜ μ•ˆμͺ½μ— λ§Œλ“ λ‹€.

κ°€λŠ₯

inital

κΈ°λ³Έκ°’μœΌλ‘œ μ„€μ •ν•œλ‹€.

κ°€λŠ₯

inherit

λΆ€λͺ¨ μš”μ†Œμ˜ 속성값을 μƒμ†λ°›λŠ”λ‹€.

κ°€λŠ₯

box-shadow

μ°Έκ³ 

CSS / text-shadow / κΈ€μžμ— 그림자 효과λ₯Ό μ£ΌλŠ” 속성arrow-up-right CSS / box-shadow / λ°•μŠ€μ— 그림자 효과 λ§Œλ“œλŠ” 속성arrow-up-right poiemaweb 2-12 그림자arrow-up-right


πŸ‘†

πŸ“… 2022-07-21

Last updated