[HTML] 움직이는 태그 만들기(marquee)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test015.html</title>
</head>
<body>

<div>
	<h1>움직이는 태그 실습</h1>
	<hr>
</div>

<div>
	<marquee>기본적인 방향 왼쪽으로 이동</marquee>
	<marquee behavior = "alternate"> 좌우 왕복 이동</marquee>
	<marquee direction = "right">오른쪽으로 이동</marquee>
	<marquee direction = "up"> 위쪽으로 이동</marquee>
	<marquee direction = "down"> 아래쪽으로 이동</marquee>
</div>
<br><br><br>

<div>
	<h2>속도 조절 : scrollamount</h2>
	<marquee behavior="alternate" scrollamount = "1">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount = "100">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrollamount = "50" bgcolor="pink">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
</div>

<div>
	<h2>속도 조절 : scrolldelay</h2>
	<marquee behavior="alternate" scrolldelay = "300" bgcolor="pink">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay = "100" bgcolor="pink">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
	<marquee behavior="alternate" scrolldelay = "10" bgcolor="pink">
		<img alt = "" src = "images/img_04.gif">
	</marquee>
</div>

<div>
	<h2>위아래로 움직이며 옆으로 이동</h2>
	<marquee>
		<marquee direction = "down" behavior = "alternate" height = "100">
			우리 모두 기운냅시다~!!!
		</marquee>
	</marquee>
</div>
</body>
</html>

marquee 태그를 이용해서 움직임 부여하기

image도 움직여보고, text 도 움직여본다.

728x90

저작자표시

'WEB Archive' 카테고리의 다른 글

[HTML] 테이블 열과 행 병합해보기 (0)	2024.08.19
[HTML] 테이블 열과 행 병합해보기 (0)	2024.08.19
[HTML] meta 태그 연습 (0)	2024.08.19
[HTML] input 태그의 속성 살펴보기 (0)	2024.08.19
[HTML] textarea (텍스트 에어리어) 태그 살펴보기 (0)	2024.08.19