CSS로 네온 텍스트를 만드는 방법

CSS로 네온 텍스트를 만드는 방법

네온 텍스트는 웹사이트에 현대적이고 미래적인 느낌을 주는 멋진 방법입니다. 이 포스트에서는 CSS와 애니메이션을 활용하여 네온 텍스트를 어떻게 만들 수 있는지 알아보겠습니다.

CSS로 네온 텍스트

CSS로 텍스트에 글로우 효과 추가하기

가장 기본적인 네온 효과는 텍스트에 글로우(glow)를 추가하는 것입니다. 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로 "깜박임" 효과 추가하기

네온 사인의 특징 중 하나는 깜박이는 빛입니다. 이를 @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;
  }
}

펄싱 글로우 효과

글로우 효과를 좀 더 동적으로 만들려면 펄싱(pulsing) 효과를 추가할 수 있습니다.

@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;
  }
}

배경 이미지와 테두리 추가하기

네온 텍스트에 배경 이미지와 테두리를 추가하면 더 현실적인 느낌을 줄 수 있습니다.

body {
  background-image: url('wall.jpg');
}

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
}

접근성 고려하기

prefers-reduced-motion 미디어 쿼리를 사용하면 사용자가 움직임을 줄이고 싶어할 때 이를 존중할 수 있습니다.

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

이로써 CSS만을 사용하여 네온 텍스트를 만드는 여러 방법을 알아보았습니다. 이 효과를 자유롭게 응용하여 더 다양한 디자인을 탐색해보세요.