텍스트 마키(흐름 효과) 생성 완벽 가이드
텍스트 마키는 스크롤 정보, 뉴스 티커 또는 주목을 끄는 공지사항을 표시하는 데 사용되는 고전적인 웹 디자인 요소입니다. <marquee> 태그는 더 이상 사용되지 않지만, 최신 CSS 애니메이션을 통해 부드럽고 접근 가능하며 성능이 우수한 스크롤 텍스트를 구현할 수 있습니다.
모범 사례
- 접근성: 사용자가 애니메이션을 일시 중지할 수 있도록(예: 마우스 오버 시) 읽을 시간 확보
- 성능: CSS 변환(
translate3d)을 사용하여left/top값을 변경하는 대신 더 부드러운 60fps 애니메이션을 구현하세요. - 가독성: 스크롤 속도를 적당히 유지합니다. 너무 빠르면 읽을 수 없고, 너무 느리면 지루합니다.
모던 구현
도구는 @keyframes을(를) 사용하여 순수 CSS 솔루션을 생성합니다. 이는 더 이상 사용되지 않는 HTML 태그나 무거운 JavaScript 라이브러리에 의존하지 않고 모든 최신 브라우저와의 호환성을 보장합니다.
SEO 참고 사항
검색 엔진은 CSS 마키 내 텍스트를 정상적으로 읽을 수 있습니다. 그러나 콘텐츠가 페이지와 관련이 있는지 확인하세요. 빠르게 움직이는 마키에 중요한 콘텐츠를 숨기지 마십시오. 일부 사용자가 놓칠 수 있습니다.