Softonic

스크롤 텍스트 생성기

단계 1 / 2
다음

스크롤하는 헤드라인은 공지 바, 주식 코드 표시, 이벤트 배너가 제한된 화면 영역에 다양한 정보를 제공하는 방식입니다. 이 생성기는 순수한 CSS의 @keyframes와 transform: translateX() 애니메이션을 사용하여 기존의 고전적인 HTML <marquee> 효과를 재현하므로, 이 기법은 더 이상 사용되지 않는 태그 없이도 모든 현대 브라우저에서 작동합니다. 메시지를 선택하고, 루프당 속도(초 단위), 색상 및 글꼴 크기를 설정한 후, 아래에 표시된 CSS로 직접 재구성하기 전에 티커를 실시간으로 미리 볼 수 있습니다.

스크롤 가능한 배너를 어떻게 만들 수 있을까

  1. 1

    메시지를 입력하세요

    제목을 입력하세요. 짧은 문장(4~10단어)은 이동하는 스트립에 가장 잘 적합합니다.

  2. 2

    속도를 선택하세요

    스크롤 시간이 짧을수록 스크롤 속도가 빨라집니다. 뉴스 스타일의 티커에서는 전체 루프에 걸쳐 30~60초가 적합합니다.

  3. 3

    색상과 크기를 설정하세요

    텍스트의 전경, 스트립의 배경, 그리고 헤더 높이에 맞는 글꼴 크기를 선택하세요.

  4. 4

    실시간 미리보기

    데모는 실시간으로 애니메이션으로 표시되어 게시하기 전에 내용의 읽기 용이성을 확인할 수 있습니다.

  5. 5

    아래 CSS로 재구성하기

    아래에 표시된 `@keyframes`와 `transform: translateX()` 패턴을 여러분의 스타일시트에 복사하여 여러분의 사이트에서 티커를 재현하세요.

<marquee> 대신 CSS 애니메이션을 사용하는 이유

<marquee> 태그는 HTML5에서 더 이상 사용되지 않으며, WHATWG는 이를 구식 태그로 지정했습니다. 현재 브라우저들은 여전히 이 태그를 처리하지만, 접근성 도구 및 검증 도구에서는 문제점이 지적되며, 이동과 반복 동작에 대한 정밀한 제어 기능도 상실됩니다. overflow: hidden 내부에 포함된 transform: translateX() 애니메이션은 현대적인 도구를 사용할 경우 동일한 시각적 동작을 보입니다.

속도 조정

통과 소요 시간은 지속 시간과 총 폭 모두에 따라 달라집니다. 1200px 크기의 뷰포트에 대한 대략적인 규칙은 다음과 같습니다:

기간 느낌 일반적인 사용 방식
10~20초 빠르고 집중적인 반응 플래시 판매 및 긴급 알림
30~45초 뉴스 티커 실시간 스포츠 스코어 및 헤드라인 바
60~90초 주변 분위기 행사장 안내판 및 회의실
120초 이상 거의 움직이지 않음 장식용 및 고급 브랜드 배너

접근성 확인 목록

  • 스트립을 role="marquee" 또는 aria-live="off"로 감싸면 스크린 리더가 메시지를 매 루프마다 다시 읽지 않게 됩니다.
  • @media (prefers-reduced-motion: reduce) { animation: none; }를 사용하여 감소된 움직임을 존중하고 텍스트를 정지 상태로 표시하세요.
  • 텍스트와 배경 간의 대비비는 최소 4.5:1 이상을 유지해야 합니다. 움직이는 텍스트는 정지된 텍스트보다 읽기 어렵습니다.
  • 중요한 정보(법률 관련 안내사항, 가격, 오류 메시지 등)를 스크롤 가능한 영역 내에만 표시하지 마십시오.

자주 묻는 질문

아니요. 미리보기는 overflow: hidden이 적용된 <div>와, 내부 스팬을 translateX로 이동시키는 CSS @keyframes 애니메이션으로 구성되어 있으며, 현대적인 HTML5 표준에 부합합니다.

컨테이너의 호버 선택기에 animation-play-state: paused를 추가하세요. 일부 사용자들은 이를 일정한 루프보다 더 사용자 친화적이라고 평가합니다.

네. @keyframes의 최종 값을 translateX(-100%)에서 translateX(100%)로 변경하고, -100%부터 시작하여 방향을 역전하세요. RTL 언어에 유용합니다.

아니요, CSS 변환은 GPU에서 수행되며 텍스트는 DOM 내부의 일반적인 HTML 형태로 존재하므로 크롤러가 정상적으로 처리할 수 있고 애니메이션도 메인 스레드의 실행을 방해하지 않습니다.

프리뷰 중에는 모든 정보가 브라우저에 그대로 남아 있습니다. 어떤 데이터도 업로드되거나 기록되지 않습니다.

관련 도구

도시 이름 생성기

세계관, 지도, 게임, 이야기, 목업 데이터에 쓸 가상 도시, 마을, 촌락, 수도 이름을 만들고 각 결과에 짧은 메모를 제공합니다.

작거나 같음 기호

≤ 기호와 관련 수학 비교 기호를 복사하세요. 스프레드시트, 논문, 웹 페이지용 유니코드, HTML 엔티티, LaTeX 마크업을 포함합니다.

도메인 이름 생성기

하나의 키워드로 도메인 이름 아이디어를 만듭니다. 접두사, 접미사, 글자 반복, 숫자 끝을 흔한 6개 TLD에 결합합니다.

난독증 친화 텍스트 변환기

붙여 넣은 텍스트를 짧은 문단과 약 72자 길이의 줄로 다시 구성해 읽기 쉽게 만듭니다. 결과를 복사해 어떤 문서, 이메일, 편집기에도 붙여 넣을 수 있습니다.

복사할 수 있는 화살표 기호

문서, 채팅, 디자인에 쓸 수 있는 직선, 이중, 대각선, 꺾인, 원형, 삼각형 스타일의 일반적인 Unicode 화살표를 한 번에 복사하세요.

소름 텍스트 생성기

유니코드 결합 기호를 사용해 일반 텍스트를 소름 끼치는 잘고 / 글리치 텍스트로 바꿉니다. 강도 조절 가능. SNS, Discord 및 대부분의 폰트에서 작동합니다.

이 도구는 다른 언어로도 제공됩니다