HTML에서 텍스트 이동

HTML에서 텍스트를 이동하는 것도 텍스트 스크롤이라고 합니다. 특정 속도의 시간 간격으로 텍스트를 모든 방향으로 스크롤할 수 있습니다. 태그는 다음 동작을 수행하는 데 사용됩니다. 텍스트를 스크롤하는 방향은 왼쪽 방향, 오른쪽 방향, 위쪽 방향, 아래쪽 방향 등 4가지가 있습니다. 동작 속성을 설정하여 닫힌 영역 내에서 텍스트를 이동합니다.

실시간 예: 웹사이트에 중요한 콘텐츠가 자주 업데이트된다고 가정해 보겠습니다. 해당 콘텐츠가 항상 안정적이라면 사용자는 콘텐츠에 집중할 수 없기 때문에 사용자의 관심을 끌기 위해서는 항상 업데이트된 콘텐츠를 스크롤해야 합니다. 사용자 요구 사항에 따라 콘텐츠가 스크롤되는 방향을 지정할 수 있습니다. 이 요구사항을 충족하세요 태그가 사용되었습니다.

HTML에서 CSS를 사용하는 이유는 무엇인가요?

모든 페이지 간에 공통 로직을 제공합니다. 각 HTML 페이지에 동일한 스타일 로직을 작성하는 대신 공통 로직을 작성하기 위해 CSS 파일을 사용합니다. 그리고 를 사용하여 각 HTML 페이지에 이 CSS 페이지를 포함합니다. 태그.

HTML에서 Marquee 태그는 어떻게 작동하나요?

를 적용하여 콘텐츠를 이동할 수 있습니다. marquee 태그 내에 방향 속성을 설정하면 방향에 따라 속성 값의 내용이 이동하게 됩니다.

구문 #1

<marquee>
//some text to move
</marquee>

구문 #2

<marquee direction="”left" or right up 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

기본 선택 윤곽 태그

코드:

<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

출력:

설명: 위 텍스트에서 볼 수 있듯이 방향을 언급하지 않았음에도 오른쪽에서 왼쪽으로 이동되었으므로 기본 선택 윤곽 태그입니다.

예시 #2

마퀴 태그를 올바른 방향으로 지정하세요.

코드:

<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

출력:

설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 오른쪽으로 설정하여 왼쪽에서 오른쪽으로 이동했습니다.

예시 #3

상단 방향의 마키

코드:

<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

출력:

설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 위로 설정하여 아래에서 위로 이동했습니다.

예시 #4

하단 방향으로 움직이는 마키.

코드:

<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">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>

출력:

설명: 위 텍스트에서 볼 수 있듯이 방향 속성을 아래로 설정하여 위에서 아래로 이동했습니다.

예시 #5

행동 속성이 있는 마키.

코드:

<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>

출력:

설명: 위 텍스트에서 볼 수 있듯이 동작 속성을 교대로 설정하여 테두리를 터치하면 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 이동합니다.

예시 #6

스크롤 양 속성이 있는 마퀴

코드:

<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>


<h1 id="Moving-Text-with-Marquee-Tag">Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>

출력:

설명: 위의 텍스트에서 볼 수 있듯이 오른쪽에서 왼쪽으로 다른 타이밍으로 이동했기 때문에 모두 다른 위치에 있습니다.

결론

marquee 태그를 사용하여 HTML에서 텍스트를 이동합니다. 요구 사항에 따라 텍스트를 왼쪽, 오른쪽, 위, 아래로 이동할 수 있습니다. 이 주요 기능은 사용자의 관심을 끌기 위해 정기적인 업데이트를 위해 TV 채널에서 주로 사용됩니다.

위 내용은 HTML에서 텍스트 이동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!