HTML MARQUEE 태그
우리는 지난 포스트에서 데이터를 목록화 할 때 사용할 수 있는 리스트태그에 대해서 살펴보았습니다.
HTML LIST 태그
지난 포스트에서 우리는 HTML 링크 태그에 대해서 자세하게 살펴보았는데요. 오늘은 어떠한 목록들을 정리할 때 사용할 수 있는 리스트 태그를 살펴보도록 하겠습니다. 리스트태그는 크게 두 가
bono0933.tistory.com
오늘은 글자를 움직이게 하는 MARQUEE 태그에 대해서 알아보도록 하겠습니다.
MARQUEE태그
글자를 움직이게 할 수 있는 태그로, 인터넷 웹브라우저에 따라서 지원, 미지원할 수 있습니다.
현재 보편화되어 사용되고 있는 웹표준 HTML5에서는 더 이상 지원하지 않습니다만, 재미를 위해 살펴봅시다.
MARQUEE 태그는 아래와 같은 속성들에 따라서 글자를 움직이게 하는 다양한 효과를 나타냅니다.
behavior
데이터 문자열을 어떻게 움직여야 할지를 지정하는 속성으로 다음과 같이 사용될 수 있습니다.
<MARQUEE behavior = 속성값 > ... </marquee>
|
속성값 |
의미 |
|
alternate |
좌우로 반복한다. |
|
Scroll |
오른쪽에서 왼쪽으로 반복한다. |
|
Slide |
오른쪽에서 왼쪽으로 이동하다가 왼쪽에서 멈춘다. |
behavior 속성은 위와 같이 altnate, scroll, slide 중 하나의 속성값을 가질 수 있습니다. alternate의 경우 좌우반복, scroll은 왼쪽방향으로 반복해서 움직입니다. slide 경우 왼쪽으로 이동하다가 웹브라우저 창의 왼쪽 부분에 닿으면 멈춥니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 스크롤 방식 설정 </TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate" > 좌우 반복합니다. </MARQUEE> <BR>
<MARQUEE behavior = "scroll" > <<< 왼쪽으로 흐릅니다. </MARQUEE> <BR>
<MARQUEE behavior = "slide" > << 왼쪽으로 흐르다가 멈춥니다. </MARQUEE> <BR>
</BODY>
</HTML>|
|
|
|
width / height
움직이는 문자열의 영역의 높이와 너비를 지정할 수 있습니다. px 또는 %로 지정할 수 있습니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 가로세로 너비 </TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate" > 가로 세로 너비 설정 안함</MARQUEE> <BR>
<MARQUEE behavior = "alternate" width = "200" height = "100" > 가로 세로 너비 설정 </MARQUEE> <BR>
</BODY>
</HTML>| |
|
hspace / vspace
움직이는 문자열의 영역의 가로와 세로 여백을 px 또는 %로 지정할 수 있습니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 여백 설정</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate"> 여백적용 전 </MARQUEE> <BR>
<MARQUEE behavior = "alternate" hspace="20" vspace="20" > 여백적용 후 </MARQUEE> <BR>
</BODY>
</HTML>| |
& |
bgcolor
글자가 지나가는 곳의 배경에 색상을 색상명 또는 RGB색상코드를 이용하여 지정할 수 있습니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 배경색 지정 </TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate" > 배경색 없음 </MARQUEE> <BR>
<MARQUEE behavior = "alternate" bgcolor = "#ffccff" > 배경색 : #ffccff </MARQUEE> <BR>
</BODY>
</HTML>| |
|
scolldelay
움직이는 텍스트의 속도를 1/1000초 단위로 지정할 수 있습니다. 기본값은 85이고, 60보다 작은 값은 무시되빈다.
이때, 숫자가 커질수록 움직이는 속도가 느려집니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 scrolldelay </TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate" scrolldelay= "65" > scrolldelay : 65</MARQUEE> <BR>
<MARQUEE behavior = "alternate" scrolldelay= "85"> scrolldelay : 85 </MARQUEE> <BR>
<MARQUEE behavior = "alternate" scrolldelay= "105" > scrolldelay : 105 </MARQUEE> <BR>
</BODY>
</HTML>| |
|
|
scollamount
움직이는 문자가 한번에 스크롤 되는 양을 지정할 수 있습니다. 기본값은 6입니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 scrollamount</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "alternate" scrollamount= "4" > scrollamount : 4 </MARQUEE> <BR>
<MARQUEE behavior = "alternate" scrollamount= "6" > scrollamount : 6 </MARQUEE> <BR>
<MARQUEE behavior = "alternate" scrollamount= "8" > scrollamount : 8 </MARQUEE> <BR>
</BODY>
</HTML>| |
|
|
direction
글자가 움직이는 방향을 지정합니다. 속성값으로 left, right, up, down을 사용할 수 있고 기본값은 left입니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 방향 설정</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "scroll" direction = "left" > 왼쪽으로 </MARQUEE> <BR>
<MARQUEE behavior = "scroll" direction = "right" > 오른쪽으로 </MARQUEE> <BR>
<MARQUEE behavior = "scroll" direction = "up" > 위로</MARQUEE> <BR>
<MARQUEE behavior = "scroll" direction = "down"> 아래로 </MARQUEE> <BR>
</BODY>
</HTML>| |
|
|
|
loop
움직이는 문자열이 스크롤되는 횟수를 지정합니다. 기본값은 -1으로 무한반복됩니다.
<HTML>
<HEAD>
<TITLE> 마퀴태그 횟수지정 </TITLE>
</HEAD>
<BODY>
<MARQUEE behavior = "scroll" loop = "1" > 1번 반복 </MARQUEE> <BR>
<MARQUEE behavior = "scroll" loop = "3" > 3번 반복 </MARQUEE> <BR>
<MARQUEE behavior = "scroll" loop = "-1" > 무한 반복 </MARQUEE> <BR>
</BODY>
</HTML>| |
|
|
위의 마퀴태그 예제의 결과창은 웹브라우저에 따라서 지원하지 않을 수 있습니다. 현재 포스트하는 당일에는 인터넷익스플로러에서는 확인이 가능하나, HTML5에서 더이상 지원하지 않는 기능이기 때문에 언제 없어져도 이상하지 않습니다. 그래서 재미로만 알아보시고, 사용하지 않는 것을 권해드립니다.
우리는 지금까지 15개의 포스트를 통해서 HTML의 기본적인 태그의 사용방법과 태그들을 살펴보았습니다.
더 자세한 내용을 알고 싶다면 CSS를 함께 공부하시는 것을 추천드립니다.
감사합니다.