[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)
- Web/HTML, CSS
- 2018. 6. 18.
요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그는 바로 MarQuee태그인데요. 이번 포스팅에서는 HTML MarQuee태그를 사용하는 방법에 대해 알아보도록 하겠습니다.
옆으로 움직이는 텍스트 만들기 (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>
결과
[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등
[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] UL 태그, OL태그, DL태그, LI태그 사용법 (4) | 2018.06.20 |
|---|---|
| [Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용) (0) | 2018.06.19 |
| [Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태) (2) | 2018.06.16 |
| [Html] 수평선 긋기 HR태그 사용법 (1) | 2018.06.15 |