본문 바로가기

MARQUEE 태그를 이용하여 웹페이지에 간단하게 움직이는 텍스트를 만들어보자! Web HTML JavaScript

by 모지Lee 2021. 3. 29.
반응형

모지Lee 입니다.


이건 제가 만든 웹페이지 입니다.
https://playzapangi.netlify.app/

 

Play 자판기

심심풀이 테스트가 한 곳에!! 별도의 회원가입 필요없이 그냥 즐기면 OK

playzapangi.netlify.app


웹 코딩을 하다가 전광판처럼 옆으로 움직이는 텍스트를 만들 필요가 생겨서 찾아보다가 MARQUEE Tag를 알게 되어 소개해 드립니다.

텍스트 뿐만 아니라 이미지 또한 옆으로 움직이는 형태의 표현이 가능합니다.

글을 쓰고자 하는 위치에 <MARQUEE> 태그를 입력해주시기만 하면 됩니다.

 

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8" />
	<title>title</title>
	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<span>
		<MARQUEE> 여기에 글을 쓰시면 움직여요. </MARQUEE>
	</span>
</body>
</html>
반응형
Attribute  Value Description
behavior scroll
slide
alternate
스크롤 타입
bgcolor rgb(x,x,x)
#xxxxxx
colorname
배경색상
direction up
down
left
right
스크롤 방향
height pixels
%
높이
hspace pixels 수평 여백
loop number 스크롤 반복 횟수. 기본 값은 무한
scrollamount number 스크롤 되는 간격. 기본 값은 6
scrolldelay seconds 스크롤 사이의 지연 시간. 기본 값은 85. 60보다 작으면 무시
truespeed seconds 스크롤을 60 미만으로 지연시킬 때 사용
vspace pixels 수직 여백
width pixels
%
가로

< 출처 : w3docs.com >

 

1. 기본

무~~~~야~~~~~호~~~~~~~~

 

2. behavior="scroll"

무~~~~야~~~~~호~~~~~~~~

 

3. bgcolor="#2B65A8"

무~~~~야~~~~~호~~~~~~~~

 

4. direction="down"

무~~~~야~~~~~호~~~~~~~~

 

5. width="100" height="80"

무~~~~야~~~~~호~~~~~~~~

 

6. hspace="20" vspace="20"

무~~~~야~~~~~호~~~~~~~~

 

7. loop="3"

무~~~~야~~~~~호~~~~~~~~

 

8. scrollamount="10"

무~~~~야~~~~~호~~~~~~~~

 

9. scrolldelay="1000"

무~~~~야~~~~~호~~~~~~~~

 

10. truespeed="50"

무~~~~야~~~~~호~~~~~~~~

 

 

그럼 뿅~~~

반응형

댓글