공부하자
흐르는 글자 css로 표현하기 marquee 본문
marqee 태그란?
: 가로 또는 세로로 텍스트가 롤링되는 표현을 할 수 있는 태그로 <marqee></marqee> 형태로 사용되었으나 html의 표준에 준수하지 않아 현재는 태그의 형태로는 잘 쓰이지 않고 css 로 표현하는 경우가 많다. (지원 종료 이슈도 있다.)
css의 애니메이션 기능을 이용하여 표현하며 예전만큼 자주 사용되는 기능은 아니나 알아두고 있으면 좋은 기능임으로 따로 정리해본다.
ex.
기본형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<link href="#" rel="stylesheet" type="text/css" /> <!-- css -->
<script src="#"></script> <!-- js -->
<style>
.marquee {
height: 50px;
overflow: hidden;
position: relative;
color: #333;
/* font-size, background-color.. 등 원하는 스타일이 있다면 추가 */
}
.marquee p {
position: absolute;
width: 100%; /* 넓이 값 */
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform: translateX(100%); /* 왼쪽으로 이동, 오른쪽 이동 시:translateX의 값을 전부 반대로*/
animation: scroll-left 10s linear infinite; /* 키프레임 이름, 시간, 반응 속도, 반복여부 */
}
@keyframes scroll-left {
0% {transform: translateX(100%);}
100% {transform: translateX(-100%);}
}
</style>
</head>
<body>
<div class="marquee">
<p>hello, world!</p>
</div>
</body>
</html>
아래 사이트에서 예시로 나온 기본형을 좀 더 깔끔하게 정리한 것으로
브라우저 별 css 지정이나 응용 버전인 좌우로 튀는 효과 등은 링크 참고
www.w3schools.in/css3/css-marquee/
CSS Marquee
HTML marquee provides a standard way of creating scroll texts, slide-in, and bouncy texts, as well as images on your web page. In this chapter, you will learn about the marquee, but the implementation will be done with CSS. What are Marquees? Marquee is an
www.w3schools.in
마우스 오버시 멈춘다던가 하는 응용 코드
흐르는 글자 css == marquee css 보완 버전
는 곧 없어진다. 이에 css로 marquee를 표현한 게시글이 많다. 아쉽게도 예전만큼 인기가 높지 않아, 다들 적당히 만든 것 같아 필자가 약간 보완해 보았다. 대부분의 marquee css에서는 마우스 온 스탑
aldkzm.tistory.com
js로 표현한 marquee 태그
jsfiddle.net/marcelofs/hkk5933q/
jquery marquee example - JSFiddle - Code Playground
jsfiddle.net
'CSS정리' 카테고리의 다른 글
| CSS로 타이핑 효과 내기 (0) | 2021.01.23 |
|---|---|
| CSS로 삼각형 및 여러 도형 표현하기 (0) | 2021.01.17 |
| 미디어 쿼리 문법 및 사용방법 (0) | 2021.01.04 |
| 여러가지 효과 transition, animation, transform (0) | 2021.01.04 |
| 좌우배치를 하는 다양한 방법 (float, display:table, flex) (0) | 2021.01.04 |