이 섹션에서 저자는 HTML 코드의보다 특수한 태그에 대해 이야기합니다. 이는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어 할 수 있습니다.
스크롤 텍스트를 만듭니다
이 장의 이전 연구를 통해 독자들은 이미 다양한 단락 텍스트의 표시를 잘 제어 할 수 있지만, 어떻게 설정되었는지에 관계없이 텍스트는 정적입니다. 이 섹션에서 저자는 HTML 코드의보다 특수한 태그에 대해 이야기합니다. 이는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어 할 수 있습니다.
4.3.1 텍스트 스크롤을 설정합니다HTML 기술에서 텍스트를 스크롤하는 방법은 이중 태그 <marquee> </marquee>를 사용하는 것입니다. HTML 코드에서는 기능 영역의 텍스트를 스크롤 할 수 있으며 기본값은 오른쪽에서 왼쪽으로 스크롤하는 것입니다. d :/ web/ directory에서 mar.htm이라는 웹 페이지 파일을 만들고 코드 4.15에 표시된대로 코드를 작성하십시오.
코드 4.15 텍스트 스크롤 설정 : mar.htm
<html>
<헤드>
텍스트 스크롤링의 <title> 설정 </title>
</head>
<body>
<font size = 5 color =#cc0000>
텍스트 스크롤링 예제 (기본값) : <marquee>는 사람이되기 위해 친절합니다 </marquee>
</font>
</body>
</html>
브라우저 주소 표시 줄에 http : //localhost/mar.htm을 입력하면 브라우징 효과가 그림 4.15에 나와 있습니다.
그림 4.15 텍스트 스크롤의 기본 형식을 설정하십시오
그림 4.15에서 너비가 설정되지 않으면 <marquee> </marquee> 태그는 한 줄에만 해당됩니다.
4.3.2 텍스트 스크롤 방향을 설정하십시오<marquee> </marquee> 태그의 방향 속성은 컨텐츠 스크롤 방향을 설정하는 데 사용됩니다. 속성 값에는 각각 왼쪽, 오른쪽, 위쪽 및 아래쪽이 포함되며, 여기에는 각각 왼쪽, 오른쪽, 위, 아래를 나타냅니다. 예를 들어 다음 코드 :
<marquee direction = 왼쪽> 사람이되기 위해 친절하십시오 </marquee>
<marquee direction = right> 사람이되기 위해 친절하십시오 </marquee>
<marquee direction = up> 사람이되기 위해 친절하십시오 </marquee>
<marquee direction = down>은 사람이되기에 친절하십시오 </marquee>
4.3.3 텍스트 스크롤의 속도와 형태를 설정하십시오<marquee> </marquee> 태그를 사용하도록 텍스트 스크롤을 설정하면 속성이 다음과 같이 설명됩니다.
- <marquee> </marquee> 태그의 ScrollAmount 속성은 컨텐츠 스크롤 속도를 설정하는 데 사용됩니다.
- <marquee> </marquee> 태그의 동작 속성은 컨텐츠 스크롤 방법을 설정하는 데 사용됩니다. 기본값은 스크롤링, 즉 루핑입니다. 값이 번갈아 가면 컨텐츠가 앞뒤로 루프됩니다. 값이 슬라이드되면 컨텐츠는 한 번 스크롤을 중지하고 루프되지 않습니다. 스크롤 사이클 수를 설정하는 루프 속성도 있습니다.
- <marquee> </marquee> 태그의 ScrollDelay 속성은 컨텐츠 스크롤의 시간 간격을 설정하는 데 사용됩니다.
- <marquee> </marquee> 태그의 bgcolor 속성은 컨텐츠 스크롤 배경색 (신체의 배경색 설정과 유사)을 설정하는 데 사용됩니다.
- <marquee> </marquee> 태그의 너비 속성은 컨텐츠 스크롤 배경 너비를 설정하는 데 사용됩니다.
- <marquee> </marquee> 태그의 높이 속성은 컨텐츠 스크롤 배경 높이를 설정하는 데 사용됩니다.
Mar.htm 웹 페이지 파일을 수정하고 코드 4.16에 표시된대로 코드를 작성하십시오.
코드 4.16 텍스트 스크롤 설정 : mar.htm
<html>
<헤드>
텍스트 스크롤링의 <title> 설정 </title>
</head>
<body>
<font size = 3 color =#cc0000>
텍스트 스크롤링 예제 (기본값) : <marquee>는 사람이되기 위해 친절합니다 </marquee>
텍스트 스크롤링 예제 (오른쪽) : <marquee direction = 오른쪽 scrolldelay = 500> 사람이되기에 친절하십시오 </marquee>
텍스트 스크롤의 예 (아래쪽, 스크롤 방법은 슬라이드, 속도는 10) : <marquee scrollamount = 10 동작 = 슬라이드> 사람이되도록 친절하십시오 </marquee>
텍스트 스크롤의 예 (기본 방향, 스크롤 방법은 대체, 루프 3 번, 속도는 2) : <marquee scrollamount = 2 동작 = 대체 루프 = 3> 사람이되도록 친절하십시오 </marquee>
텍스트 스크롤링 예제 (위쪽, 배경색은 #ccff66, 배경 너비와 높이 설정) : <marquee direction = up bgcolor = #ccff66 너비 = 250 높이 = 55> 사람이되도록 친절하십시오 </marquee>
</font>
</body>
</html>
브라우저 주소 표시 줄에 http : //localhost/mar.htm을 입력하면 브라우징 효과가 그림 4.16에 나와 있습니다.
그림 4.16 다양한 형태의 텍스트 스크롤
<marquee> </marquee>의 수많은 속성은 스크롤 텍스트를 만드는 데 매우 편리 할 수 있습니다. 후속 JavaScript 학습에서 독자들은 <marquee> </marquee> 태그의 역동적 인 행동 학습을 계속 심화시킬 것입니다.