웹 디자인에서 텍스트에 입체감을 더하고 싶을 때 text-shadow 속성을 활용하면 효과적입니다. 이 속성을 사용하면 흰색 텍스트 뒤에 검은 그림자를 추가하여 가독성과 시각적 깊이를 동시에 높일 수 있습니다.
text-shadow 속성의 기본 문법
text-shadow 속성은 최대 네 개의 값을 받습니다.
- 수평 오프셋: 그림자가 오른쪽(양수) 또는 왼쪽(음수)으로 이동하는 거리
- 수직 오프셋: 그림자가 아래쪽(양수) 또는 위쪽(음수)으로 이동하는 거리
- 흐림 반경(blur radius): 선택 사항으로, 값이 클수록 그림자가 부드럽게 퍼짐
- 그림자 색상: hex 코드, rgb, rgba 등으로 지정 가능
예제 코드
다음 예제는 h1 요소에 흰색 텍스트와 검은 그림자 효과를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 3px 3px 3px #000000;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>위 제목에는 텍스트 그림자 효과가 적용되어 있습니다.</p>
</body>
</html>코드 설명
위 예제에서 text-shadow: 3px 3px 3px #000000;는 다음과 같은 의미를 가집니다.
- 그림자가 텍스트에서 오른쪽으로 3px, 아래로 3px 이동합니다.
- 3px의 흐림 효과가 적용되어 그림자 가장자리가 자연스럽게 부드러워집니다.
#000000은 검은색을 나타냅니다.
활용 팁
배경이 어두운 이미지 위에 흰색 텍스트를 배치할 때 이 기법을 사용하면 텍스트가 배경과 구분되어 훨씬 잘 보입니다. 또한 쉼표로 여러 그림자를 구분하여 나열하면 네온 효과나 더욱 입체적인 타이포그래피를 만들 수도 있습니다.