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만을 사용하여 네온 텍스트를 만드는 여러 방법을 알아보았습니다. 이 효과를 자유롭게 응용하여 더 다양한 디자인을 탐색해보세요.