작업실 옆 메모장

이전 글에서 화면 오른쪽 밖에서 시작해 텍스트가 흐르는,가장 기본적인 marquee 효과를 CSS만으로 구현해봤습니다. 이 방식으로도 간단한 안내 문구나 텍스트 전광판 등의 다양한 용도로 충분히 활용할 수 있지만,애니메이션에는 사이클이 존재하기 때문에, 주기적으로 끊기는 구간이 발생합니다. 이번 글에서는 애니메이션 사이클의 원리를 응용하여,끊김 없이 처음부터 텍스트가 무한으로 흐르는 marquee 효과를 CSS 만으로 구현해보겠습니다. 무한으로 흐르는 marquee 구현해보기 우선, 같은 내용의 텍스트 그룹을 group1과 group2로 나누어 나란히 배치 합니다.그리고 group1의 애니메이션이 끝날 즈음 화면 밖에서 group2가 이어서 재생 되는 식으로 구현하고교차 반복 시키면 을 무한히 추가하..

웹에서는 텍스트나 이미지가 좌우로 흐르는 이펙트를 흔히 marquee 효과라고 부릅니다.아래 사진과 같이 브랜드 로고나 특정 문구, 슬로건이 반복되며 흘러가는 형태가 대표적입니다. 물론 HTML 에서 이를 위한 태그가 존재하지만, 비표준 요소로 더 이상 사용을 권장하지 않기 때문에동일한 효과를 만들기 위해 CSS 애니메이션과 자바스크립트를 활용한 방식들이 주로 사용됩니다. 이 글에서는 가장 기본적인 marquee 효과를 CSS 만으로 구현하는 방법을 정리해보았습니다. 참고 사례 문장 1 문장 1 문장 1 문장 1 문장 1 ... ... 관련된 래퍼런스들을 수집하면서 어떤 사이트의 marquee 소스를 살펴봤는데 의아한 부분이 많았습니다...

1) 최상단 한 줄 텍스트 전광판 - 아이헤이트먼데이, 분크일반적으로 짧은 문장의 공지를 반복해서 보여 주는 용도로 쓰는 듯하다.바로 아래 헤더와 배경색을 다르게 두어 외각선이 있는 것처럼 안정감을 주고,색상 선택에 따라 브랜드 컬러 같은 걸 표현할 수도 있을 것 같다. 내부에 흐르는 텍스트는 문장 길이와 간격, 흐르는 속도가 중요할 듯무한 반복인 경우도 있고, 한 줄이 다 지나가면 다시 재생되는 방식도 있는 것 같다. keyframes 랑 transform: translateX() 로 텍스트를 이동시키는 방식으로 구현한다. 2) 특정 요소 안에 marquee - 11번가 앱, 티다문구점좀 더 넓은 범위에서 부분적으로 marquee 를 사용하는 경우도 있었다. 디자인된 공간, 한정된 너비 안에서 천천..