찾다

집  >  기사  >  웹 프론트엔드  >  HTML 움직이는 태그

HTML 움직이는 태그

王林
王林원래의
2024-09-04 16:23:041118검색

HTML의 Marquee 태그는 웹 페이지의 텍스트나 이미지 위에 스크롤을 만드는 데 사용됩니다. 이를 통해 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 위에서 아래, 아래에서 위로와 같은 모든 유형의 스크롤이 가능합니다. HTML에서 이 태그의 구문은 이것은 텍스트를 스크롤하는 것입니다...< /marquee> 여기서 'marquee' 태그는 필요한 스크롤의 속성을 설명하는 데 사용됩니다. 일반적으로 사용되는 몇 가지 다른 선택 윤곽 속성으로는 동작, hspace, scrollamount, scrolldelay, truespeed, vspace 등이 있습니다.

구문:

요소. 구문은 아래와 같이 작성할 수 있습니다.

<html>
<body>
<marquee direction="up" height="150" width="250" bgcolor="white">This is scrolling of the text...</marquee>
</body>
</html>

HTML 마키 태그 속성

다음은 에서 지원되는 속성입니다. 태그.

  1. 동작: 대체, 스크롤, 슬라이드 등 값 중 하나일 수 있는 텍스트를 스크롤하는 동작
  2. bgcolor: 배경색을 지정합니다.
  3. 방향: 왼쪽, 오른쪽, 위, 아래 값으로 텍스트를 스크롤하는 방향을 지정합니다. 기본 방향 값이 남아있습니다.
  4. 높이: 선택 윤곽의 높이를 정의합니다.
  5. hspace: 이 속성은 선택 윤곽 요소 주위에 수평 공간을 제공합니다.
  6. loop: 텍스트를 스크롤할 수 있는 횟수를 정의합니다. 기본값이 -1이면 선택 윤곽이 계속 반복됩니다.
  7. scrollamount: 각 간격의 스크롤 양을 지정합니다. 스크롤 양이 정의되지 않은 경우 기본값은 6입니다.
  8. scrolldelay: 밀리초 단위로 스크롤 지연을 제공합니다. 스크롤 양이 정의되지 않은 경우 기본값은 6입니다.
  9. truespeed: 스크롤 지연 값 60을 나타내는 데 사용됩니다.
  10. vspace: 이 속성은 선택 윤곽 요소 주위에 수직 공간을 제공합니다.
  11. 너비: 선택 윤곽의 너비를 정의합니다.

HTML 마키 태그 예시

다음은 아래에 설명된 HTML 움직이는 태그의 예입니다.

예 #1 – 마퀴 왼쪽

이 유형의 선택 윤곽은 콘텐츠를 왼쪽에서 이동하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Left Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "left" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

  • 위 코드를 확장자가 .html인 파일로 저장하세요
  • 브라우저에서 HTML 파일을 실행하면 아래 이미지와 같은 결과가 나타납니다

HTML 움직이는 태그

예 #2 – 마키 오른쪽

이 유형의 선택 윤곽은 콘텐츠를 오른쪽으로 이동하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Right Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "right" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

HTML 움직이는 태그

예 #3 – 마키 업

이런 유형의 선택 윤곽은 콘텐츠를 위쪽으로 이동하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Up Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "up" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

HTML 움직이는 태그

예 #4 – 마퀴 다운

이런 유형의 선택 윤곽은 콘텐츠를 아래쪽으로 이동하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Down Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

HTML 움직이는 태그

예 #5 – 중첩된 선택 윤곽

이 유형의 선택 윤곽은 콘텐츠를 중첩하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee behavior="alternate"><div class="txt">Welcome to EDUCBA...</div></marquee>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

HTML 움직이는 태그

예시 #6 – Marquee 속도 비교

scrolldelay 속성을 사용하여 marquee 요소의 속도를 지정할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee scrolldelay="80" scrollamount="7">Welcome to EDUCBA...(normal speed)</marquee>
<marquee scrolldelay="60" scrollamount="12" truespeed>Welcome to EDUCBA...(This is very speed)</marquee>
<marquee scrolldelay="250" scrollamount="4">Welcome to EDUCBA...(This is very slow)</marquee>
</marquee>
</body>
</html>

출력:

HTML 움직이는 태그

예 #7 – 마크 배경 색상 및 공간

이 유형의 선택 윤곽은 선택 윤곽 요소의 배경색과 공간을 설정하는 데 사용할 수 있습니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1"  bgcolor="#d9d9ff" hspace="50" vspace="20">
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

출력:

HTML 움직이는 태그

결론

지금까지 우리는 marquee 태그를 사용하여 웹페이지에서 스크롤 텍스트를 만드는 방법을 연구했습니다. 사용자는 웹사이트에서 쉽게 가로 또는 세로로 스크롤되는 텍스트를 쉽게 만들 수 있습니다. 이 요소는 더 이상 사용되지 않으며 더 이상 사용되지 않습니다. 스크롤 효과를 내기 위해서는 CSS나 JavaScript를 사용하게 됩니다.

위 내용은 HTML 움직이는 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html if for using Attribute default this background
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 지도 태그다음 기사：HTML의 지도 태그

관련 기사

더보기