한눈에 보는 정의
글자나 로고가 한 방향으로 계속 흘러가며 반복되는 화면 효과.
이런 말로 들어요
- 상단 공지는 마퀴로 흐르게 하고 마우스를 올리면 멈추게 할게요.
- 협력사 로고는 마퀴 띠로 넣겠습니다.
그림으로 보기
마퀴는 좁은 공간에 많은 내용을 보여 줄 때 씁니다. 5초 넘게 움직이면 멈출 방법이 필요합니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
공지 띠나 고객사 로고 줄처럼 공간은 좁은데 보여 줄 것이 많을 때 씁니다. 예전에는 HTML <marquee> 태그를 썼지만 지금은 표준에서 쓰지 말라고 권하는 태그라, CSS 애니메이션으로 만듭니다. 계속 움직이는 내용은 시선을 빼앗고 읽기 어렵게 할 수 있어 사용을 아끼는 편이 좋습니다.
실무 예시
예를 들어 "가을 특강 접수 중 · 선착순 30명" 공지를 상단 띠에 흐르게 하되, 마우스를 올리거나 키보드로 초점을 주면 멈추도록 만듭니다.
함께 살펴볼 점
W3C 접근성 기준(WCAG 2.2.2)은 자동으로 5초 넘게 움직이는 내용에 멈춤·정지·숨김 방법을 두도록 요구합니다. 동작 줄이기 설정을 켠 사용자에게는 멈춘 상태로 보여 줍니다.
AI에게 이렇게 요청해 보세요
CSS 애니메이션으로 공지 문구가 오른쪽에서 왼쪽으로 흐르는 마퀴 띠를 만들어 줘. 마우스를 올리면 멈추고, 일시정지 버튼과 prefers-reduced-motion 대응도 넣어 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- <marquee>: The Marquee element | MDN 새 창
<marquee> 태그가 더 이상 권장되지 않는(Deprecated) 요소라는 표시를 확인했습니다.
자료 확인 - Understanding SC 2.2.2: Pause, Stop, Hide | W3C 새 창
자동으로 시작해 5초를 넘게 움직이는 내용에는 멈춤·정지·숨김 방법이 필요하다는 기준을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정