마퀴 태그 활용법

11. Marquee Tag 활용

 

<marquee>안녕하세요!!</marquee> 사이에 있는 글자만 입력합니다.

 

<marquee>안녕하세요!!</marquee> ☜ 마퀴태그의 기본.

 

안녕하세요!!

 

☞왕복하는 글씨...

 

<marquee behavior=alternate>글자가 좌우로 왕복*^^*</marquee>

 

글자가 좌우로 왕복*^^*

 

<marquee direction="left">이건 왼쪽이네요^^</marquee>

 

이건 왼쪽이네요^^

 

<marquee direction="right">이건 오른쪽이구여^^</marquee>

 

이건 오른쪽이구여^^

 

<marquee direction="up">요번에는 위로?</marquee>

 

요번에는 위로?

 

<marquee direction="down">다운이당ㅡㅡ+</marquee>

 

다운이당ㅡㅡ+

 

(<marquee behavior=alternate width=30>@^.^@</marquee>) ☜도리도리

 

(@^.^@)

 

<marquee direction="RIGHT" scrollamount="1"> __@/``</marquee> ☜달팽이 기어가는 모습.

 

__@/``

 

<marquee scrollamount=30>달팽아 난 절라 빠르쥥??</marquee>

 

달팽아 난 절라 빠르쥥??

 

<marquee width=500 scrollamount=300><font size=7>반짝반짝!!</marquee>

 

반짝반짝!!

 

<marquee bgcolor=red><font color=ffffff>하이~</font></marquee>

 

하이~

 

<marquee bgcolor=blue><font color=ffffcc>하이~</font></marquee>

 

하이~

 

<marquee bgcolor=000000><font color=00ff00 size=7>하이~</font></marquee>

 

하이~

 

<MARQUEE direction=right>ⓘ ⓛⓞⓥⓔ</MARQUEE>♡<MARQUEE direction=reft>ⓨⓞⓤ</MARQUEE>

 

ⓘ ⓛⓞⓥⓔ♡ⓨⓞⓤ

 

<marquee direction=up>안♡<ul>녕♡<ul>하♡<ul>세♡<ul>요♡<ul>반♡<ul>가♡<ul>워~♡<ul>요♡</MARQUEE>

 

안♡

녕♡

하♡

세♡

요♡

반♡

가♡

워~♡

요♡

 

<marquee><font size=5 color=red>방<br>가<br>워<br>요</font></marquee>

 

방

가

워

요

 

 

<marquee behavior=alternate direction=up height=50><font color=green size=4>정말 방가여^^</font></marquee>

 

 

정말 방가여^^

 

 

<marquee behavior=alternate width=150><font color=red size=4>띠바! 못 방가!!</font></marquee>

 

 

띠바! 못 방가!!

 

 

<marquee direction=down height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee><marquee direction=up height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee>

 

노래 조오타 !!

노래 조오타 !!

 

 

 

<marquee direction=up height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee><marquee direction=down height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee>

 

노래 조오타 !!

노래 조오타 !!

 

 

 

<marquee direction=up behavior=alternate><marquee behavior=alternate><h2>글씨가 파도를 치넹^^;</h2></marquee>

 

글씨가 파도를 치넹^^;

 

 

		<marquee direction="방향">움직이는 글자 태그</marquee> - 글자움직임은 글자를 상하좌우 등으로 움직여 주는 것입니다. 여기서 direction이라 지정하고 따옴표 안에 up, down, right, left.. 등의 방향을 주는데 방향이 한쪽으로만 움직이지 않을 경우에는 direction 대신 behavior라 지정하고 움직임의 종류를 따옴표 안에 넣어주면 됩니다. 그리고 scrolldelay="속도"를 해주어 움직이는 속도를 조정할 수 있고 두가지 이상의 움직임을 한꺼번에 적용할 수도 있습니다. 아래의 예를 참고하세요~
	예제소스 <marquee direction="right">오른쪽으로 움직임</marquee> 오른쪽으로 움직임 <marquee direction="left">왼쪽으로 움직임</marquee> 왼쪽으로 움직임 <marquee behavior="alternate">좌우로 움직임</marquee> 좌우로 움직임 <marquee behavior="alternate" scrollamount="1000">좌우로 빠르게</marquee> 좌우로 빠르게 <marquee direction="up" scrolldelay="200">위로 올라감</marquee> 위로 올라감 <marquee direction="down" scrolldelay="200">아래로 내려감</marquee> 아래로 내려감 <marquee>한<ul>글<ul>자<ul>씩<ul>움<ul>직<ul>임<ul></marquee> 한   글 자 씩 움 직 임   <marquee behavior="alternate" direction="up">두개이상 적용</marquee> 두개이상 적용

