[HTML/CSS] 그림자 효과 만들기 (Text-Shadow, Box-Shadow)

코딩으로 그래픽 효과처럼 만들 수 있는 방법 중 하나로
텍스트나 요소에 그림자를 주어 꾸며줄 수 있습니다

 

텍스트 그림자 효과주기

text-shadow

기본 문법 예시

text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>

 

속성 값	기능	기타
none	그림자 없음	기본값
*가로 거리 (hoff)	텍스트와 그림자 사이의 가로 거리	양수 값 : 글자의 오른쪽 음수 값 : 글자의 왼쪽
*세로 거리 (voff)	텍스트와 그림자 사이의 세로 거리	양수 값 : 글자의 아래쪽 음수 값 : 글자의 위쪽
번짐 정도 (blur)	그림자가 번지는 정도	양수 값 : 글자 밖 음수 값 : 글자 안 기본값 : 0
색상	그림자 색상	현재 글자색이 기본값

 

텍스트에 기본 그림자 효과주기 예시

See the Pen Untitled by haru (@haru_day) on CodePen.

 

텍스트에 그래픽처럼 효과넣기 (중첩 효과주기) 예시

See the Pen Untitled by haru (@haru_day) on CodePen.

 

---

 

요소에 그림자 효과주기

box-shadow

기본 문법 예시

box-shadow : none | <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

 

속성 값	기능	기타
none	그림자 없음	기본값
*수평 거리	수평 옵셋 거리	양수 값 : 요소의 오른쪽 음수 값 : 요소의 왼쪽
*수직 거리	수직 옵셋 거리	양수 값 : 요소의 아래쪽 음수 값 : 요소의 위쪽
흐림 정도	값이  커질 수록 부드러움 표현	기본 값 : 0 음수 값 사용 못 함
번짐 정도	그림자가 번지는 정도	양수 값 : 밖으로 퍼짐 음수 값 : 수축되어 보임 기본값 : 0
색상	그림자 색상	현재 글자색이 기본값
inset	안쪽 그림자

 

요소에 그림자 효과주기 예시

See the Pen box-shadow by haru (@haru_day) on CodePen.

 

TIP!
- 각 속성 값의 단위가 같아 순서대로 작성해 주어야 합니다!
- 가로 거리, 세로 거리 등 거리를 나타내는 속성 값은 필수로 작성해 주어야 효과가 표현됩니다

 

---

 

관련 포스트

박스 모델 알아보기 & 관련 속성 알아보기 (Box Model)

[HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model)

텍스트 스타일 알아보기 (TEXT)

[CSS] 텍스트 스타일 알아보기 (TEXT)

---

 

참조 자료

https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

https://getcssscan.com/css-box-shadow-examples