HTML) jquery 흘러가는 텍스트 marquee

1) marquee

HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그

속성 값

속성	의미
bgcolor	배경색상설정
width	가로크기 설정
height	세로크기 설정
direction	스크롤의 움직임 방향
behavior	움직임의 속성
loop	움직임 반복횟수
scrollamount	스크롤 되는 거리간격
scrolldelay	스크롤의 속도
vspace	위 여백
hspace	아래 여백

 

사용법

<p>
  <MARQUEE>이 텍스트가 움직인다.</MARQUEE>
	<!-- 움직이는 텍스트 -->
</p>
<p>
	<MARQUEE><img src= "aaa.jpg" width="200" height="150"></MARQUEE>
	<!-- 움직이는 사진 -->
</p>
<p>
	<MARQUEE bgColor="blue">배경 색상은 파란색</MARQUEE>
	<!-- 배경 색상 조정 -->
</p>
<p>
	<MARQUEE width="100" height="50">가로와 세로는 100/50</MARQUEE>
	<!-- 크기 조절 -->
</p>
<p>
	<MARQUEE direction="up">스크롤 방향이 위쪽</MARQUEE>
	<!-- 스크롤 방향 설정 -->
</p>
<p>
	<MARQUEE behavior="scroll">스크롤의 무한반복</MARQUEE>
	<!-- 스크롤의 속성 -->
</p>
<p>
	<MARQUEE loop="5">스크롤을 5회반복</MARQUEE>
	<!-- 스크롤의 속성 -->
</p>
<p>
	<MARQUEE  scrollamount="2">한번에 2픽셀씩 이동</MARQUEE>
	<!-- 스크롤의 속도 -->
</p>
<p>
	<MARQUEE scrolldelay="200">0.2초마다 스크롤을 이동</MARQUEE>
	<!-- 스크롤의 속도-->
</p>
<p>
	<MARQUEE hspace="50" vspace="50" >스크롤의 위/아래 여백</MARQUEE>
	<!-- 스크롤의 여백 -->

출력

 

See the Pen by EunshinNoh (@nes0410) on CodePen.