CSS 텍스트 네온사인 만드는 방법

CSS 텍스트 네온사인 만드는 방법

네온 텍스트는 웹 사이트에 멋진 미래적인 느낌을 추가할 수 있습니다. CSS와 애니메이션을 활용하면 다양한 방법으로 텍스트에 빛나는 효과를 적용할 수 있습니다. 이 포스팅에서는 CSS 텍스트 네온사인 만드는 방법을 소개하고자 합니다.

텍스트에 글로우 효과 추가

먼저 텍스트에 글로우(빛나는) 효과를 추가하는 방법부터 알아보겠습니다. 이를 위해서는 CSS의 text-shadow 속성을 사용합니다. 다음과 같이 CSS를 작성하여 글로우 효과를 만들 수 있습니다.

.neonText {
  color: #fff;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}

CSS "깜박임" 효과

네온 사인에는 때로는 빛이 깜박이는 특징이 있습니다. CSS 애니메이션을 통해 이러한 효과를 재현할 수 있습니다. @keyframes를 사용하여 깜박이는 효과를 만들어보겠습니다.

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

CSS 펄싱 글로우 (Pulsing Glow)

텍스트가 깜박이는 것 외에도, 텍스트 주변의 빛이 펄싱(맥동)하는 효과를 만들 수 있습니다. 이를 위해 다음과 같이 @keyframes를 활용할 수 있습니다.

@keyframes pulsate {
  0% {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa;
  }
  100% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
  }
}

접근성 고려

움직임을 줄이는 것을 선호하는 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 사용할 수 있습니다. 이를 통해 애니메이션을 제거하거나 줄여 사용자의 접근성을 높일 수 있습니다.

@media screen and (prefers-reduced-motion) {
  h1 {
    animation: none;
  }
}

마치며

CSS를 활용하면 네온 텍스트를 다양한 방법으로 구현할 수 있습니다. 특히, text-shadow와 CSS 애니메이션을 잘 활용하면 더욱 다채로운 효과를 만들 수 있습니다. 웹 디자인에 멋진 효과를 추가하고 싶다면, 이 기술을 한번 시도해보세요.

---

키워드: 네온 텍스트, CSS, text-shadow, 애니메이션, 글로우 효과, 깜박임 효과, 펄싱 글로우, 접근성, prefers-reduced-motion, 미디어 쿼리