[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)

 

요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. 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>

 

결과

이 텍스트가 움직인답니다.

배경 색상은 파란색입니다.

가로와 세로는 100/50입니다.

스크롤 방향이 위쪽이됩니다.

스크롤의 무한반복

스크롤을 5회반복합니다.

한번에 2픽셀씩 이동합니다.

0.2초마다 스크롤을 이동시킵니다.

스크롤의 위/아래 여백을 줍니다.

[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등

[Html] 수평선 긋기 HR태그 사용법

[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)

[Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용)

[Html] UI 태그, OL태그, DI태그, LI태그 사용법

 

댓글(3)

  • 기용
    2019.07.11 21:56

    이야!! 신기하네요!!

  • 와우
    2020.03.31 13:58

    정말 유용합니다.. html에 이런기능 잇는줄 1년동안 모르고잇었습니다 감사합니다!

  • 하하
    2020.08.19 16:42

    프로젝트 중에 이런 효과가 필요해서 찾아보고 있었는데 js 작성도 없이 태그 하나만으로 움직이는게 너무 신기하네요!! 좋은 정보 감사합니다

Designed by JB FACTORY