TV를 시청하다 보면 하단에 공지 및 안내 자믹이 흐르는 것을 본 적 있으시죠?
웹에서는 어떻게 구현하면 좋을지 알려드릴게요!!
<Marquee></Marquee>
아주 간단하게는 html의 marquee 태그를 사용하면 됩니다.
정말 간단해서 고민한 머쓱해질 지경이랄까요....ㅎㅎㅎㅎ
간단하게 속성을 파악해볼까요?
● <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으로 효과를 주는 것 입니다.
알고보면 간단한 방법이 많은 텍스트 흐름 효과였습니다.
접근성을 위해 marquee 를 사용하고 계셨다면, 이 기회에 css로 바꿔 보시는 것도 좋을듯 합니다!!!
글 읽어주셔서 감사합니다!
'css' 카테고리의 다른 글
| [css] css 변수(variable)를 파헤쳐보기(feat.지역변수, 전역변수) (4) | 2023.04.26 |
|---|---|
| [CSS]border에 그라데이션 넣기(feat. 사각형, 원형) (0) | 2023.04.25 |
| [css] flex 내 가변 요소 (가변 자식 요소가 부모 요소를 넘을 때) (0) | 2023.02.06 |
| [css] 파이 차트(Pie chart) 만들기 conic-gradients (0) | 2023.02.04 |