흘러가는글씨 테그 2

1. Marquee 태그란?

윈도우 바탕화면 스크린 세이버에서 볼 수 있는 단어이며, "차양"이라는 뜻입니다. html(hypertext markup language)에서는 어떤 특정 지역을 움직이며, 지나가는 문자열을 marquee라고 합니다. 즉, 웹 문서에서 텍스트를 특정 방향으로 흘러가게 만들 수 있습니다. 단, 이 태그는 인터넷 익스플로러에서만 지원하므로 넷스케이프에서는 결과를 확인할 수 없습니다. <marquee>태그의 속성을 이용해서 텍스트가 흘러갈 방향이나 속도도 조절할 수 있습니다. 간단한 태그만으로 텍스트를 움직일 수 있기 때문에 여러 가지로 응용해서 사용할 수 있습니다. 그러나 너무 많이 사용할 경우 홈페이지가 산만해 질 수 있으므로 필요한 곳에만 사용합니다.

2. 기본형식

<marquee 속성="속성값">텍스트</marquee>

** <marquee>태그의 속성 값을 제외하고 기본형식 <marquee>움직이는 글씨입니다.</marquee>로만 메모장에 작성후 저장합니다. 저장시 파일의 확장자는 .html 또는 htm 으로 합니다.

※ 메모장은 컴퓨터 모니터 하단의 "시작/프로그램/보조프로그램/메모장"을 클릭하시면 됩니다.

저장이 되었으면 저장되어진 경로의 파일명을 더블클릭하면 인터넷 익스플로러가 실행되면서 "움직이는 글씨입니다."란 텍스트가 오른쪽에서 왼쪽으로 흘러갑니다.

3. Marquee 속성

기본 태그 속성 behavior 스크롤 형태를 지정합니다. 사용할 수 있는 값은 "scroll", "alternate"입니다. direction 스크롤 방향을 지정합니다. 사용할 수 있는 값은 "left, right, up, down"입니다. scrolldelay 스크롤 지연속도 지정합니다. 1/1000초 단위로 지정할 수 있습니다. scrollamount 한번에 스크롤되는 픽셀 수를 지정합니다. bgcolor 스크롤 영역의 배경색을 지정합니다. height 스크롤 영역의 높이를 조절합니다. width 스크롤 영역의 폭을 조절합니다. bgcolor 스크롤 되는 영역에 배경색을 지정합니다. loop 스크롤 반복 횟수를 지정합니다. 사용할 수 있는 값은 숫자이거나 "infinite"입니다.

4. 스크롤 형태 지정하기- behavior속성

- scroll; behavior 속성의 기본값으로, direction에서 지정한 방향으로 텍스트가 스크롤 됩니다. - slide;스크롤이 진행되다 한쪽 가장자리에 닿으면 스크롤이 멈추게 됩니다. - alternate;스크롤 범위 양쪽을 왔다 갔다 합니다.

<marquee behavior="scroll">안녕하세요?</marquee> 안녕하세요? <marquee behavior="slide">반갑습니다.</marquee> 반갑습니다. <marquee behavior="alternate">행복하세요.</marquee> 행복하세요.

5. 스크롤 방향 지정하기

- <marquee>태그에서 direction속성을 사용하면 스크롤 방향을 원하는 대로 지정할 수 있습니다. - 사용할 수 있는 값은 left, right, up, down 이다. - direction속성을 따로 지정하지 않으면 기본 방향은 'left'가 됩니다. - 위 아래 방향을 지정할 때 'top'과 'bottom'이 아닌 'up'과 'down'이라는 점을 기억해야 합니다.

<marquee direction="left">왼쪽으로</marquee> 왼쪽으로 <marquee direction="right">오른쪽으로</marquee> 오른쪽으로 <marquee direction="up">위로</marquee> 위로 <marquee direction="down">아래로</marquee> 아래로

- scrolldelay속성은 스크롤 지연 속도이다. 즉, 스크롤을 얼마나 천천히 할 것인지 지정합니다. - 속성값은 1/1000초 단위인데 값이 크면 클수록 스크롤 속도가 느려집니다. - 반면에 scrollamount속성은 한번에 스크롤되는 픽셀수를 지정합니다. - 값이 커지면 커질수록 스크롤 속도가 빨라집니다. - 두 가지 속성 중 하나를 이용하여 스크롤 속도를 조절하면 됩니다.

<marquee scrolldelay="100">scrolldelay = 100 일때</marquee> scrolldelay = 100 일때 <marquee scrolldelay="200">scrolldelay = 200 일때</marquee> scrolldelay = 200 일때 <marquee scrollamount="5">scrollamount=5일때</marquee> scrollamount=5일때 <marquee scrollamount="10">scrollamount=10일때</marquee> scrollamount=10일때

6. 스크롤 영역 지정하기 : bgcolor, width/height속성

텍스트가 흘러가게 하는 것만으로도 강조가 되겟지만 흘러가는 글자에만 배경색을 넣을 수도 있습니다. bgcolor속성을 사용하면 스크롤 되는 영역에 배경색을 지정할 수 있습니다. bgcolor속성에서 사용할 수 있는 값은 색상이름이나 배경색을 지정했다면 그에 맞게 글자색도 바꿔줘야합니다. 또한 width속성과 height속성을 사용하면 스크롤 영역의 크기도 지정할 수 있습니다. width 속성과 height 속성에서 사용할 수 있는 값은 숫자이고 단위는 픽셀입니다.

<marquee bgcolor="green">연두색 배경위에 텍스트가 흘러갑니다.</marquee> 연두색 배경위에 텍스트가 흘러갑니다. <marquee behavior="alternate" width="200" height="50" bgcolor="yellow"> <font face="궁서체" color="red">노란색 글씨가 범위안에서 궁서체의 서체로 좌우로 왔다갔다 한다.<font> </marquee> 노란색 글씨가 범위안에서 궁서체의 서체로 좌우로 왔다갔다 한다.

7. 반복 횟수 지정하기- loop속성

- 따로 반복 횟수를 지정하지 않으면 스크롤은 계속 반복된다. - 하지만 필요에 따라서는 스크롤 반복 횟수를 제한해야 할 경우가 있는데, 이 때 사용하는 것이 loop속성이다. - loop에서 사용할 수 잇는 값은 횟수를 나타내는 숫자이거나 무한 반복을 알려 주는 'infinite'이다.

<marquee bgcolor="green">연두색 배경위에 텍스트가 흘러갑니다.</marquee> 연두색 배경위에 텍스트가 흘러갑니다. <marquee bgcolor="lightblue" scrollamount="2" direction="up" loop="2"> 마음을 다스리는 아름다운 이야기... 혀를 다스릴 수 있는 사람은 마음을 다스릴 수 있다. 마음을 다스릴 수 있는 사람은 행동을 다스릴 수 있다. </marquee> 마음을 다스리는 아름다운 이야기... 혀를 다스릴 수 있는 사람은 마음을 다스릴 수 있다. 마음을 다스릴 수 있는 사람은 행동을 다스릴 수 있다.