크니 | 22/05/18 04:03 | 추천 46

움직이는 글자 소스 모음.. +4

원문링크 https://www.ilbe.com/11415144265

오늘 움직이는 글자에 대해 알아보도록 하겠습니다. ^^

움직입니다~^^

옆에 글자가 움직이는 것을 볼 수 있습니다. 글자를 움직이게 하는 유일한 태그인 marquee 태그입니다.

marquee 태그는 다양하게 응용할 수 있습니다.

■ marquee 태그의 기본사용법

<marquee>내용</marquee>

<MARQUEE>옆으로 움직여 볼까요~

태그의 "내용" 부분에는 글자뿐만 아니라 이미지 등이 들어갈 수 있습니다. 또 marquee 태그 안 글자부분에

링크도 걸 수 있습니다.

이미지에 marquee 태그를 걸려고 하면 <marquee><img src="이미지주소"></marquee> 를 이용하시면 됩니다 .

marquee 태그가 많이 사용되는 이유는 여러가지 속성을 가지고 있기 때문입니다. 지금부터 속성에 대해

하나 하나 알아보도록 하겠습니다.

* <marquee behavior=scrol>내용</marquee>
- 일정방향 속성입니다.

움직입니다

* <marquee behavior=slide>내용</marquee>
- 한번 반복 후 화면 끝에서 정지되는 속성입니다. 만약 밑에 글자가 멈춰있다면 새로고침을 합니다.

그럼 다시 재생이 됩니다^^

화면 끝에 오면 멈추게 되죠~ ^^

* <marquee behavior=alternate>내용</marquee>
- 좌우로 왕복하는 기능을 합니다.

좌우로 왕복합니다~

* <marquee scrolldelay="수치">내용</marquee>
- 스크롤 지연값을 정해줍니다. 수치를 크게 할 수록 스크롤 속도가 늦어집니다.

scrolldelay="100" 의 경우속도 scrolldelay="500" 의 경우속도 scrolldelay="1000" 의 경우속도

* <marquee scrollamount="수치">내용</marquee>
- 스크롤의 속도(이동량)를 조절해주는 속성입니다. 수치가 클수록 속도가 빨라집니다. scrolldelay 속성과 반대입니다.

scrollamount="1" 의 경우속도 scrollamount="5" 의 경우<MARQUEE>속도 scrollamount="10" 의 경우속도

* <marquee loop="수치/infinite">내용</marquee>
- 주어진 수치 값 만큼 반복 횟수를 정하는 속성입니다. 그리고 무한반복을 하고 싶다면 infinite를 사용하면 됩니다.

　<marquee loop="5">내용</marquee><marquee loop="infinite">내용</marquee>5번 반복합니다무한 반복입니다 ^^

* <marquee bgcolor="색명/RGB색상코드">내용</marquee>
- 배경색을 지정하는 속성입니다. span style 태그하고 비슷한 기능입니다.

<marquee bgcolor="pink">내용</marquee><marquee bgcolor="#CC99FF">내용</marquee>핑크색입니다연보라색입니다

* <marquee width="가로수치" height="세로수치">내용</marquee>
- marquee 마퀴태그가 적용되는 스크롤 부분의 가로와 세로 너비를 정해주는 속성입니다.
아래 예제에서 배경색은 스크롤 되는 영역을 보여주기 위해서 넣어 주었습니다. ^^