MARQUEE 태그 > 기술자료 | 해피정닷컴

MARQUEE 태그 > 기술자료

본문 바로가기

사이트 내 전체검색

MARQUEE 태그 > 기술자료

HTML 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

댓글목록

등록된 댓글이 없습니다.


Total 200건 10 페이지
  • RSS
기술자료 목록
20
HTML   16788  2007-03-03 18:58 ~ 2016-11-18 00:00  
19
HTML   13677  2007-01-14 22:03  
18
HTML   20585  2006-10-16 17:54 ~ 2014-09-24 00:00  
17
HTML   42524  2006-09-07 17:19  
16
HTML   14833  2006-08-04 23:39 ~ 2007-07-17 00:00  
15
HTML   16579  2006-07-17 19:05  
14
HTML   23295  2006-07-06 18:45 ~ 2010-11-01 00:00  
13
HTML   14562  2006-06-27 03:40 ~ 2013-05-12 00:00  
12
HTML   11281  2006-06-08 00:23  
11
HTML   19480  2006-06-05 17:33  
10
HTML   30197  2006-06-03 19:45 ~ 2015-09-19 00:00  
9
HTML   23852  2006-05-29 16:39  
8
HTML   22078  2006-05-19 19:19 ~ 2021-12-02 16:32  
7
HTML   23441  2006-03-04 14:54 ~ 2020-10-11 18:21  
열람
HTML   15431  2006-03-02 21:35 ~ 2008-01-28 00:00  
5
HTML   16426  2006-02-11 11:18 ~ 2017-03-29 00:00  
4
HTML   19824  2005-12-27 18:34 ~ 2015-08-05 00:00  
3
HTML   17659  2004-05-12 20:10  
2
HTML   26156  2004-05-12 19:05  
1
HTML   19332  2004-05-12 18:53  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.