흘러가는 텍스트 사용하기 : MAQRUEE 태그 완전 정복!

제 블로그 상단에 보시면 우측에서 좌측으로 흘러가는 글자가 보이실 것 입니다.
(제 블로그에서 maqruee 태그는 2010년 부터 적용하지 않았습니다.)
이것을 html 태그로 marque라고 합니다. 이 태그는 사용하는 방법에 있어서는 사람들의 눈길을 집중 시킬 수 있으므로 공지사항 안내등 으로 적절히 이용하시면 좋을듯 합니다.

아래의 내용은 비교적 단순한 태그를 이용하여 사용할 수 있습니다.

<MARQUEE width="300" scrollAmount="3">   내용  </MARQUEE>

젠틀캣의 흘러가는 텍스트 TEST

일반적으로는 <marquee> 내용 </marquee> 이렇게만 넣어도 흘러가는 작동은 됩니다만, 그 속도가 너무 빠릅니다.
그래서 위의 예제중 scrollAmount=3 옵션을 넣어주게 되었는데 속도는 1~5까지 있어서 마음에 드는 속도로 지정하면 되겠습니다.


1. 속도 지정

   속도 지정을 하지 않을때

<MARQUEE width="300">   내용  </MARQUEE>

빠른 속도로 흘러갑니다~

         속도지정을 1로 했을때

<MARQUEE width="300" scrollAmount="1">   내용  </MARQUEE>

무지 천천히 흘러갑니다~

         속도지정을 2로 했을때

<MARQUEE width="300" scrollAmount="2">   내용  </MARQUEE>

위 보다는 조금 빨리 흘러갑니다.

         이런식으로 scrollAmount 옵션의 숫자를 올려주면 속도는 점점더 빨라짐을 알 수 있습니다.


2. 방향지정
    위에서의 예제는 모두 오른쪽에서 왼쪽으로 흘러가는 방법으로 설명 드렸습니다.
    방향을 지정해서 상,하,좌,우의 방향을 지정할 수 있습니다. 

    direction="left" : 오른쪽에서 왼쪽으로 스크롤(생략시 기본값으로 적용)
    direction="right" : 왼쪽에서 오른쪽으로 스크롤
    direction="up" : 아래에서 위쪽으로 스크롤
    direction="down" : 위쪽에서 아래쪽으로 스크롤

<MARQUEE width="300" scrollAmount="3"    direction="left">   내용  </MARQUEE>

오른쪽에서 왼쯕으로 흘러가기

<MARQUEE width="300" scrollAmount="3"    direction="right">   내용  </MARQUEE>

왼쪽에서 오른쪽으로 흘러가기

<MARQUEE width="300" scrollAmount="3"    direction="up">   내용  </MARQUEE>

아래에서 위로 올라가기~

<MARQUEE width="300" scrollAmount="3"    direction="down">   내용  </MARQUEE>

위에서 아래로 내려가기

3. 좌우 반복
   흘러가지 않고 좌우로 반복으로 보여주고 싶은 경우에는 behavior="alternate" 옵션을 통하여
   사용 할 수 있습니다.

<MARQUEE width="300" behavior="alternate"    direction="down">   내용  </MARQUEE>

좌우로 왔다갔다

4. 그 밖의 옵션(속성)들

behavior="scroll" : 반복적으로 진행됩니다.
behavior="slide" : 한번만 움직이고 멈춥니다.
behavior="alternate" :  좌우로 반복됩니다. (loop 옵션을 추가로 사용하면 반복횟수 지정도 가능합니다.)
scroll : 반복적으로 나타났다 사라집니다.
scrolldelay : 흘러가는 텍스트가 다시 나타나는 간격을 지정 할 수 있습니다.

간단하게 테스트를 해보았습니다만 <a href="">내용</a> 태그로 링크를 연결할 수 있으며
설명은 텍스트만 가지고 했지만 이미지의 경우에도 텍스트와 똑같은 방법으로 사용 할 수 있습니다.