본문으로 바로가기

html 글자를 움직이는 marquee 태그 방향, 속도 등 옵션 사용방법

category HTML 2019. 11. 16. 01:36

html 글자를 움직이는 marquee 태그 방향, 속도 등 옵션 사용방법

이번 html강좌는 조금은 재미잇는 내용이 될 것 같습니다. 바로 글자가 움직이는 태그 marquee 태그를 알아볼건데요.

공지사항이나 글자가 긴 게시판에 이 태그를 이용해서 글자를 움지이게 하기도 합니다. 

움직이는 것이라서 볶잡할것 같지만 아주 간단합니다. 움직이는 방향도 왼쪽에서 오른쪽 , 위에서 아래, 반대 방향 및 속도까지 설정할 수 있습니다. 

marquee 태그 사용 방법과 옵션에 대해 알아보겠습니다. 


1. marquee  태그 사용 방법

사용방법은 marquee 태그 사이에 글자를 넣으시면 됩니다. 

<marquee>글자</marquee>

태그 사이에는 글자 및 html 태그도 들어갑니다.

 <marquee><table>~~ , <div>  , <img > </marquee>  

그렇기 때문에 이미지 및 그림 테이블등 다양하게 적용시킬 수 있습니다.  

html 글자를 움직이는 marquee 태그



오른쪽에서 왼쪽으로 글자가 이동하는것을 확인할 수 있습니다.

왼쪽으로 글자가 이동하는것



2. 방향설정 - direction

이제 옵션 설정을 하나씩 해보겠습니다.  

옵션은 direction 으로 기본값은 left로 오른쪽에서 왼쪽으로 이동합니다. 

right, up, down 등 설정할 수 있습니다. 

<marquee direction="right" >

방향설정 - direction



3. 속도 설정 - scrolldelay

속도 설정 방법은 scrolldelay 옵션을 사용합니다.  1/1000 초 단위로 사용되며

값이 작을 수록 속도가 빠릅니다. 

<marquee scrolldelay="10" >

속도 설정 - scrolldelay



4. 범위 설정 - width, height

글자 움직이는 이동 범위를 설정합니다. 

<marquee width="300" height="300">

범위 설정 - width, height



5. 픽셀 이동 단위 설정 -scrollamount

옵션을 지정한 만큼 픽셀을 이동됩니다 

1을 입력하면 1픽셀씩 이동해서 느리면서 부드럽고, 10을 입력하면 10픽셀씩 이동하게 되서 빠르면서 끊어지는 느낌이 있습니다. 영화 프레임이라고 생각하시면 이해가 되실 겁니다.

<marquee scrollamount="1">

픽셀 이동 단위 설정 -scrollamount



6. 배경색 - bgcolor

옵션명령은 bgcolor입니다. 이동 범위안의 배경색을 지정할 수 있습니다. 

배경색은 red, yellow 같은 컬러명이나 , #000000같은 코드로도 지정할 수 있습니다. 

<marquee bgcolor="#000000">

배경색 - bgcolor



7. 반복횟수 - loop

텍스트가 이동하면서 화면 밖으로 벗어나게되면 반복 횟수가 1로 됩니다. 

3이 입력되면 3번 반복하고 종료됩니다. 

<marquee loop="3">

반복횟수 - loop



실행해보았습니다. 강좌 파일입니다 

marquee.html

지금 까지 html 글자를 움직이는 marquee 태그 사용 방법을 알아보았습니다. 

반응형


댓글을 달아 주세요