HTML의 <marquee> 태그는 웹 페이지에서 텍스트나 이미지를 세로 또는 가로 방향으로 흐르게(스크롤) 만드는 요소입니다. 대표적인 활용 예로는 속보 뉴스, 인기 기사 목록 등이 있으며, 이러한 콘텐츠는 보통 화면을 좌에서 우로 흐르는 형태로 표시됩니다.
참고: <marquee> 태그는 HTML5에서 더 이상 지원되지 않는(deprecated) 요소입니다. 최신 웹 표준에서는 CSS 애니메이션이나 JavaScript를 사용해 동일한 스크롤 효과를 구현하는 것이 권장됩니다.
marquee 태그의 주요 속성
<marquee> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| behavior | scroll slide alternate | 스크롤 방식을 지정합니다. scroll은 반복 스크롤, slide는 한 번 스크롤 후 정지, alternate는 양방향 왕복 운동입니다. |
| bgcolor | rgb(x,x,x) #xxxxxx 색상 이름 | 지원 중단 — marquee 영역의 배경색을 지정합니다. |
| direction | up down left right | 콘텐츠가 흐르는 방향을 지정합니다. |
| height | 픽셀 또는 % | marquee 영역의 높이를 지정합니다. |
| hspace | 픽셀 | marquee 주변의 가로 여백을 지정합니다. |
| loop | 숫자 | 반복 횟수를 지정합니다. 기본값은 INFINITE로, 무한히 반복됩니다. |
| scrolldelay | 초 단위 시간 | 각 스크롤 단계 사이의 지연 시간을 지정합니다. |
| scrollamount | 숫자 | 한 번에 이동하는 거리(픽셀)를 지정합니다. |
| width | 픽셀 또는 % | marquee 영역의 너비를 지정합니다. |
| vspace | 픽셀 | marquee 주변의 세로 여백을 지정합니다. |
marquee 태그 사용 예제
이제 HTML에서 <marquee> 요소를 실제로 구현하는 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <head> <title>HTML</title> </head> <body> <h1>데모 제목</h1> <p>이것은 데모 텍스트입니다.</p> <marquee direction = "right">움직이는 텍스트입니다.</marquee> </body> </html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 텍스트가 화면 위에서 움직이는 것을 확인할 수 있습니다.
direction 속성이 "right"로 설정되었기 때문에, 텍스트는 왼쪽에서 오른쪽으로 이동합니다.
