Marquee Element
Home > Document > HTML > Lecture On Demand > Marquee element (IE only)

Marquee Element

Marquee 는 W3C의 HTML4.01 spec 에는 없는 Element 입니다. MS에서 만든 Element로서 당연한 말이지만 IE에서만 지원되는 Element 죠. 저도 처음에 이 Marquee라는 걸 알고 어찌나 신기하든지...^^ 뭐든 그렇지만 쩜 쓰다보면 시들해 지더군요. 하여간 Marquee에 대해 궁금해 하는 분들이 많은 것 같아서 L.O.D(Lecture On Demand) 1탄으로 실어 봅니다. 게시판에 실으려고 했는데 문서들 간의 연관성이 있는 Link를 연결하려고 그냥 웹 문서로 꾸몄습니다. 나중에 정리해서 Web design 메뉴로 옮기겠습니다...^^

Marquee element
Behavior
Behavior는 Marquee가 scroll되는 방식을 지정합니다.
scroll Default. 기본 값으로서 behavior 속성을 지정하지 않으면 오른 쪽에서 왼쪽으로 스크롤 됩니다.
<marquee>scroll</marquee>
scroll
slide scroll 처럼 오른쪽에서 왼쪽으로 움직이지만 1번 움직이고 왼쪽에서 멈추게 됩니다.
<marquee behavior="slide">scroll</marquee>
slide
alternate alternate는 지정한 방향 끝까지 가면 방향을 반대로 바꾸어 scroll합니다.
<marquee behavior="alternate">alternate</marquee>
alternate
direction
direction 은 marquee가 움직이는 방향을 지정합니다.
left Default. 오른쪽에서 왼쪽으로
right 왼쪽에서 오른 쪽으로
up 아래에서 위로
down 위에서 아래로
width, height
width는 marquee의 가로 폭을, height는 높이를 지정합니다.
width 기본 값은 100%, 길이 단위 참조.
height direction이 up, down일 경우 기본값 200pixel, left나 right일 경우 내용물의 크기에 따라 조절됨. 길이 단위 참조.
hspace, vspace
기본값 0, hspace와 vspace는 각각 좌우 여백과 상하 여백을 지정합니다.
hspace 기본 값은 0, 좌우에 여백이 생기게 되면 marquee 자체의 면적은 좁아 집니다. 길이 단위 참조.
vspace 상하의 여백을 지정합니다. 길이 단위 참조.
scrollamount
기본값 6pixel. 아래의 scrolldelay속성에 지정되는 시간 당� marquee가 이동하는 pixel size를 지정합니다. 따라서 숫자가 클 수록 빠르게 움직입니다.
5 scrollamount="5"
10 scrollamount="10"
50 scrollamount="50"
scrolldelay
기본값 85milisecond. 위의 scrollamount 속성에 의해 지정된 pixel size를 이동하는 시간을 지정합니다. scrollamount와 반대로 숫자가 클 수록 천천히 움직입니다. 단위는 1/1000 초
50 scrolldelay="50"
100 scrolldelay="100"
1000 scrolldelay="1000"
loop
behavior가 slide를 제외한 scroll이나 alternate일 경우 반복되는 회수를 지정합니다. 기본값은 -1(무한 반복)
scroll loop="3"
alternate loop="3"
bgcolor Marquee의 배경색을 지정합니다. Color 참조.
공통 속성 공통 속성표 참고


Image Marquee

<marquee> ... </marquee> 속에 IMG Tag이 들어가면 되겠습니다. 즉,

<marquee><img /></marquee>

와 같이 사용한다는 거져...

입력 
<body>
    <marquee>
        <img src="../html/images/AA50.jpg" width="66" height="66" alt="AA50 (8K)" />
    </marquee>
</body>
코드 실행 하기


Marquee 정렬하기

Marquee의 정렬이란 <marquee> ... </marquee> 속에 들어가는 글자나 이미지의 수평 정렬을 말하는데, Marquee가 수직으로 scroll 할 때 사용하게 됩니다. 수평 scroll 할 때는 의미가 없겠져?...

입력 
<body>
<div align="center"> <!-- 문서창에서의 marquee 면적의 중앙 정렬 -->
    <marquee width="200" height="300" bgcolor="gold" direction="up">
        <div align="center"> <!-- Marquee 면적 속에서의 중앙 정렬 -->
            <img src="../html/images/AA50.jpg" />
        </div>
    </marquee>
</div>
</body>
코드 실행 하기


stop(), start() Method

stop, start Method는 MS에서 순전히 marquee를 control 하기 위해 만든 Method로서 onmouseover 등의 mouse event와 함께 사용합니다. 물론 IE 전용입니다. 새로운 공지나 Update들의 Link를 marquee로 scroll 할 때 멈추지 않으면 클릭하기가 좀 불편하겠죠.

Scripting
onMouseOver="MARQUEE.stop()"
onMouseOut="MARQUEE.start()"
입력 
<html>
    <head>
        <title>stop(), start() Methods</title>
    <style type="text/css">
    <!-- 
    .sample{
    background-color:#c0c0c0;
    padding:10px;
    color:#ffffff;
    width:200px; 
    height:200px;} 
    -->
    </style>
    </head>
    <body>
        <div align="center">
            <marquee class="sample" onmouseover="this.stop();"
            onmouseout="this.start();" direction="down">
            <a href="http://www.cadvance.org/">creative Web design</a><br />
            <a href="http://www.naver.com">naver</a><br />
            <a href="http://kr.yahoo.com">yahoo Korea</a>
            </marquee>    
        </div>
    </body>
</html>
코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색