CSS3로 이전 marquee태그 표현하기

SHARE

HTML5부터는 비추천(폐지?)가 된, 지금에 와선 그립기도 한 <marquee>태그.
요소 안에 있는 글자를 흐르는 글자로 표현하는 이 태그는 한동안 사라지는가 싶었지만, 최근에는 한줄 뉴스를 표현하는 등으로 웹, 스마트폰 등에서 이용되기도 합니다.
<marquee>태그를 사용할 수 없게 되어, 같은 움직임을 JavaScript를 이용해서 실행하기도 하는데, CSS3로 marquee를 표현하는 방법을 소개합니다. 이 방법으로 대부분의 브라우저에 대응합니다.

See the Pen Marquee CSS by nanati (@nanati) on CodePen.

HTML

옆으로 흐르게끔 하고 싶은 요소를 「marquee」라는 클래스명을 준 박스로 감쌉니다.

CSS3


움직이고 싶은 감싸진 요소의 「padding-left」수치를「.marquee」의 가로폭과 같은 사이즈로, 또는 조금 더 큰 사이즈로 지정해 주는 것이 하나의 포인트 되겠습니다.
그리고 animationtranslate를 각각 지정하여 부드러운 움직임을 연출합니다.