[HTML] marquee와 그 속성 - <marquee></marquee>

   <marquee></marquee> 태그

 

html 태그 공부 중 가장 관심 많은 태그가 아닌가 생각된다. 간단한 작업으로도 눈에 확 띄는 태그라서 그런가 싶다.

 

<marquee></marquee> 태그는 많이 보았다싶이 텍스트를 좌우상하로 움직이는 태그이다. 그러면 좀 더 자세한 사용법을 알아본다. (여기서 텍스트의 이동을 스크롤이라고 표현하겠다.)

 

 

1. width 

2. height 

3. scrolldelay

4. scrollmount

5. bgcolor

6. behavior

7. direction

8. loop

 

 

 

 

  width : 스크롤 영역의 가로 넓이를 설정한다. (단위 : px) 

 

<marquee width="100px">marqee width="100px" 입니다.</marquee>

marqee width="100px" 입니다.

 

<marquee width="200px">marqee width="200px" 입니다.</marquee>

marqee width="200px" 입니다.

 

<marquee width="500px">marqee width="500px" 입니다.</marquee>

marqee width="500px" 입니다.

 

 

 

  height : 스크롤 영역의 세로 높이를 설정한다. (단위 : px)

 

<marquee height="10px">marqee height="10px" 입니다.</marquee>

marqee height="10px" 입니다.

 

<marquee height="100px">marqee height="100px" 입니다.</marquee>

marqee height="100px" 입니다.

 

<marquee height="200px">marqee height="200px"입니다.</marquee>

marqee height="200px"입니다.

 

 

 

 

  scrolldelay : 스크롤 이동 속도를 설정한다. (단위 : 1/1000초)

 

<marquee scrolldelay="10">marqee scrolldelay="10" 입니다.</marquee>

marqee scrolldelay="10" 입니다.

 

<marquee scrolldelay="100">marqee scrolldelay="100" 입니다.</marquee>

marqee scrolldelay="100" 입니다.

 

<marquee scrolldelay="1000">marqee scrolldelay="1000" 입니다.</marquee>

marqee scrolldelay="1000" 입니다.

 

 

 

  scrollmount : 스크롤의 픽셀 수를 설정한다. 

 

<marquee scrollmount="10">marqee scrollmount="10" 입니다.</marquee>

marqee scrollmount="10" 입니다.

 

<marquee scrollmount="100">marqee scrollmount="100" 입니다.</marquee>

marqee scrollmount="100" 입니다.

 

<marquee scrollmount="1000">marqee scrollmount="1000" 입니다.</marquee>

marqee scrollmount="1000" 입니다.

 

 

 

 

  bgcolor : 스크롤 영역의 배경 색상을 설정한다.

 

<marquee bgcolor="#FF0000">marqee bgcolor="#FF0000" 입니다.</marquee>

marqee bgcolor="#FF0000" 입니다.

 

<marquee bgcolor="#FF00FF">marqee bgcolor="#FF00FF" 입니다.</marquee>

marqee bgcolor="#FF00FF" 입니다.

 

 

 

 

  behavior : 스크롤 방식을 설정한다. - scroll, slide, alternate 값이 있다.

 

<marquee behavior="scroll">marqee behavior="scroll" 입니다.</marquee>

marqee behavior="scroll" 입니다.

 

<marquee behavior="slide">marqee behavior="slide" 입니다.</marquee>

marqee behavior="slide" 입니다.

 

<marquee behavior="alternate">marqee behavior="alternate"입니다.</marquee>

marqee behavior="alternate"입니다.

 

 

 

 

  direction : 스크롤 방향을 설정한다. - left, right, up, down 값이 있다. 기본값은 "left" 이다.

 

<marquee direction="left">marqee direction="left" 입니다.</marquee>

marqee direction="left" 입니다.

 

<marquee direction="right">marqee direction="right" 입니다.</marquee>

marqee direction="right" 입니다.

 

<marquee direction="up">marqee direction="up" 입니다.</marquee>

marqee direction="up" 입니다.

 

<marquee direction="down">marqee direction="down" 입니다.</marquee>

marqee direction="down" 입니다.

 

 

 

 

  loop : 스크롤의 반복 횟수를 설정한다. - 기본값은 "무한 반복"이다.

 

<marquee loop="1">marqee loop="1" 입니다.</marquee>

marqee loop="1" 입니다.

 

<marquee loop="2">marqee loop="2" 입니다.</marquee>

marqee loop="2" 입니다.

 

<marquee loop="3">marqee loop="3" 입니다.</marquee>

marqee loop="3" 입니다.