HTML 움직이는 텍스트 marquee 마퀴 만드는 법...

 움직이는 텍스트 (마퀴 marquee) 만드는 방법...

*marquee 태그에 사용되는 속성에는 다음과 같은 것들이 있다.

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

2. width / height: 스크롤의 크기나 비율을 지정

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

4. behavior: 스크롤이 무한 루프로 계속 반복해서 돌게 함

5. loop: loop를 준 횟수 만큼 스크롤이 돌게 됨. 

6. scrollamount: 스크롤 속도 조정. 가장 느린 "1"부터 설정할 수 있음. 숫자가 클수록 빨라진다. 숫자는 '픽셀 수'다.

7. scrolldelay: 스크롤 속도 조정. 10, 100, 1000 등으로 설정하면 된다. 숫자는 1/1000초를 나타낸다.

8. hspace / vspace: (가로/세로) 스크롤의 여백을 줌.

9. onmouseover / onmouseout: 마우스를 올리거나 / 떼면... 움직임을 몀추거나 다시 시작하라는 함수.

예제)

<MARQUEE

onmouseover=this.stop()

style="width: 100%; height: 50px"

onmouseout=this.start()

scrollamount="1"

scrolldelay="1000"

direction=up>

-- HTML Mark-Up 여기에 HTML을 넣으면 됨. --

-- 텍스트 또는 이미지를 marquee시킬 수 있음. --

</MARQUEE>

아래 '더보기'는 개인적으로 참조/학습용으로 남겨 놓은 것이다. 테이블을 통해서 marquee를 만드는 방법인데.. 마크업이 너무 복잡하니 그냥 무시해도 된다. 아래 소스에서 이미지가 들어갈 경로 및 a hrer 에는 자신이 원하는 링크로 걸여 주면 된다.

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR vAlign=center align=left>

<TD>

<HEIGHT=30 width="12" border="0">

</TD>

<TD width="100%">

<P align=left>&nbsp;<B><A href="">명절 배송 안내</A></B></P>

</TD>

<TD><HEIGHT=30 width="8" border="0"></TD>

</TR>

<TR vAlign=top>

<TD>&nbsp;</TD>

<TD>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD bgColor=#ffffff>

<MARQUEE onmouseover=this.stop() style="WIDTH: 100%; HEIGHT: 58px" onmouseout=this.start() scrollAmount=1 direction=up>

<DIV style="PADDING-RIGHT: 0px; OVERFLOW-Y: auto; PADDING-LEFT: 0px; OVERFLOW-X: hidden; PADDING-BOTTOM: 3px; WIDTH: 100%; PADDING-TOP: 3px">

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD vAlign=top width="100%">

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD height=20>&nbsp;<IMG src="" align=absMiddle border=0><SPAN class=board style="FONT-SIZE: 9pt"><A href="">

여기에 원하는<br>텍스트를 타이핑하면 됨. 01

</FONT></B></A></A></SPAN>

</TD>

</TR>

<TR>

<TD height=20>&nbsp;<IMG src="" align=absMiddle border=0><SPAN class=board style="FONT-SIZE: 9pt"><A href="">원하는 텍스트를 타이핑. 02</FONT></B></A></A></SPAN>

</TD>

</TR>

<TR>

<TD height=20>&nbsp;<IMG src="" align=absMiddle border=0><SPAN class=board style="FONT-SIZE: 9pt"><A href="" target="_blank">여기에 텍스트 타이핑 03</FONT></B></A></A></SPAN>

</TD>

</TR>

<TR>

<TD height=20>&nbsp;<IMG src="" align=absMiddle border=0><SPAN class=board style="FONT-SIZE: 9pt"><A href="" target="_blank">마지막 테그스트 타이핑 04</FONT></B></A></A></SPAN>

</TD>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

</TBODY>

</TABLE>

</DIV>

</MARQUEE>

</TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD>&nbsp;</TD>

</TR>

</TBODY>

</TABLE>