CSS의 text-shadow 속성은 텍스트 주변에 그림자 효과를 적용할 때 사용합니다. 이 속성을 활용하면 글자에 입체감을 더하거나 시각적으로 돋보이게 만들 수 있어 웹 디자인에서 자주 활용되는 기법입니다.
text-shadow 속성의 기본 문법
text-shadow 속성은 최대 네 개의 값을 순서대로 지정할 수 있습니다.
- 수평 오프셋(h-offset) – 그림자를 좌우로 얼마나 이동시킬지 지정합니다. 양수는 오른쪽, 음수는 왼쪽으로 이동합니다.
- 수직 오프셋(v-offset) – 그림자를 상하로 얼마나 이동시킬지 지정합니다. 양수는 아래쪽, 음수는 위쪽으로 이동합니다.
- 흐림 반경(blur-radius) – 선택 사항이며, 값이 클수록 그림자가 부드럽고 흐릿하게 표현됩니다.
- 색상(color) – 그림자의 색상을 지정합니다.
예제 코드
아래 예제를 실행하면 텍스트에 빨간색 그림자가 적용되는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-shadow:3px 2px 5px red;"> 브라우저가 CSS text-shadow 속성을 지원한다면, 이 텍스트에는 빨간색 그림자가 나타납니다. </p> </body> </html>
위 코드에서 3px는 수평 오프셋, 2px는 수직 오프셋, 5px는 흐림 반경, red는 그림자 색상을 의미합니다. 각 값을 조절하면서 원하는 그림자 스타일을 자유롭게 연출해 보세요.