마퀴태그(<marquee>)는 홈페이지  상단에 있는 바와 같이 글자가 움직이는 태그이다.
자주 쓰이지는 않지만 잘 이용한다면 이쁜 홈페이지를 만들 수 있을 것이다.
 
기본적으로 마퀴태그의 사용법은 아래와 같다.
이해를 돕기위해 소스와 결과를 연달아 쓰도록 하겠다.
 
 
<marquee>Hello GJMagic</marquee>

Hello GJMagic
 
 
Hello GJMagic이라느 글자가 왼쪽으로 움직이는 것이 보이는가? 기본적으로 마퀴태그에 아무런 옵션을 주지 않고 쓸 경우 자동적으로 왼쪽으로 움직이게 된다.
 
그렇다면 우선 이 움직이는 방향을 내 마음대로 조절해보자.
해당 속성은 direction이다.
 
아래의 소스와 결과를 한번 보자(left는 생략한다. 마퀴의 default가 left니까.)
 
<marquee direction='right'>Hello GJMagic</marquee>

Hello GJMagic
 
<marquee direction='up'>Hello GJMagic</marquee>

Hello GJMagic
 
<marquee direction='down'>Hello GJMagic</marquee>

Hello GJMagic
 
up과 down의 기본 넓이는 위보다 더 넓지만 편의상 줄였다.
 
 
다음으로 이렇게 움직이는 행위를 조절할 수 있다.
기본 값(Default)는 한쪽방향으로 계속 움직이는 것이며
이외에 좌우로 계속 움직이는 alternate 와 한번만 움직이고 멈추는 slide 가 있다.
 
<marquee behavior='alternate'>http://newpark210.cafe24.com</marquee>

http://newpark210.cafe24.com
 
<marquee behavior='slide'>http://newpark210.cafe24.com</marquee>

http://newpark210.cafe24.com
(위의 글은 이미 왼쪽에 붙어서 멈춰있을 것이다. 와서 멈추는 걸 보고 싶다면 새로고침을 해보자)
 
 
 
 
다음으로 움직이는 글자의 속도를 조절해보자. 이 속도를 잘 조절해야 내가 원하는 스피드를 낼 수 있다. 귀찮으면 그냥 내버려둬야 대략 적절한 Default값이 적용된다.
 
스피드와 관련된 속성(Attribute)은 두가지가 있다. 하나는 scrollamount 이고, 다른 하나는 scrolldelay 이다. 속성명만 봐도 감이 올 것이다.
 
 
scrollamount 는 글자가 한 번 움직일때의 거리와 관련이 있다.
scrolldelay 는 글자가 한 번 움직일때의 시간과 관련이 있다.
 
똘똘한 여러분은 이해하셨으리라 믿으며, 이해하지 못했어도 상심하지 말자. 아래의 예를 보면 와닿을테니
 
 
<marquee scrollamount='5'>OTU,BTU,FTU</marquee>

OTU,BTU,FTU
 
<marquee scrollamount='25'>OTU,BTU,FTU</marquee>

OTU,BTU,FTU
 
 
<marquee scrolldelay='250'>OTU,BTU,FTU</marquee>

OTU,BTU,FTU
 
<marquee scrolldelay='50'>OTU,BTU,FTU</marquee>

OTU,BTU,FTU
 
 
 자 어떻게 다른지 이제 알겠는가? 그래도 모르겠다 하시는 분을 위해 더 상세히 설명을 하겠다. 
 
  스크롤어마운트의 값은 말하자면 한 번 글자가 움직일때 이동되는 픽셀의 값과 같다. 따라서 어마운트 값이 5이면 한번에 5만큼 이동하고 25이면 한번에 25만큼 이동한다. 그래서 첫번째 마퀴는 그나마 스무스한 반면, 두번째 마퀴가 거의 순간이동 하는 것 처럼 움직인다.
 
  스크롤딜레이의 값은 한 번 글자가 움직이는데 드는 시간을 의미한다. 시간의 단위는 밀리세컨드(MilliSecond:1/1000초)이다. 따라서 3번째 마퀴는 0.25초만에 한 번 이동하므로 느려보이고 4번째 마퀴는 0.05초만에 한번 움직여서 빠르게 움직이는 것으로 보인다.
 
또한 2번째 마퀴도 빠르고 4번째 마퀴도 빠르지만 2번째 마퀴는 이동거리가 많은 것이기때문에 순간이동하는 것으로 보이는 것이며, 4번째 마퀴는 부드럽게 이동하는 것으로 보이는 것이다. 따라서 이 두 값을 적절히 주어야 부드러운 움직임이 보여진다. 단, 지나치게 미세해지면 컴퓨터가 힘들어하겠지?
 
 
 
이외에도 마퀴가 적용되는 범위(width, height)를 주는 것도 가능하다. 이런 것은 별도로 설명을 하지 않겠다.(워낙 많은 태그에 쓰이는 속성이니 설명이 필요없으리라 믿는다)
 
그리고 마퀴는 글에만 적용되는 것이 아니다. <marquee></marquee> 사이에 이미지가 들어가도 되고, 테이블이 들어가도 된다! 하지만 마퀴는 적절히 사용하도록 하자.

Simple is Best
 
 
이렇게 마퀴태그를 알아보았다. 글이 역동적으로 움직이니 생각보다 재미있을 것이다.
그럼 다음 편에 뵙도록 하겠다.
 
 
이 게시물을..