《공부하시는데 참조가 되길 바라면서
여기 마키의 모든 것을 예제를 1장으로 간단히 요약해 보았습니다.》
1. 마키(marquee)지정하기
<P><MARQUEE> 마키를 지정하면 TEXT가 오른쪽에서 왼쪽으로 스크롤되며 보여준다. </MARQUEE> </P>
2. 마키의 배경색 지정
<P><MARQUEE bgcolor="greenw">마키에 초록색의 배경색을 지정하였습니다.</MARQUEE></P>
3. 마키의 크기 지정
<P><MARQUEE width="400" height="50" bgcolor="초록색">마키에 초록의 배경색을 지정하여 마키의 크기를 가로 200픽셀,세로 50픽셀로 지정하였습니다.</MARQUEE></P>
4. 마키의 스크롤 방향 지정
4-1 좌우로
<P><MARQUEE>오른쪽에서 왼쪽으로 택스트가 흐른다.</MARQUEE></P>
<P> </P>
<P><MARQUEE direction="right">왼쪽에서 오른쪽으로 택스트가 흐른다. </MARQUEE>
<P>
4-2 상하로
<P><MARQUEE width="400" height="300" bgcolor="green" direction="up">아래쪽에서 윗쪽으로 택스트가 흐른다. 마키의 크기를 가로 400픽셀,세로 300픽셀로 지정하였습니다.</MARQUEE> <MARQUEE width="300" height="200" bgcolor="pink" direction="down">윗쪽에서 아래쪽으로 택스트가 흐른다. 마키의 크기를 가로 300픽셀,세로 200픽셀로 지정하였습니다.</MARQUEE></P>
5. 마키의 움직임 지정
5-1 반복
<MARQUEE>지정한 방향으로 스크롤이 반복한다.</MARQUEE>
5-2 slide
<MARQUEE behavior="slide">지정한 방향으로 스크롤되다가 화면 끝에 오면 텍스트가 멈춘다.</MARQUEE>
5-3 alternate
<MARQUEE behavior="alternate">좌우로 왕복하며 스크롤하게 된다.</MARQUEE>
6. 마키의 움직임 회수 지정
6-1 scoll 경우
<MARQUEE loop="3">3회 스크롤하고 난 후 사라진다.</MARQUEE>
6-2 slide
<MARQUEE behavior="slide" loop="2">2회 스크롤하고 난 후 멈춘다.</MARQUEE>
6-3 alternate
<MARQUEE behavior="alternate" loop="2">2회 좌우로 왕복하며 스크롤하고 멈춘다.</MARQUEE>
7. 마키의 스크롤되는 거리 간격 지정
<P><MARQUEE>거리 간격을 지정하지 않았을 경우</MARQUEE></P>
<P><MARQUEE>6(기본값)으로 거리 간격을 지정하였을 경우</MARQUEE></P>
<P><MARQUEE scrollamount="2">2으로 거리 간격을 지정하였을 경우</MARQUEE></P>
<P><MARQUEE scrollamount="15">15으로 거리 간격을 지정하였을 경우</MARQUEE></P>
8. 마키의 스크롤되는 시간 간격 지정
<P><MARQUEE>시간 간격을 지정하지 않았을 경우</MARQUEE></P>
<P><MARQUEE scrolldelay="50">50으로 시간 간격을 지정하였을 경우</MARQUEE></P>
<P><MARQUEE scrolldelay="100">100(기본값)으로 시간 간격을 지정하였을 경우</MARQUEE></P>
<P><MARQUEE scrolldelay="200">200으로 시간 간격을 지정하였을 경우</MARQUEE></P>
9. 마키 주변 여백 지정(HSPACE , VSPACE)
<MARQUEE width="200" height="30" bgcolor="lightblue" vspace="50" hspace="150">마키주변의 여백을 좌우 150픽셀, 상하 50로 지정함</MARQUEE>
마키가 스크롤되는 범위 주변에 여백을 지정해 줄 수가 있다.
HSPACE=>좌우 여백 , VSPACE=>상하 여백
10. 마키 활용
<marquee direction=up behavior=alternate height=40>어라~ 글자가 움직이넹..^^*</marquee><marquee direction=up behavior=alternate height=100><marquee>어라~ 글자가 움직이넹..^^*</marquee></marquee>
<marquee direction=down><ul>어<ul>라<ul>~<ul>글<ul>자<ul>가<ul> 움<ul>직<ul>이<ul>넹<ul>..<ul>^^*<ul></marquee>
<marquee scorllamount=200>어라~ 글자가 움직이넹..^^*</marquee>
--------------------------------
마우스를 언젔을 때 잠시 stop 한다
<★MARQUEE onmouseover=stop(); onmouseout=start(); scrollAmount=1 scrollDelay=100
direction=up loop=ture width=480 height=250>
behavior=slide ☜━marquee 영역의 끝 부분에서 멈춥니다
-------------------------------------
이미지에 마우스 가져다 대면 흑백으로 색이 변하는 [필터효과를 이용한 소스]
<*img src="http://myhome.naver.net/jyd1441/image/09.jpg" onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''">