CSS에서 텍스트 주위에 그림자를 설정하려면 text-shadow 속성을 사용합니다. 이 속성을 활용하면 글자에 입체감을 더하거나 가독성을 높이는 다양한 시각적 효과를 손쉽게 구현할 수 있습니다.
text-shadow 속성의 기본 문법
text-shadow 속성은 다음과 같은 형식으로 작성합니다.
text-shadow: 가로거리 세로거리 흐림정도 색상;
각 값의 의미는 다음과 같습니다.
- 가로 거리(h-shadow): 그림자가 수평 방향으로 얼마나 이동할지 지정합니다. 양수는 오른쪽, 음수는 왼쪽으로 이동합니다.
- 세로 거리(v-shadow): 그림자가 수직 방향으로 얼마나 이동할지 지정합니다. 양수는 아래쪽, 음수는 위쪽으로 이동합니다.
- 흐림 정도(blur-radius): 선택 사항이며, 값이 클수록 그림자가 부드럽고 흐릿하게 표현됩니다.
- 색상(color): 그림자의 색을 지정합니다. 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있습니다.
예제
아래 예제를 실행하면 텍스트에 초록색 그림자가 적용되는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "text-shadow:3px 1px 4px green;"> 브라우저가 CSS text-shadow 속성을 지원한다면, 이 텍스트에는 초록색 그림자가 나타납니다. </p> </body> </html>
위 코드에서 3px는 그림자가 오른쪽으로 3픽셀 이동하고, 1px는 아래로 1픽셀 이동함을 의미합니다. 4px는 그림자의 흐림 정도를 나타내며, 마지막의 green은 그림자 색상을 지정합니다.
또한 쉼표로 구분하여 여러 개의 그림자를 동시에 적용할 수도 있습니다. 예를 들어 text-shadow: 2px 2px 3px gray, -2px -2px 3px lightblue;처럼 작성하면 두 방향에서 서로 다른 그림자 효과를 만들 수 있어 더욱 풍부한 디자인 연출이 가능합니다.