텍스트나 로고가 화면을 가로질러 끊임없이 흘러가는 효과. 옛 <marquee> 태그의 이름을 물려받았지만 지금은 CSS 애니메이션으로 만듭니다.
디자인 아틀라스<div class="marquee"><div class="track">✦ DESIGN ATLAS ✦ MOTION ✦ EASING ✦ STAGGER ✦ DESIGN ATLAS ✦ MOTION ✦ EASING ✦ STAGGER </div></div>.marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden}
.track{display:inline-flex;white-space:nowrap;font:700 clamp(16px,5vmin,28px)/1 sans-serif;color:var(--fg);
animation:scroll 9s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}내용을 두 번 반복해서 나란히 붙이고, 전체 폭의 절반만큼 translateX로 이동한 뒤 0으로 되돌리면 이어붙인 지점이 안 보이는 무한 루프가 됩니다. linear 이징을 꼭 써야 속도가 일정하게 느껴집니다.
로고 벽(logo wall), 뉴스 티커, "지금 재생 중" 표시줄에 흔합니다. hover 시 animation-play-state: paused로 멈추면 사용자가 읽을 시간을 줄 수 있습니다.
정보가 중요하면 마퀴에만 의존하지 마세요 — 사용자가 원하는 속도로 읽을 수 없습니다. 장식(로고 벽)이나 부가 정보에만 씁니다.