5. 마퀴 테그 활용

<marquee align="center" behavior="alternate" direction="up" width="200" height="150"> 아름다운 우리나라</marquee>

◈ Marquee(마퀴) 태그

1. 마퀴 태그란? text 에 관한 태그 중 유일하게 글자를 움직일 수 있게 하는 태그가 marquee 태그입니다. marquee태그는 사용하기에 따라 얼마든지 응용이 가능하고, 홈페이지에서도 잘만 사용하시면 얼마든지 멋진 홈페이지를 꾸밀 수 있습니다. 하지만 너무 과도하게 사용하시면 홈페이지가 지저분해지기 때문에 무리하게 사용하지 않으시는 게 좋습니다. 속성 요약 bgcolor=[색상]         // 배경색상을 설정 합니다 width=400 height=300   // 가로, 세로 크기를 설정 합니다 direction="left"       // 좌측방향으로 스크롤 됨.(디폴트)          ="right"      // 우측방향으로 스크롤 됨.           ="up"         // 위 방향으로 스크롤 됨.           ="down"       // 아래방향으로 스크롤 됨. behavior=scroll        // 한쪽방향으로 반복 스크롤 (디폴트)         =slide         // 스크롤되어와서 엄춤         =alternate     // 왼쪽, 오른쪽으로 반복 스크롤 loop=3                 // 반복횟수를 설정 합니다     =infinite          // 무한대(계속반복) (디폴트) scrollamount="3"       // 스크롤 되는 거리간격을 픽셀단위로 설정 scrolldelay="200"      // 스크롤속도(0.2초) (디폴트-200) hspace="50"            // 왼쪽의 여백을 지정할 수 있습니다 vspace="50"            // 위의 여백을 지정할 수 있습니다

2. 마퀴 태그의 기본  <marquee>내용</marquee> "내용"에는 그림을 넣을 수도 있습니다.

3. 그림을 넣는다면 <marquee><img src="이미지주소"></marquee>

4. marquee태그의 속성들과 그 예제 *속성 1 : <marquee behavior=scrol>내용</marquee> 내용 일정방향 스크롤 속성을 나타낸 태그입니다.  *속성 2 : <marquee behavior=slide>내용</marquee> 내용 마퀴태그가 한 번 반복 후 화면 끝에서 정지되는 속성을 나타낸 태그입니다. 아래 예제를 보시면 벌써 왼쪽에 정지되어 있어야 할텐데 다시 reload(새로고침)를 해서 보세요.   *속성 3 : <marquee behavior=alternate>좌우왕복</marquee> ☜ 좌우왕복 ☞  *속성 4 : <marquee scrolldelay="수치">내용</marquee>  scrolldelay="수치"  속성은 스크롤 지연값을 정해줍니다. 수치를 크게 할수록 마퀴태그의 스크롤 속도가 늦어집니다.  scrolldelay="100" 의 경우 값이 100 scrolldelay="300" 의 경우 값이 300 scrolldelay="1000" 의 경우 값이 1000 *속성 5 : <marquee scrollamount="수치">내용</marquee> scrollamount="수치" 속성은 스크롤의 속도(이동량)를 조절해줍니다. scrolldelay 속성은 수치가 클수록 속도가 느려지는 반면 scrollamount 속성은 수치가 클수록 속도가 빨라집니다.  scrollamount="3" 의 경우 거북이  scrollamount="6" 의 경우 토끼  scrollamount="10" 의 경우 치타  *속성 6 : <marquee loop="수치/infinite">내용</marquee> loop는 주어진 수치 값 만큼 반복 횟수를 정하는 속성입니다. 그리고 무한 반복을 하고 싶으면 infinite를 사용하시면 됩니다. 그런데 그냥 마퀴태그만 쓸 때는 무한반복의 의미가 별로 없습니다. 굳이 infinite 속성을 쓰지 않아도 계속 반복 되기 때문이지요. <marquee loop="3">3번 반복</marquee> <marquee loop="infinite">무한반복</marquee>  3 번반복 무한반복  *속성 7 : <marquee bgcolor="색명/RGB색상코드">내용</marquee>마퀴태그 부분에 배경색을 정해 줍니다 <marquee bgcolor="green">녹색</marquee> <marquee bgcolor="ivory">아이보리색</marquee> 녹색이네요 아이보리색이네요  *속성 8 : <marquee width="가로수치" height="세로수치">내용</marquee> 마퀴태그가 적용되는 스크롤 부분의 가로와 세로 너비를 지정해주는 속성입니다. <marquee width="30">내용</marquee> <marquee height="50">내용</marquee> 내용 내용  *속성 9 : <marquee direction="left,right,up,down">내용</marquee> direction="left" direction="right" direction="up" direction="down" 내용 내용 내용 내용

