CSS에서 text-shadow 속성을 사용하면 텍스트 주위에 그림자 효과를 손쉽게 설정할 수 있습니다. 이 속성은 가로 오프셋, 세로 오프셋, 흐림 반경(blur radius), 그림자 색상의 네 가지 값을 순서대로 지정합니다.
text-shadow 속성 구문
기본 구문은 다음과 같습니다.
text-shadow: 가로오프셋 세로오프셋 흐림반경 색상;
- 가로 오프셋: 그림자가 좌우로 얼마나 이동할지 지정합니다. 양수는 오른쪽, 음수는 왼쪽으로 이동합니다.
- 세로 오프셋: 그림자가 상하로 얼마나 이동할지 지정합니다. 양수는 아래쪽, 음수는 위쪽으로 이동합니다.
- 흐림 반경: 그림자의 번짐 정도를 결정합니다. 값이 클수록 더 부드럽고 퍼진 그림자가 만들어집니다.
- 색상: 그림자의 색을 지정합니다. 색상 이름, HEX 코드, RGBA 값 등을 사용할 수 있습니다.
예제 코드
아래 예제는 text-shadow 속성을 적용하여 빨간색 그림자가 있는 텍스트를 표시합니다. 코드를 직접 실행해 보며 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "text-shadow:2px 2px 5px red;"> 인도는 아시아 대륙에 위치한 국가입니다. </p> </body> </html>
다양한 활용 예시
흐림 반경이나 색상을 조절하면 다양한 분위기의 텍스트 효과를 연출할 수 있습니다. 예를 들어 여러 개의 그림자를 콤마(,)로 구분해 지정하면 네온사인 느낌의 글로우 효과도 만들 수 있습니다.
<p style = "text-shadow:0 0 5px #fff, 0 0 10px #ff0000;"> 네온 글로우 효과 텍스트 </p>
이처럼 text-shadow 속성은 웹 페이지의 제목이나 강조 문구에 시각적 깊이를 더하는 데 유용하게 활용됩니다.