옆으로 움직이는 텍스트 만들기 (MarQuee)
|
태그 |
속성 |
비고 |
|
<MARQUEE> |
bgcolor |
배경색상 설정 |
|
width |
가로 / 세로크기 설정 | |
|
height |
세로크기 설정 | |
|
direction |
스크롤의 움직임 방향 | |
|
behavior |
움직임의 속성 | |
|
loop |
움직임 반복횟수 | |
|
scrollamount |
스크롤 되는 거리간격 | |
|
scrolldelay |
스크롤의 속도 | |
|
vspace |
위 여백 | |
|
hspace |
아래 여백 |
MarQuee에는 다양한 속성들이 있습니다.
1. bgcolor는 스크롤의 배경색상을 지정해주는 역할을 합니다.
2. width / height는 스크롤의 크기나 비율을 정해줄 수 있습니다.
3. direction은 스크롤의 움직임 방향(up,down,left,right)를 정해줄 수 있습니다.
4. behavior이라는 속성을 주면 스크롤이 무한루프로 계속 반복해서 돌게됩니다.
5. loop속성을 주게되면 loop를 준 횟수 만큼 스크롤이 돌게 됩니다.
6. scrollamount과 scrolldelay은 둘다 스크롤이 움직이는 속도라고 생각하시면 됩니다.
7. hspace / vspace은 스크롤의 여백을 주는 기능인데 잘 사용하지는 않습니다.
MarQuee태그자체를 요새는 잘 사용하지 않습니다. 살짝 촌스러운 느낌이 들어서인가봅니다.
예제
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>MarQuee 태그로 흘러가는 텍스트 만들기!!</title>
</head>
<body>
<h2 align = "center">아래의 텍스트가 움직여요!!</h2>
<p>
<MARQUEE>이 텍스트가 움직인답니다.</MARQUEE>
<!-- 움직이는 텍스트 -->
</p>
<p>
<MARQUEE><img src= "aaa.jpg" width="200" height="150"></MARQUEE>
<!-- 움직이는 사진 -->
</p>
<p>
<MARQUEE bgColor="blue">배경 색상은 파란색입니다.</MARQUEE>
<!-- 배경 색상 조정 -->
</p>
<p>
<MARQUEE width="100" height="50">가로와 세로는 100/50입니다.</MARQUEE>
<!-- 크기 조절 -->
</p>
<p>
<MARQUEE direction="up">스크롤 방향이 위쪽이됩니다.</MARQUEE>
<!-- 스크롤 방향 설정 -->
</p>
<p>
<MARQUEE behavior="scroll">스크롤의 무한반복</MARQUEE>
<!-- 스크롤의 속성 -->
</p>
<p>
<MARQUEE loop="5">스크롤을 5회반복합니다.</MARQUEE>
<!-- 스크롤의 속성 -->
</p>
<p>
<MARQUEE scrollamount="2">한번에 2픽셀씩 이동합니다.</MARQUEE>
<!-- 스크롤의 속도 -->
</p>
<p>
<MARQUEE scrolldelay="200">0.2초마다 스크롤을 이동시킵니다.</MARQUEE>
<!-- 스크롤의 속도-->
</p>
<p>
<MARQUEE hspace="50" vspace="50" >스크롤의 위/아래 여백을 줍니다.</MARQUEE>
<!-- 스크롤의 여백 -->
</p>
</body>
</html>결과