html 글자를 움직이는 marquee 태그 방향, 속도 등 옵션 사용방법
이번 html강좌는 조금은 재미잇는 내용이 될 것 같습니다. 바로 글자가 움직이는 태그 marquee 태그를 알아볼건데요.
공지사항이나 글자가 긴 게시판에 이 태그를 이용해서 글자를 움지이게 하기도 합니다.
움직이는 것이라서 볶잡할것 같지만 아주 간단합니다. 움직이는 방향도 왼쪽에서 오른쪽 , 위에서 아래, 반대 방향 및 속도까지 설정할 수 있습니다.
marquee 태그 사용 방법과 옵션에 대해 알아보겠습니다.
1. marquee 태그 사용 방법
사용방법은 marquee 태그 사이에 글자를 넣으시면 됩니다.
<marquee>글자</marquee>
태그 사이에는 글자 및 html 태그도 들어갑니다.
<marquee><table>~~ , <div> , <img > </marquee>
그렇기 때문에 이미지 및 그림 테이블등 다양하게 적용시킬 수 있습니다.
오른쪽에서 왼쪽으로 글자가 이동하는것을 확인할 수 있습니다.
2. 방향설정 - direction
이제 옵션 설정을 하나씩 해보겠습니다.
옵션은 direction 으로 기본값은 left로 오른쪽에서 왼쪽으로 이동합니다.
right, up, down 등 설정할 수 있습니다.
<marquee direction="right" >
3. 속도 설정 - scrolldelay
속도 설정 방법은 scrolldelay 옵션을 사용합니다. 1/1000 초 단위로 사용되며
값이 작을 수록 속도가 빠릅니다.
<marquee scrolldelay="10" >
4. 범위 설정 - width, height
글자 움직이는 이동 범위를 설정합니다.
<marquee width="300" height="300">
5. 픽셀 이동 단위 설정 -scrollamount
옵션을 지정한 만큼 픽셀을 이동됩니다
1을 입력하면 1픽셀씩 이동해서 느리면서 부드럽고, 10을 입력하면 10픽셀씩 이동하게 되서 빠르면서 끊어지는 느낌이 있습니다. 영화 프레임이라고 생각하시면 이해가 되실 겁니다.
<marquee scrollamount="1">
6. 배경색 - bgcolor
옵션명령은 bgcolor입니다. 이동 범위안의 배경색을 지정할 수 있습니다.
배경색은 red, yellow 같은 컬러명이나 , #000000같은 코드로도 지정할 수 있습니다.
<marquee bgcolor="#000000">
7. 반복횟수 - loop
텍스트가 이동하면서 화면 밖으로 벗어나게되면 반복 횟수가 1로 됩니다.
3이 입력되면 3번 반복하고 종료됩니다.
<marquee loop="3">
실행해보았습니다. 강좌 파일입니다
marquee.html
지금 까지 html 글자를 움직이는 marquee 태그 사용 방법을 알아보았습니다.