5. 응용 예제들 <marquee>←♡--<</marquee>   ←♡--<  <marquee width="300">←♡--<</marquee>    ←♡--<{>  <marquee behavior=alternate width=600 scrollamount=1000>반짝</marquee>   반짝  (<marquee behavior=alternate width=30>@^.^@</marquee>)도리   (  @^.^@)도리 <MARQUEE DIRECTION=RIGHT><MARQUEE DIRECTION=LEFT>여러분 안녕하세요? 만나서 반갑습니다. </MARQUEE> 여러분 안녕하세요? 만나서 반갑습니다. - 유리꽃-  <marquee behavior="alternate" direction="up" height=50>내용</marquee>   내용  <marquee behavior="alternate" direction="up" bgcolor=" #CC99CC " width=200 height=50>내용</marquee>    내용  <marquee behavior="alternate" width="300" height="150"> <marquee align="center" behavior="alternate" direction="up" width="200" height="150"> 건강하세요.</marquee></marquee>    건강하세요.

 

마퀴 태그

(옆으로 흐르듯 지나가는 이미지 만드는 방법)

 

사진을 아무 게시판에나 올리고 사진의 주소(URL)을 복사하세요.

 

 

 

 

=====================================================================================

 

<MARQUEE scrollAmount=10>

<IMG src="http://www.diningok.com/new_images/20030412001/20030412001_menu3.jpg">

<IMG src="http://www.diningok.com/new_images/20030501001/20030501001_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20030501001/20030501001_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20030501001/20030501001_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20030214001/20030214001_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20021204001/20021204001_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20021204001/20021204001_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20030409003/20030409003_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20020828001/20020828001_menu3.jpg">

<IMG src="http://www.diningok.com/new_images/20020828001/20020828001_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20030306001/20030306001_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20030306001/20030306001_menu3.jpg">

<IMG src="http://www.diningok.com/new_images/20030104003/20030104003_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20030104003/20030104003_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20020121003/20020121003_menu2.jpg">

<IMG src="http://www.diningok.com/new_images/20030210001/20030210001_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20030210001/20030210001_menu3.jpg">

<IMG src="http://www.diningok.com/new_images/20021106003/20021106003_menu1.jpg">

<IMG src="http://www.diningok.com/new_images/20030403004/20030403004_menu5.jpg">

<IMG src="http://www.diningok.com/new_images/20030320001/20030320001_menu3.jpg"></MARQUEE>

 

 

마퀴태그(MARQUEE)는 여러개의 움직이는 이미지를 만들 수 있는 태그입니다.

<MARQUEE scrollAmount=10>.....

이렇게 이미지가 움직이는 속도등의 명령어를 넣으면 속도 조절이 자유로우며

여러 개의 이미지를 넣을 수도 있어요.

위의 파란 글자 부분이 이미지 주소 입니다.

 

<MARQUEE>마퀴 태그 시작과 마감소스 </MARQUEE>사이에

원하는 이미지 주소를 넣으시면 됩니다.

 

scrollAmount=10은 이미지가 움직이는 속도.

 

마퀴 태그를 적용한 이미지를 만들 때는 이미지 사이즈를 동일하게 하는게 좋으며,

너무 사이즈가 크면 떨림 현상이 있을 수도 있어요.