[css] 텍스트 흐름 효과 marquee? animation?(반전 주의)

TV를 시청하다 보면 하단에 공지 및 안내 자믹이 흐르는 것을 본 적 있으시죠?

웹에서는 어떻게 구현하면 좋을지 알려드릴게요!!

 

<Marquee></Marquee>

아주 간단하게는 html의 marquee 태그를 사용하면 됩니다.

 

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

정말 간단해서 고민한 머쓱해질 지경이랄까요....ㅎㅎㅎㅎ

간단하게 속성을 파악해볼까요?

 

● <Marquee> 의 속성  - width / height : 스크롤의 크기나 비율 지정

  - bgcolor: 스크롤의 배경색상 지정

  - direction : 스크롤의 움직임 방향(up, down, left, right)을 지정

  - behavior : 스크롤 방식을 설정(scroll, slide, alternate)

  - loop : loop에 작성한 횟수만큼 반복, 기본값은 무한반복

  - scrollamount / scrolldelay : 스크롤이 움직이는 속도

  - hspace / vspace : 스크롤의 여백을 주는 기능, 잘 사용하지 않는다.

 

위의 속성을 이용하여, 아주 간단하게 해결가능하겠습니다.

 

그. 러. 나.

언제나 반전은 있는 법?!?!!?!?!ㅎㅎㅎ

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marqueea

MDN을 보시면, 웹표준에서 제거 되었고 삭제되지 않은 건 호환성의 문제로 인해 남겨 놓았을 뿐,

marquee 태그의 사용을 더이상 추천하지 않는다고 합니다.

 

 

다른 방법은?!?!?!

 

animation

태그 다음으로 간단한 방법은 animation으로 효과를 주는 것 입니다.

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

 

알고보면 간단한 방법이 많은 텍스트 흐름 효과였습니다.

접근성을 위해 marquee 를 사용하고 계셨다면, 이 기회에 css로 바꿔 보시는 것도 좋을듯 합니다!!!

 

글 읽어주셔서 감사합니다!