마기? 마키?

　
　 marquee 란....

아주 화려한(?) 태그 marquee의 사용법을 알아보도록 하겠습니다. marquee란 영어사전에 현수막을 뜻하는 것으로 해석해 놓았습니다. 복잡한 DHTML 기법 없이도 텍스트, 테이블, 이미지 등을 다양한 방법으로 스크롤시킬 수 있는 아주 매우 대단히 우수한 무지막지한 태그입니다만 넷스케잎에서 지원하지 않기 때문에 그 우수성에 비해 자주 사용되지는 않는 태그입니다. 그러나 넷스케잎에서 스크롤이 되지 않을 뿐 특별한 에러를 내는 것은 아니고 점차 익스플로러를 사용하는 추세이므로 이 태그를 배워둔다면 제법 쓸모있게 사용할 데가 있을 것입니다. 지금 넷스케잎으로 접속하신 분들은 죄송하지만 다시 익스플로러로 접속해 주세요. 아니면 marquee의 위력을 맛볼 수 없거든요. marquee는 익스플로러 3.0에서 그 첫 모습을 드러낸 후 지금도 계속 발전하고 있는 태그로 익스플로러의 버젼에 따라 지원되는 속성의 변화가 심한 태그입니다. 여기서는 익스플로러 4.xx와 5.xx에 지원되는 기능들을 기준으로 했습니다


 

1. marquee 맛보기!
일단 marquee의 예제를 보고 설명하기로 하겠습니다.

<marquee>아쿠스터!</marquee>
아쿠스터!

대단하지 않습니까? 단지 몇자를 더 타이핑해서 이런 효과를 얻을 수 있다니... 어떤 속성 지정없이 marquee를 사용하면 오른쪽에서 왼쪽으로 내용을 스크롤링시킵니다. <marquee>와 </marquee>사이에는 각종 HTML 태그를 사용할 수 있습니다. 문서 전체를 집어넣어도 되죠. 아래는 이미지를 집어 넣은 예입니다.

<marquee><img src=그림파일> 신창원은 모하지???</marquee>
                                                     신창원은 모하지???

2. marquee의 각종 속성
marquee 태그는 변화가 심한 태그입니다. 익스플로러 3.xx 과 4.xx, 5.xx에 사용될 수 있는 속성 값이 제법 차이가 있습니다. 여기서는 4.xx와 5.xx에 모두 적용될 수 있는 것을 기본으로 하겠습니다.

behavior=scroll,slide,alternate (푸른색으로 표시된 것이 default)

  • scroll --> marquee 영역을 벗어나서 사라집니다.
  • slide --> marquee 영역의 끝 부분에서 멈춥니다.
  • alternate --> marquee 영역을 왔다 갔다 합니다.

<marquee behavior=scroll>고거 참 잼있다!</marquee>
고거 참 잼있다!

<marquee behavior=slide loop=1>NOW 공부중...!</marquee>
NOW 공부중...!

<marquee behavior=alternate>와! 수박이다!</marquee>
와! 수박이다!

bgcolor=색상(지정하지 않으면 바디나 테이블의 배경색이 됩니다)
marquee 영역의 배경색을 지정합니다.

<marquee bgcolor=silver>Hee~~~</marquee>
Hee~~~

width=픽셀 혹은 상대비율(%) height=픽셀 혹은 상대비율(%)
marquee 영역의 크기를 지정합니다. 상대비율로 지정해 주면 화면이나 table크기의 상대적 크기가 됩니다.

<marquee width=300 height=200 bgcolor=silver>홈맹그러야지!</marquee>
홈맹그러야지!

direction=left,right,up,down
말그대로 움직이는 방향을 지정해 주는 것입니다. up, down은 익스플로러 4.0이상에만 적용됩니다.

<marquee direction=up width=100% height=100 bgcolor=silver>홈이 별겅가!</marquee>
홈이별겅가!

scrolldelay=시간(단위 milliseconds)
스크롤의 지연효과를 얻기 위해서 scrolldelay를 사용합니다. 만약 1초간 멈췄다가 이동하려면 1000을 지정해 주면 됩니다. 값을 많이 주면 점프하는 듯한 효과를 거둘 수 있습니다.

<marquee scrolldelay=1000 bgcolor=silver>재밌다!!</marquee>
재밌다!

scrollamount=픽셀
스크롤의 보폭(?)을 뜻합니다. 50이면 내용이 50픽셀 씩 움직입니다. 값을 많이 줄 수록 스크롤 속도가 빨라집니다.

<marquee scrollamount=50 scrolldelay=1000 bgcolor=silver>음음음...!</marquee>
음음음...!
* scrollamount와 scrolldelay를 적절히 사용하여 독특한 효과를 거둘 수 있습니다.

loop=infinite or number
스크롤의 반복회수를 지정합니다. infinite는 무한대로 반복하는 것으로 -1을 적어줘도 동일합니다. loop=3이면 3회 반복합니다.

* marquee의 속성 중 align에 대해서 설명한 사이트가 많은데 이것은 익스플로러 3.xx에서 적용된 속성으로 4.0 이상에서는 적용되지 않습니다. 주의하세요.