[스크랩] 마퀴소스의 설명과 태그 소스 총집합

움직이는 글자(mrquee)   마퀴(marquee)라는 영어 단어는 "움직이다"라는 뜻이 들어있습니다. 이 태그는 글자,그림 등을 움직이게 할 수 있는데여... 마퀴 태그는요 marquee 이 단어 하나만으로도 아주 많은 표현을 할 수 있는 간단하면서도 강력한 태그언어라 할 수 있습니다. 홈페이지 제작할 때는 다른 태그와 함께 아주 중요한 문자입니다. marquee 태그에도 여러 가지 옵션을 삽입할 수 있는데여..... 좌로 이동, 우로 이동 , 아래로 이동 , 위로 이동 , 좌우로 이동 등을 글자나 그림에 붙여서 사용할 수 있습니다. 홈페이지에서는 많이 사용되지는 않지만 다른 태그와 함께 필수로 알아 두셔야 할 사항입니다. 주로 채팅방에서 많이 사용되는 마퀴(marquee)태그를 지금부터 알아 보도록 하겠습니다.   1.기본적인 소스 글자내용 : 여기에 여러 가지 옵션을 넣어서 사용합니다.   옵션코드와 의미 , 결과보기를 표를 이용하여 알아 보겠습니다. 기본 소스 : <marquee behavior="사용할옵션">본문 내용</marquee>   scroll : 영역을 벗어나서 사라지게 하는 옵션입니다. 소스 <marquee behavior=scroll>글자가 계속 반복해서 움직입니다.</marquee> 결과 글자가 계속 반복해서 움직입니다. slide loop : 영역의 끝부분에서 멈추게 합니다. 반복 횟수를 말합니다.(안에 숫자를 입력한 크기 만큼 글자가 반복하여 움직입니다.) "loop" 에 숫자를 몇으로 하느냐에 따라 보여지는 느낌이 다르게 표현 되기도 합니다. loop : "infinite" 적어주면 무한대로 반복하는 것으로 -1을 적어줘도 동일합니다. loop 에 반복 횟수를 한번만 준 경우 소스 <marquee behavior=slide loop=1>(끝에서 와서 멈춥니다.)</marquee> 결과 (끝에서 와서 멈춥니다.)   loop 에 반복 횟수를 30번 준 경우 글자가 갑자기 사라지는 느낌이 전해 집니다. 소스 <marquee behavior=slide loop=30>(글자가 갑자기 사라집니다.)</marquee> 결과 (글자가 갑자기 사라집니다.)   alternate : 영역 안에서 왔다갔다 합니다. 소스 <marquee behavior=alternate>좌 , 우로 왔다 갔다......</marquee> 결과 좌 , 우로 왔다 갔다......   bglolor : 영역의 배경색을 지정합니다. 소스 <marquee bgcolor=pink>배경색상</marquee> 결과 배경색상   width(넓이) 와 height(높이) : 영역의 넓이와 높이를 지정합니다. <marquee direction="뱡향" width="넓이 숫자" height="넓이 숫자" bgcolor="색상">내용</marquee> 소스 <marquee width=400 height=50 bgcolor=00ffff>넓이와 높이</marquee> 결과 넓이와 높이   direction : 움직이는 방향을 지정해 줍니다. 방향에는 " left , right , up , down " 의 4가지 옵션을 사용할 수 있습니다. 왼쪽으로 이동하는 소스 <marquee direction=left>왼쪽으로 이동합니다.</marquee> 결과 왼쪽으로 이동합니다. 오른쪽으로 이동하는 소스 <marquee direction=right>오른쪽으로 이동합니다.</marquee> 결과 오른쪽으로 이동합니다. 올라가는 소스 <marquee direction=up>위로 이동합니다.</marquee> 결과 위로 이동합니다. 내려가는 소스 <marquee direction=down>아래로 이동합니다.</marquee> 결과 아래로 이동합니다.   scrolldelay : 스크롤의 지연효과를 얻기 위해서 scrolldelay를 사용합니다. 만약 1초간 멈췄다가 이동하려면 1000을 지정해 주면 됩니다. 소스 <marquee scrolldelay=1000 bgcolor=silver>1초간 정지합니다.</marquee> 결과 1초간 정지합니다.   scrollamount : 값(숫자가 클수록)을 많이 줄 수록 스크롤 속도가 빨라집니다 소스 <marquee scrollamount=30>하모니의 쉼터로 놀러 오세요.^^*</marquee> 결과 하모니의 쉼터로 놀러 오세요.^^*   ※ 위에 쓰여진 태그에 여러 가지 옵션을 사용하여 다이나믹하게 표현할 수 있습니다. 예를 들어 <marquee behavior=scroll><font size="2" color="black" face="바탕">하모니의 쉼터</font></marquee> 이 태그안에 크기나 방향 , 색상등을 삽입하여 쓰기도 합니다. 또는 글씨체와 글자 크기를 변경 할 수도 있는데요. 바꾸는 방법은 marquee 앞에 내용을 삽입하면 되겠지요? 예) <marquee behavior=scroll><font size="2" color="black" face="바탕">내용</font></marquee> 이런식으로 여러 가지 옵션을 써서 표현할 수 있다는 점을 명심하시기 바랍니다. 태그는 여러 가지 응용력을 발휘하면 할수록 돋보이게 됩니다.     2. 마퀴(marquee)태그에 옵션을 삽입한 또 다른 예제입니다. 아래로 내려가는 태그 소스 <marquee direction=down>♣하♣모♣니 결과 ♣하 ♣모 ♣니 올라가는 태그 소스 <marquee direction=up>♣하♣모♣니 결과 ♣하 ♣모 ♣니 글자가 세로로 이동하는 태그 소스 <MARQUEE bgcolor=white direction=reft scrollamount=1 width=300 height=50 loop=-1>하<br>모<br>니</marquee> 결과 하 모 니 왼쪽으로 이동하면서 위로 올라가는 태그 소스 <MARQUEE DIRECTION=LEFT><marquee direction=up><font size=5 color=pink face=바탕체>좋은 하루!</font> 결과 좋은 하루! 빙글빙글 태그 소스 <marquee direction=up behavior=alternate height=100>글자가 막 돌아요~~</font> 결과 글자가 막 돌아요~~   이렇게 태그에 여러 가지 옵션을 삽입하여 응용하면 멋진 글자 태그가 탄생됩니다. 여러 가지를 혼합하여 응용할 수도 있습니다.   [* 문자를 움직이게 하는 태그 *] 여러분이 웹 서핑중에 혹시 글자가 옆으로 이동하는 것을 보신적이 있으셨을것입니다. 그것은마퀴(Marquee)라는 태그를 이용해서 작성된 HTML 문서입니다. 익스플로러에서만 작동되는 익스플로러 확장기능TAG입니다. <MARQUEE>를 사용하면 지정된 영역내에서 글자가 스크롤되어 지나갑니다. 정적인 화면에 글자가 스크롤되기 때문에 시각적인 효과가 뛰어나서 많이 사용되고 있습니다. 아래의 예문이 어떻게 나타나는지 보도록 하겠습니다. <MARQUEE> 어서오세요 석동 자료실입니다 방문해 주셔서 감사합니다. 마퀴 테그는 아무런 속성없이 사용하면 화면 오른쪽에서 왼쪽으로 글자가 스크롤됩니다. 마퀴 테그에 여러가지 속성을 사용하여 스크롤방식이나 영역 등을 지정해 줄 수 있습니다. HEIGHT : 마퀴영역 높이 WIDTH : 넓이 BGCOLOR : 마퀴영역의 배경색 BEHAVIOR! : 스크롤 방향 LOOP : 스크롤되는 반복횟수 SCROLLAMOUNT : 한번에 스크롤되는 속도 SCROLLDELAY : 한번 스크롤되고 대기하는 시간 스크롤의 방향을 결정하는 테그는 아래와 같습니다. behavior!=scroll(기본값) : 오른쪽에서 왼쪽으로 글자가 스크롤 behavior!=slide : 오른쪽에서 왼쪽으로 와서 멈춤 behavior!=alternate : 좌,우로 왔다 갔다 함 direction=left : 오른쪽에서 왼쪽으로 스크롤(기본값) direction=right : 왼쪽에서 오른쪽으로 스크롤 마퀴는 아무런 속성도 지정하지 않으면 오른쪽에서 왼쪽으로 계속해서 반복 스크롤하며, 화면 전체를 사용합니다. 이제 마퀴 태그를 종합한 결과 화면을 보시고 여러분이 원하는 태그를 응용해보시기 바랍니다. 아래의 예문이 어떻게 나타나는지 보도록 하겠습니다. <MARQUEE bgcolor=#000000> <FONT color="#FFFF00">~SAVER~ 왼쪽에서 오른쪽으로 </FONT> </MARQUEE> ~SAVER~ 왼쪽에서 오른쪽으로 <MARQUEE bgcolor=#000000 direction=right> <FONT color="#FFFF00"> ~SAVER~ 오른쪽에서 왼쪽으로 </FONT> </MARQUEE> ~SAVER~ 오른쪽에서 왼쪽으로 <MARQUEE bgcolor=#000000 scrollamount=5> <FONT color="#FFFF00"> <B> ~SAVER~ 문자를 굵게 </B> </FONT> </MARQUEE> ~SAVER~ 문자를 굵게 <MARQUEE bgcolor=#000000 behavior!=alternate> <FONT color="#FFFF00"> ~SAVER~ 계속 좌,우로 </FONT> </MARQUEE> ~SAVER~ 계속 좌,우로 <MARQUEE bgcolor=#000000 behavior!=slide> <FONT color="#FFFF00"> ~SAVER~ 와서 멈춤 </FONT> </MARQUEE> ~SAVER~ 와서 멈춤 마퀴의 또다른 예로는 문자를 평면적인 이동을 시키는것외에 상,하로 움직이는 역활도 합니다. 이러한 태그를 이용하면 여러분의 홈에 공지사항이나 멋진 시를 넣어서 공간활용을 하실수가있습니다. 여기에 해당하는 태그의 속성으로는 아래와 같습니다. direction="up": 문자가 아래에서 위로 스크롤 direction="down": 문자가 위에서 아래로 스크롤 아래의 예문이 어떻게 나타나는지 보도록 하겠습니다. <marquee direction="up" width="210" height="150" scrollamount=1 > 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로. 바람이 불면 고개를 높이 쳐들면서,날리는 아득한 미소 어디엔가 있을 나의 한쪽을 위해 헤매이던 숱한 방황의 날들. 태어나면서 이미 누군가가 정해졌었다면 이제는 그를 만나고 싶다. </marquee> > 기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로. 바람이 불면 고개를 높이 쳐들면서,날리는 아득한 미소 어디엔가 있을 나의 한쪽을 위해 헤매이던 숱한 방황의 날들. 태어나면서 이미 누군가가 정해졌었다면 이제는 그를 만나고 싶다. 위의 태그를 보신바와 같이 direction="up" 은 아래에서 위로 문자를 스크롤 시켜주는 것이며, 위에서 아래로 스크롤 해주시기위해서는 direction="down"으로 넣어 주시면 됩니다. width="210" height="150" 은 문자가 스크롤 되는 범위를 지정해 주는것이며, scrollamount=1은 속도를 지정해주는 것으로서 숫자가 크면 속도는 빠르게 움직이게 됩니다. ☞ 이미지도 가능합니다. ①. <marquee>안녕하세요!!</marquee> 안녕하세요!! ②.<marquee direction="left">이건 왼쪽이네요^^</marquee> 이건 왼쪽이네요^^ ③.<marquee direction="right">이건 오른쪽이구여^^</marquee> 이건 오른쪽이구여^^ ④.<marquee direction="up">요번에는 위로?</marquee> 요번에는 위로? ⑤.<marquee direction="down">다운이당ㅡㅡ+</marquee> 다운이당ㅡㅡ+ ⑥.<marquee scrollamount=30>달팽아 난 절라 빠르쥥??</marquee> 달팽아 난 절라 빠르쥥?? ⑦.<marquee width=300 scrollamount=300><font size=7>반짝반짝!!</marquee> 반짝반짝!! ⑧.<marquee direction="RIGHT" scrollamount="1"> __@/``</marquee><br> __@/`` ☞ 마퀴태그의 기본응용. ⓐ.<MARQUEE direction=right>ⓘ ⓛⓞⓥⓔ</MARQUEE>♡<MARQUEE direction=reft>ⓨⓞⓤ</MARQUEE> ⓘ ⓛⓞⓥⓔ♡ ⓨⓞⓤ ⓑ.<marquee direction=up>안♡<ul>녕♡<ul>하♡<ul>세♡<ul>요♡<ul>반♡<ul>가♡<ul>워~♡<ul>요♡</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> 노래 조오타 ! ☞ 마퀴태그의 - 움직임- " behavior!=alternate" ☞왕복하는 글씨. <marquee behavior!=alternate>글자가 좌우로 왕복*^^*</marquee> 글자가 좌우로 왕복*^^* ☞도리도리 (<marquee behavior!=alternate width=50>@^.^@</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=up behavior!=alternate><marquee behavior!=alternate><h2>글씨가 파도를 치넹^^;</h2></marquee> 글씨가 파도를 치넹^^; ☞좀 쉬고... <marquee direction=up behavior!=alternate scrollamount=1 height=50 width=400><br>    <marquee direction=up scrollamount=1>잠깐만... <br> <BR>좀 쉬었다가...<br></marquee></marquee>   잠깐만...   좀 쉬었다가... ☞잔 물결...(파도-좌/우 응용) <MARQUEE direction=up scrollAmount=1><br><marquee direction="left" scrollamount="1" behavior!="alternate"><br>천천히...<br>한 계단 한계단.....<br></marquee></Marquee> 천천히... 한 계단 한계단..... [설명] behavior!="scroll | slide | alternate" scroll : 반복적으로 나타났다 사라집니다. slide : 한번만 움직입니다. alternate : 계속 같은 프레임 안에서 반복합니다. (loop : 반복 횟수) direction="right | up | down" : 텍스트가 흘러가는 방향을 정해줍니다. height : 움직이는 텍스트의 높이를 정해줍니다. 단위는 "픽셀"입니다. scrollmount : 글자의 움직이는 속도를 조정합니다. 값이 커질수록 빨라집니다. scrolldelay : 흘러가는 텍스트가 다시 나타나는 간격을 정합니다. 입력은 밀리미터 단위로 하며, 값이 적을수록 움직임이 빨라집니다. ◈ 움직이는 글자 이 태그는...글자를 움직일 수 있게 하는 태그입니다...바로 'marquee' 태그이지요...아마도 적은 명령에 비해 큰 효과를 내는 편이라서 주로 많이 쓰입니다...자바스크립트로도 이와 비슷한 내용으로 할 수 있는데 그건 텍스트 창에 내용 흘러가는 거라고 엄청 내용이 많은데 이거는 marquee로 끝내 버리니 간단명료하져...하지만 너무 많이 남용하면 너무 촌스러워 보이니까 적당히 사용하시구요...주로 챗방에서 쓰는데...(세이클럽에서는" /왼/내용" 이렇게 쳐도 글자이동함)홈피에도 쓰면 괜찮으니...마음껏 활용하세요~ 기본 태그는 <marquee>글자내용</marquee>이지요...저것도 옵션이 많이 있습니다...일단 기본형을 보여 드리겠습니다... 결과는 글자내용  이렇게 됩니다. 그럼...이 태그에 응용을 시켜봅시다...이것은 글씨체를 바꾸는 태그인데...글씨체 바꾸시고 싶으면 저기 궁서체 말고 다른 체 이름을 써 넣으시면 됩니다. 글자 태그하고 많이 유사하져?? <FONT face="궁서체"><marquee>글자내용</marquee> 글자내용 그럼...저 움직이는 글자를 크게하려면 어떻게할까요? 역시 글자 태그와 유사합니다. <FONT size="5"><marquee>말쓰는칸</marquee> 글자내용 글씨체도 바꾸고 크기도 바꾸려면...marquee 앞에 <font size="5"><font face"궁서체">를 삽입하면 되겠지요? 그럼...이 태그의 많은 변형에 대해서 설명하겠습니다. 이 태그도 옵션이 많이 존재합니다. 하지만 왼쪽 오른쪽 반복하는걸 빼면 그렇게까지 많이 쓰일 것 같지 않네여... <marquee behavior!=alternate>글자내용</marquee> ←왼,오른쪽으로 움직임의 반복 글자내용 <marquee behavior!=slide>글자내용</marquee> ←맨 끝에서 와서 맨앞에서 정지한후 반복   글자내용 <marquee scrollamount=20>글자내용</marquee> ← 저기 주황색으로 된 숫자가 클수록 속도가 빨라집니다. 최고치는 안해봐서 모르겠네요^^ 20으로했을때 글자내용 100으로했을 때 글자내용 <marquee scrolldelay=20>글자내용</marquee> ←이제는 저 주황색 숫자가 클수록 느려집니다. 저 바로 위의 태그와 반대되는 태그네요...^^ 20으로했을때   글자내용 100으로했을 때 글자내용 <marquee direction=right>글자내용</marquee> ←direction은 방향을 사용한다는 뜻입니다...저기 주황색 글자 right가 오른쪽이라는 뜻은 다 아시져? 그렇게 4방향을 사용하실수 있습니다.(left,right,up,down) right로 했을 때 <marquee direction=right>글자내용</marquee>   글자내용 left로 했을 때 <marquee direction=left>글자내용</marquee> 글자내용 up로 했을 때 <marquee direction=up>글자내용</marquee>   글자내용 down로 했을 때 <marquee direction=down>글자내용</marquee>   글자내용 <marquee bgcolor=blue>글자내용</marquee> ←bgcolor=이건 또 마퀴태그가 실행되는 배경의 색상을 정하는 곳입니다...저기 주황색으로 된 부분에 색상 코드나 색상이름을 넣어주시면 됩니다. 파란색   글자내용  빨간색 글자내용 아래 태그들은 대화방에서 쓰면 재밌겠지여? 그런데 너무 많이 쓰면 강퇴감이 되니 적당히 사용하세요...  <marquee direction=down><ul>♡방<ul>♡가<ul>♡워<ul>♡요 ♡방 ♡가 ♡워 ♡요    <marquee direction=up><ul>♡방<ul>♡가<ul>♡워<ul>♡요 ♡방 ♡가 ♡워 ♡요   <MARQUEE bgcolor=white direction=reft scrollamount=1 width=300 height=50 loop=-1>즐<BR>팅<BR>  !<BR></MARQUEE> 즐 팅  !   <MARQUEE DIRECTION=LEFT><marquee direction=up><font size=5 color=blue face=궁서체>하이~~~ 하이~~~    <marquee width=300><marquee direction=up behavior!=alternate height=55>빙글빙글 빙글빙글  빠진것 두개 더 보충 : <marquee direction=up behavior=alternate>아래에서 위로, 위에서 아래로 왕복합니다.</marquee> <marquee direction=down behavior=alternate>위에서 아래로, 아래에서 위로 왕복합니다.</marquee>

출처 : 춘하추동카페

글쓴이 : 대청공원 원글보기

메모 :