지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 움직이는 태그

王林
풀어 주다： 2024-09-04 16:23:04
원래의
1123명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html html5 HTML Tutorial HTML Properties HTML tags
원천：php
이전 기사：HTML의 지도 태그 다음 기사：HTML의 바닥글 태그
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