CSS에서는 text-shadow 속성을 사용하여 텍스트에 다양한 그림자 효과를 추가할 수 있습니다. 이 속성을 활용하면 글자에 입체감을 부여하거나 네온사인 같은 독특한 시각 효과를 연출할 수 있어 웹 디자인의 완성도를 높이는 데 큰 도움이 됩니다.
text-shadow 속성의 기본 문법
text-shadow 속성은 최대 네 개의 값을 순서대로 지정할 수 있습니다.
text-shadow: 가로거리 세로거리 흐림정도 색상;
- 가로 거리(h-shadow): 그림자가 좌우로 이동하는 거리 (음수 값 가능)
- 세로 거리(v-shadow): 그림자가 상하로 이동하는 거리 (음수 값 가능)
- 흐림 정도(blur-radius): 선택 사항으로, 값이 클수록 그림자가 부드럽게 번짐
- 색상(color): 선택 사항으로, 그림자의 색을 지정
또한 쉼표(,)로 구분하여 여러 개의 그림자를 동시에 적용할 수도 있습니다.
예제 코드
아래 예제는 h1부터 h6, p 태그까지 각기 다른 방식의 그림자 효과를 적용한 전체 HTML 코드입니다.
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>각 스타일 설명
- h1: 색상 없이 가로·세로 2px만 지정하여 기본적인 그림자를 만듭니다.
- h2: 빨간색(red) 그림자를 추가해 선명한 색상 효과를 줍니다.
- h3: 흐림 정도 5px를 더해 부드럽게 번지는 빨간색 그림자를 만듭니다.
- h4: 흰색 글자에 검은색 그림자를 조합해 대비가 강한 입체 효과를 냅니다.
- h5: 이동 거리를 0으로 하고 흐림만 적용해 붉은색 후광(글로우) 효과를 냅니다.
- h6: 빨간색과 파란색 그림자 두 개를 겹쳐 화려한 네온 느낌을 연출합니다.
- p: 세 개의 그림자를 중첩해 강렬한 발광 효과를 표현합니다.
실행 결과
위 코드를 브라우저에서 실행하면 각 요소마다 서로 다른 그림자 스타일이 적용된 것을 확인할 수 있습니다.
마무리
text-shadow 속성은 단순한 그림자부터 네온사인 효과까지 폭넓게 활용할 수 있는 강력한 CSS 도구입니다. 이동 거리, 흐림 정도, 색상 값을 자유롭게 조합하고 여러 그림자를 중첩하면 사이트의 분위기에 맞는 개성 있는 타이포그래피를 손쉽게 완성할 수 있습니다.