코딩이야기/HTML

HTML 강좌 15강 - HTML 태그 익히기#14 - marquee

완소줄기 2016. 2. 5. 19:27

HTML 강좌 15강 - HTML 태그 익히기#14 - marquee


이번 강좌에서는 marquee 태그에 대해 알아보도록 하죠.

이 태그는 이런 저런 사이트들을 돌아다니다 보면 가끔씩 볼 수 있는데요.

좌에서 우로, 혹은 우에서 좌로 움직이는 텍스트를 표현하는 태그입니다.

스크롤 기능이 있는 텍스트라고 합니다.


사용법은 간단합니다.

<marquee></marquee>

시작태그와 종료태그 사이에 원하는 텍스트를 입력하면 끝!

하지만 좌/우 스크롤 방향을 옵션으로 설정해 주어야겠죠~

<marquee direction="right">

오른쪽으로 흐르는 텍스트

</marquee>

<marquee direction="left">

왼쪽으로 흐르는 텍스트

</marquee>

direction 속성값을 설정해 주면 되겠네요~





이렇게 코딩을 하고 테스트를 해보도록 하겠습니다.





설정한 값대로 아주 잘 움직이는군요~


그리고 marquee는 behavior 라는 속성도 가지고 있습니다

behavior는 어떤 방식으로 scroll 되는지를 설정해 줍니다.

(1)scroll : 기본적인 방식으로 시작영역부터 종료영역까지 설정한 방향으로 흐릅니다.

(2)slide : scroll과 같은 방식이지만 종료역역에 다다르면 텍스트가 더 이상 흐르지 않고 멈춥니다.

(3)alternate : 시작영역부터 시작해 종료영역에 다다르면 다시 시작영역으로 되돌아 가는 방식입니다.


<marquee behavior="scroll">behavior="scroll"</marquee>

<marquee behavior="slide">behavior="slide"</marquee>

<marquee behavior="alternate">behavior="alternate"</marquee>





이렇게 코딩을 하고 테스트를 해보도록 하겠습니다.





직접 코딩을 하면서 테스트를 해보세요~~



예제 파일은 첨부파일에서 받을 수 있습니다 :)


15.zip