글
marquee태그 움직이는 글자
HTML
2011. 7. 4. 19:32
안녕하세요? 오늘은 글자를 움직이게 하는 MARQUEE태그에 대해 배워보겠습니다. 웹사이트를 방문하다보면 글자가 왼쪽에서 오른쪽으로 움직이면서 지나가는 것을 보신 적이 있으실 것입니다. 그것을 한번 구현해 보도록 하겠습니다.
예제를 한번 보도록 하지요.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>오른쪽에서 왼쪽으로 움직입니다.</marquee>
</body>
</html>
실행하면 글자가 오른쪽에서 왼쪽으로 움직입니다.
글자가 오른쪽에서 왼쪽으로 움직이는 것을 보실 수 있습니다.
마퀴태그의 속성을 배워보도록 하겠습니다. 마퀴태그에는 여러가지 속성이 있는데 그 중에 먼저 behavior속성입니다. 뜻이 행동,움직임 이런 뜻이죠. 그래서 글자가 어떻게 움직이게 할 것인가 하는 것입니다. 예를들면 기본은 아무것도 주지 않으면 오른쪽에서 왼쪽으로 이동하지만 behavior="alternate"를 주면 글자가 좌우로 이동합니다. 그리고 slide를 주면 한번 이동하고 멈춥니다. 한번 예제를 통해서 확인해 보도록 합시다.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>아무것도 안주면 오른쪽에서 왼쪽으로 움직입니다.</marquee><p>
<marquee behavior="alternate">좌우로 움직입니다.</marquee><p>
<marquee behavior="slide">한번 이동하고 멈춤</marquee><p>
</body>
</html>
이렇게 입력하면,
맨위에 문장은 오른쪽에서 왼쪽으로 계속 이동합니다. 그 밑에 문장은 왼쪽끝까지 갔다가 다시 오른쪽 끝까지 갔다가 왔다갔다 합니다. 마지막 문장은 오른쪽에서 왼쪽 끝까지 와서는 멈춥니다. 이해하셨죠?
그다음에는 direction속성입니다. 글자를 오른쪽에서 왼쪽이 아닌 다른방향으로 이동하게 하는거지요. 예를들면 direction="right"하면 왼쪽에서 오른쪽으로 direciton="up"하면 위쪽으로 down하면 아래쪽으로 움직입니다. 이것도 예를 통해서 알아보도록 합시다.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>아무것도 안주면 오른쪽에서 왼쪽으로 움직입니다.</marquee><p>
<marquee direction="right">왼쪽에서 오른쪽으로 움직입니다.</marquee><p>
<marquee direction="up">위로 움직입니다.</marquee><p>
<marquee direction="down">아래로 움직입니다.</marquee><p>
</body>
</html>
실행해보면,
맨위에 글자는 그대로 오른쪽에서 왼쪽으로 움직이고 그 아래는 왼쪽에서 오른쪽으로 움직이고 그 아래는 아래에서 위로, 그 밑에는 위에서 아래로 움직이는 것을 확인하실 수 있을것입니다.
예제 소스는 이해하시겠죠? 별로 어려운점은 없으시리라 봅니다. 그럼 다음시간에 또 만나요~
예제를 한번 보도록 하지요.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>오른쪽에서 왼쪽으로 움직입니다.</marquee>
</body>
</html>
실행하면 글자가 오른쪽에서 왼쪽으로 움직입니다.
글자가 오른쪽에서 왼쪽으로 움직이는 것을 보실 수 있습니다.
마퀴태그의 속성을 배워보도록 하겠습니다. 마퀴태그에는 여러가지 속성이 있는데 그 중에 먼저 behavior속성입니다. 뜻이 행동,움직임 이런 뜻이죠. 그래서 글자가 어떻게 움직이게 할 것인가 하는 것입니다. 예를들면 기본은 아무것도 주지 않으면 오른쪽에서 왼쪽으로 이동하지만 behavior="alternate"를 주면 글자가 좌우로 이동합니다. 그리고 slide를 주면 한번 이동하고 멈춥니다. 한번 예제를 통해서 확인해 보도록 합시다.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>아무것도 안주면 오른쪽에서 왼쪽으로 움직입니다.</marquee><p>
<marquee behavior="alternate">좌우로 움직입니다.</marquee><p>
<marquee behavior="slide">한번 이동하고 멈춤</marquee><p>
</body>
</html>
이렇게 입력하면,
맨위에 문장은 오른쪽에서 왼쪽으로 계속 이동합니다. 그 밑에 문장은 왼쪽끝까지 갔다가 다시 오른쪽 끝까지 갔다가 왔다갔다 합니다. 마지막 문장은 오른쪽에서 왼쪽 끝까지 와서는 멈춥니다. 이해하셨죠?
그다음에는 direction속성입니다. 글자를 오른쪽에서 왼쪽이 아닌 다른방향으로 이동하게 하는거지요. 예를들면 direction="right"하면 왼쪽에서 오른쪽으로 direciton="up"하면 위쪽으로 down하면 아래쪽으로 움직입니다. 이것도 예를 통해서 알아보도록 합시다.
<html>
<head><title>움직이는 글자</title>
</head>
<body>
<marquee>아무것도 안주면 오른쪽에서 왼쪽으로 움직입니다.</marquee><p>
<marquee direction="right">왼쪽에서 오른쪽으로 움직입니다.</marquee><p>
<marquee direction="up">위로 움직입니다.</marquee><p>
<marquee direction="down">아래로 움직입니다.</marquee><p>
</body>
</html>
실행해보면,
맨위에 글자는 그대로 오른쪽에서 왼쪽으로 움직이고 그 아래는 왼쪽에서 오른쪽으로 움직이고 그 아래는 아래에서 위로, 그 밑에는 위에서 아래로 움직이는 것을 확인하실 수 있을것입니다.
예제 소스는 이해하시겠죠? 별로 어려운점은 없으시리라 봅니다. 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| IMG 태그, 링크, 경계선 (0) | 2011.07.08 |
|---|---|
| img태그1 (0) | 2011.07.06 |
| <a href></a>, 새창으로 문서이동하기 (0) | 2011.07.01 |
| <HR> 선그리기 (0) | 2011.06.29 |
| <B> <I> 태그 (0) | 2011.06.29 |
