HTML에서 텍스트를 이동하는 것도 텍스트 스크롤이라고 합니다. 특정 속도의 시간 간격으로 텍스트를 모든 방향으로 스크롤할 수 있습니다. <천막> 태그는 다음 동작을 수행하는 데 사용됩니다. 텍스트를 스크롤하는 방향은 왼쪽 방향, 오른쪽 방향, 위쪽 방향, 아래쪽 방향 등 4가지가 있습니다. 동작 속성을 설정하여 닫힌 영역 내에서 텍스트를 이동합니다.
실시간 예: 웹사이트에 중요한 콘텐츠가 자주 업데이트된다고 가정해 보겠습니다. 해당 콘텐츠가 항상 안정적이라면 사용자는 콘텐츠에 집중할 수 없기 때문에 사용자의 관심을 끌기 위해서는 항상 업데이트된 콘텐츠를 스크롤해야 합니다. 사용자 요구 사항에 따라 콘텐츠가 스크롤되는 방향을 지정할 수 있습니다. 이 요구사항을 충족하세요
HTML에서 CSS를 사용하는 이유는 무엇인가요?
모든 페이지 간에 공통 로직을 제공합니다. 각 HTML 페이지에 동일한 스타일 로직을 작성하는 대신 공통 로직을 작성하기 위해 CSS 파일을 사용합니다. 그리고 를 사용하여 각 HTML 페이지에 이 CSS 페이지를 포함합니다. 태그.
HTML에서 Marquee 태그는 어떻게 작동하나요?
구문 #1
<marquee>
//some text to move
</marquee>
로그인 후 복사
구문 #2
<marquee direction=”left or right or up or down”>
//some text to move
</marquee>
로그인 후 복사
구문 #3
<marquee behavior="alternate"> //it makes the text back direction by touching the border of the page.
//some text to move
</marquee>
로그인 후 복사
구문 #4
<marquee direction=”left” scrollamount="5">// scrollamount used to set the scrolling text speed
//some text to move
</marquee>
로그인 후 복사
참고: 방향 속성을 제공하지 않은 경우 기본 선택 윤곽 방향은 그대로 두는 것이 옳습니다.
HTML에서 움직이는 텍스트를 구현하는 예
다음은 언급된 예시입니다.
예시 #1
기본 선택 윤곽 태그
코드:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee>
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
로그인 후 복사
출력:
설명: 위 텍스트에서 볼 수 있듯이 방향을 언급하지 않았음에도 오른쪽에서 왼쪽으로 이동되었으므로 기본 선택 윤곽 태그입니다.
예시 #2
마퀴 태그를 올바른 방향으로 지정하세요.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
로그인 후 복사
출력:
설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 오른쪽으로 설정하여 왼쪽에서 오른쪽으로 이동했습니다.
예시 #3
상단 방향의 마키
코드:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="up">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
로그인 후 복사
출력:
설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 위로 설정하여 아래에서 위로 이동했습니다.
예시 #4
하단 방향으로 움직이는 마키.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="down">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
로그인 후 복사
출력:
설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 아래로 설정하여 위에서 아래로 이동했습니다.
예시 #5
행동 속성이 있는 마키.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>
</body>
</html>
로그인 후 복사
출력:
설명: 위 텍스트에서 볼 수 있듯이 동작 속성을 교대로 설정하여 테두리를 터치하면 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 이동합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
