마퀴(marquee) 태그에 사용되는 속성과 값에 대하여 정리해 본 글입니다.
게시물 작성에 다양성을 주는 데 도움이 되기를 바랍니다.
아래의 설명 글의 빨간색 부분은 마퀴(marquee)의 움직이는 공간(영역)을 나타 낸 것이며,
초록색 사각형은 마퀴 내용물인 객체(이미지, 텍스트 등)를 표시한 것으로
마퀴에 사용되는 "속성과 값"의 이해를 돕기 위한 것입니다.
실제 사용 시 필요하지 않을 때는 마퀴영역에 색을 넣지 않으면 되겠지요.
마퀴에 사용되는 "속성과 값"의 사용법을 개별로 설명하였으며,
실제 사용시는 필요에 따라 각 "속성과 값"을 마퀴 태그속에 선택적으로 함께
사용하면 될 것입니다.
※ 참고로 익스플로러에선 작동이 원활하지 않습니다. ※
<marquee 여기에 마퀴속성과 값을 지정>객체 입력(문자, 이미지 등)</marquee>
|
direction=left(기본값)
direction=right
|
|
움직이는 방향을 지정
속성 = direction
값 = left, right, up, down
direction=left : 왼쪽으로(기본값)
direction=right : 오른쪽으로
direction==up : 위로
direction=down :아래로
|
behavior=scroll
behavior=slide
behavior=slide
behavior=alternate
|
|
움직이는 형식을 지정
속성 = behavior
값 = scroll, slide, alternate(기본값=scroll)
behavior=scroll : 한 방향으로 계속 반복
behavior=slide : 끝에서 멈춤
behavior=alternate : 왕복 반복
|
scrollamount=6(기본값)
scrollamount=1
scrollamount=3
scrollamount=20
|
움직이는 속도를 지정
속성 = scrollamount
값 = 1 부터 숫자로 지정
기본 값= 6 (미 지정시)
|
scrollamount=6 scrolldelay=85(기본값)
scrollamount=6 scrolldelay=100
scrollamount=6 scrolldelay=60
scrollamount=2 scrolldelay=85(기본값)
scrollamount=2 scrolldelay=100
scrollamount=2 scrolldelay=60
|
속도 지연(늦추기)
scrollamount 속성으로 일차적인 속도를
지정한 후 그 속도에 지연(늦추기) 값을
추가하여 속도를 세밀한 단위로 조정함
속성 = scrolldelay (속도 지연)
기본 값 = 85 (미지정시)
사용범위 = 60 부터 (60 이하는 의미 없슴)
85 보다 작을 수록 속도가 빨라짐
85 보다 클 수록 속도가 느려짐(지연)
|
behavior=scroll loop=-1(기본값)
behavior=scroll loop=3
behavior=slide loop=3
behavior=alternate loop=3
|
움직이는 횟수를 지정함
지정한 횟수 만큼 움직이고 정지함
속성 = loop
값 = 숫자(반복횟수)
기본값= -1(무한반복- 미지정시)
|
참고로...
scrolldelay 값이 "60" 이하일경우
무조건 "scrolldelay=60"으로 처리되며
truespeed 옵션으로 지정 할 경우
값을 "60"이하로 설정할 수도 있으나
(....현 시험 상태론 ???)
|
scrollamount=1 scrolldelay=60
scrollamount=1 truespeed=40
scrollamount=1 truespeed=10
|
이웃 요소의 경계(테이블 또는 이웃하는 객체)와 여백을 주고자 할 때
사용하는 속성으로 단위는 픽셀이다
아래 예제에서 좌우 여백(hspace)은 테이블 선과의 사이가 되며,
상하 여백(vspace)은 각 마퀴 영역(빨간색부분)의 위와 아래에 객체(문장이나 이미지) 간의
여백으로 나타 남
hspace : 좌우 여백, vspace =상하 여백
~ 아름다운 우리 강산 푸르게 푸르게 ~
~ 인생 한 번 살다 가는 나그네 길 ~
|
marquee의 영역 설정
(마퀴 대상물이 활동공간)
width = 폭 (미 지정시 : 테이블 폭)
height = 높이 (미 지정시 : 객체높이)
bgcolor = 배경색
|
width, height 미 지정, bgcolor=ff000
width=300 height=25 bgcolor=ff000
우리 함께 가요
|
위 gif 마퀴태그 소스는 중복형(좌우이동과 상하이동)으로
<center>
<marquee scrollamount=1 direction=left behavior=alternate width=300 height=200 bgcolor=ff0000>
<marquee scrollamount=2 direction=up behavior=alternate width=150 height=180 bgcolor=#eabbe3>
<img src="이미지 주소" width=150 height=100> <br>
우리 함께 가요
</marquee></marquee>
</center>
마퀴 전체 영역은 적색 공간으로 객체(내용물-핑크색 폭)의 좌우 반복 공간이 되며,
<marquee scrollamount=1 direction=left behavior=alternate width=300 height=200 bgcolor=ff0000>
객체(이미지와 텍스트)는 핑크색 상하 공간(높이) 범위에서 상하 반복이동이 된다.
<marquee scrollamount=2 direction=up behavior=alternate width=150 height=180 bgcolor=#eabbe3>
결론적으로 내용물 객체는 마퀴 적색공간(좌우 반복)과 핑크색 공간(상하반복)에서 이중 이동을 하게 된다,
|
아래 예제들은 "새로고침" 클릭하고 확인하세요!
청노루 - 박목월
머언 산 청운사(靑雲寺)
낡은 기와집
산은 자하산(紫霞山)
봄눈 녹으면
느릅나무
속잎 피어나는 열 두 굽이를
청노루
맑은 눈에
도는
구름
|
청노루 - 박목월
머언 산 청운사(靑雲寺)
낡은 기와집
산은 자하산(紫霞山)
봄눈 녹으면
느릅나무
속잎 피어나는 열 두 굽이를
청노루
맑은 눈에
도는
구름
|
청노루 - 박목월
머언 산 청운사(靑雲寺)
낡은 기와집
산은 자하산(紫霞山)
봄눈 녹으면
느릅나무
속잎 피어나는 열 두 굽이를
청노루
맑은 눈에
도는
구름
|
호 수
정 지용
얼굴 하나야
손바닥 둘로
폭 가리지만
보고픈 마음
호수만 하니
눈 감을 밖에
|
|
|
노력 없이 쓰인 글은 대개 감흥 없이 읽힌다
|
|