MARQUEE 태그 > 기술자료

• 목록

▣ 정의
텍스트가 어떤 방향으로 흘러가는 것을 표현합니다.

▣ 예제
<marquee align="left">표현하고자 하는 글자를 입력합니다.</marquee>

▣ 속성
• align="값" (값 = left / right / center / justify)
    : 흘러 가는 텍스트 영역 밖에 있는 본문의 정렬 상태를 설정합니다.
• behavior="값" (값 = scroll / slide / alternate)
    : 흘러가는 텍스트의 형식을 지정하며, scroll은 텍스트가 흘러가다 사라지고, slide는 흘러가다 마지막에 멈추며, alternate는 양쪽 방향으로 왕복합니다.
• bgcolor="색이름 / SRRGB"
    : 흘러가는 텍스트의 배경색을 지정 합니다.
• datasrc="소스 파일 이름"
    : 홈페이지에 연결될 표 데이터의 위치를 설정.
• datafild="열이름"
    : datasrc에서 지정한 데이터 소스의 표에서 열을 선택
• dataformatas="mime 형식"
    : datasrc에서 지정한 데이터 소스의 표 데이터에서 항목 지정 방식을 선택.html, text, none의 세가지가 있습니다.
• direction="값" (값 = left / right / up)
    : 텍스트의 흘러가는 방향을 지정합니다.
• height="픽셀(높이)"
    : 흘러가는 텍스트의 높이를 지정합니다.
• hspace="픽셀(좌우 여백)"
    : 흘러가는 텍스트의 좌우 여백을 지정합니다.
• id="id 이름"
    : class와 동일한 기능. 다만 id는 한 번만 사용할 수 있습니다.
• style="스타일 시트 입력"
    : 적용될 스타일 시트를 지정
• title="제목"
    : 해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시.
• loop="값" (값 = 횟수 / infinite)
    : 반복 횟수를 지정하며, 기본적으로 infinite로 무한 반복합니다.
• scrollamount="숫자"
    : 흘러가는 속도를 지정하며, 입력 값이 높을수록 속도가 빨라 집니다.
• scrolldelay="숫자"
    : 흘러가는 텍스트가 다시 나타나는 간격을 설정하며, 입력 값은 mm단위이며, 입력 값이 낮을 수록 빨라집니다.
• vspace="픽셀"
    : 흘러가는 텍스트의 수직 간격을 지정합니다.




특정 브라우저에서만 지원되는 태그를 사용하는 것은 추천하고 싶지는 않으나, 써야 한다면 그와 유사 한 기능을 Javascript로 구성하여 제공하는 것이 좋다. 예를 들어, 글자를 흐르게 하는 IE에서만 사용 되는 <marquee> 태그를 지원하기 위해서는 다음과 같이 한다.

<script type="text/javascript">
var msg = "이 텍스트가 MARQUEE태그 처럼 스크롤 합니다. ";

function JsMarquee(id){
  if(document.getElementById){ // IE5, Mozilla
    var msgarea = document.getElementById(id);
    if (msgarea.firstChild && msgarea.firstChild.nodeName == "#text") {
      msgarea.firstChild.nodeValue = msg;
    } else if (document.all) {
      msgarea.innerHTML = msg;
    }
  } else if(document.all) { // IE4
    msgarea.innerHTML = msg;
  } else if(document.layers){ //NN4
    msg2=msg.substring(0,40);
    document.layers[id].visibility="hidden";
    document.layers[id].document.open();
    document.layers[id].document.write(msg2);
    document.layers[id].document.close();
    document.layers[id].visibility="show";
  }
  msg=msg.substring(2,msg.length)+msg.substring(0,2);
  var cmd = "JsMarquee("" + id + "")";
  setTimeout(cmd,500);
}
</script>


자료출처
http://www.mozilla.or.kr/ko/docs/web-developer/standard/content3.html#3.1