Marquee tag 사용하기 [JSP]

01. Marquee tag(마퀴태그) 사용하기

- 일정 범위에 맞춰 글씨를 이동하게 하는 tag

- 아래 작성한 내용은 맨아래 글씨로 작성하였습니다.

marquee tag 연습

• Marquee Test (기본)
• Marquee Test (scrollamount 적용)
• Marquee Test (반동주기)
• Marquee Test (5번만 반복)
• Marquee Test (오른쪽으로 이동)
• Marquee Test (위로 올리기)

02. Marquee tag options (마퀴태그 옵션)

behavior

Sets how the text is scrolled within the marquee. Possible values are scroll, slideand alternate. If no value is specified, the default value is scroll.

bgcolor

Sets the background color through color name or hexadecimal value.

direction

Sets the direction of the scrolling within the marquee. Possible values are left, right, up and down. If no value is specified, the default value is left.

height

Sets the height in pixels or percentage value.

hspace

Sets the horizontal margin

loop

Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

scrollamount

Sets the amount of scrolling at each interval in pixels. The default value is 6.

scrolldelay

Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unlesstruespeed is specified.

truespeed

By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.

vspace

Sets the vertical margin in pixels or percentage value.

width

Sets the width in pixels or percentage value.

옵션 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/marquee

03. 데려가기

  <h2> marquee tag 연습 </h2>

  

  <div style="width:800px; height:200px; border:1px solid black;"> 

  <ul style="background:#f3f3f3;">

<li>

<marquee style="color:red;"> Marquee Test (기본) </marquee>

</li>

<li>

<marquee scrollamount=20 style="color:red;"> Marquee Test (scrollamount적용) </marquee>

</li>

<li>

<marquee behavior="alternate" width=500 style="color:red;"> Marquee Test (반동주기) </marquee>

</li>

<li>

<marquee behavior="slide" loop="5" style="color:red;"> Marquee Test (5번만 반복) </marquee>

</li>

<li>

<marquee direction="right" style="color:red;"> Marquee Test (오른쪽으로 이동) </marquee>

</li>

<li>

<marquee direction="up" height=60 style="color:red;"> Marquee Test (위로 올리기) </marquee>

</li>

</ul>

  </div>