텍스트에 빨간색 네온 글로우(발광) 효과를 적용하려면 CSS의 text-shadow 속성을 사용하면 됩니다. 이 속성은 그림자의 가로 오프셋, 세로 오프셋, 흐림 반경(blur radius), 색상을 순서대로 지정하며, 오프셋을 0으로 설정하고 흐림 반경만 조절하면 텍스트 주변으로 번지는 네온사인 같은 빛 효과를 쉽게 연출할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 4px #FF0000;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>위 제목에는 빨간색 네온 글로우 그림자 효과가 적용되어 있습니다.</p>
</body>
</html>코드 설명
위 예제에서 text-shadow: 0 0 4px #FF0000;의 각 값은 다음과 같은 의미를 가집니다.
- 0 (첫 번째 값) — 가로 방향 오프셋. 0이면 좌우로 이동하지 않습니다.
- 0 (두 번째 값) — 세로 방향 오프셋. 0이면 위아래로 이동하지 않습니다.
- 4px — 흐림 반경. 값이 클수록 빛이 더 넓고 부드럽게 퍼집니다.
- #FF0000 — 그림자 색상으로, 여기서는 순수한 빨간색을 사용했습니다.
활용 팁
네온 효과를 더 강하게 표현하고 싶다면 쉼표로 구분하여 그림자를 여러 겹 중첩할 수 있습니다. 예를 들어 text-shadow: 0 0 4px #FF0000, 0 0 10px #FF0000, 0 0 20px #FF0000;처럼 작성하면 빛이 여러 겹으로 퍼져 훨씬 밝고 입체적인 네온 느낌을 연출할 수 있습니다. 또한 흐림 반경 값을 키우면 은은한 후광 효과, 줄이면 선명한 외곽선 효과를 얻을 수 있으니 디자인 목적에 맞게 조절해 보세요.