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" 의 경우 |
|
|
scrolldelay="300" 의 경우 |
|
|
scrolldelay="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>
*속성 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>
|
