CSS 그림자

(2023-11-15)

text-shadow, box-shadow


1. CSS 텍스트의 그림자 속성 : text-shadow       ☞ MDN (Mozilla) : text-shadow 참조

  ㅇ (형식1) { text-shadow : offset-x offset-y blur-radius color }
  ㅇ (형식2) { text-shadow : color offset-x offset-y blur-radius }
     - offset-x : 그림자 수평위치 offset (필수)
     - offset-y : 그림자 수직위치 offset (필수)
        . 음수 값은 텍스트의 왼쪽에 그림자가 나타남
     - blur-radius : 흐림도(번짐), 번짐 효과 크기 blurriness (선택)
     - color : 그림자 색상 (선택)  ☞ CSS 색상 참조
        . color 생략되면 텍스트의 foreground color가 적용됨


2. CSS 박스의 그림자 속성 : box-shadow          ☞ MDN (Mozilla) : box-shadow 참조

  ※ (박스 프레임 주위에 그림자 효과를 줌)

  ㅇ (형식1) { box-shadow : offset-x offset-y }
  ㅇ (형식2) { box-shadow : offset-x offset-y color }
  ㅇ (형식3) { box-shadow : offset-x offset-y blur-radius color }
  ㅇ (형식4) { box-shadow : offset-x offset-y blur-radius spread-radius color }
  ㅇ (형식5) { box-shadow : inset offset-x offset-y color }
     - offset-x : 그림자 수평위치 offset (필수)
     - offset-y : 그림자 수직위치 offset (필수)
        . 음수 값은 박스의 왼쪽에 그림자가 나타남
     - color : 그림자 색상 (선택)  ☞ CSS 색상 참조
        . color 생략되면 박스의 foreground color가 적용됨
     - blur-radius : 흐림도(번짐), 번짐 효과 크기 (blurriness) (선택)
        . 값이 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐 (≥ 0)
        . 만일, 0 이면, 흐릿한 그림자가 아닌, 배경색 입힌 뚜렷한 도형 처럼 표현됨     ☞ CSS 배경
     - spread-radius 
        . 0 => 그림자와 요소 크기 동일
        . 양수 => 그림자가 요소보다 더 커지고 확산
        . 음수 => 그림자가 요소보다 더 작아짐/줄어듬
     - inset : inset 키워드 적용시, 그림자가 안쪽에 생성됨 (선택)

색상,배경,그림자
   1. CSS 색상   2. CSS 배경   3. CSS 그림자  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"