CSS : Shadow

그림자(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 : 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용한다.