반응형
지난주에 학교 실습시간에 HTML를 기초부터 배웠는데, 그때 배운 내용중에서 마키(marquee) 태그가 있었습니다.
그 시간에 이 태그를 배우면서 이 지식을 다른 독자분들께도 알리면 좋을듯 싶어서 이 글을 작성합니다.

지금 왼쪽 스크린샷을 보시면 아시겠지만, 제 블로그 제목이 보이고 있습니다. 그 블로그 제목이 위에서 아래로 내려오고 있는데, 이것이 marquee 태그를 활용한 예제 입니다.

지금부터 marquee 태그에 대해서 1편에서는 설명과 예제, 2편에서는 활용을 하나씩 들어가 보도록 하겠습니다.

일단 marquee 태그의 기본부터 들어가 볼까요?
태그 : <marquee> 마키태그 활용하기 </marquee>
마키태그 활용하기
상단에 태그를 하단에 미리보기로 적용 시켜봤습니다.
텍스트가 우측에서 좌측으로 지나가는 것을 보실수가 있습니다.
꼭 텍스트 뿐만 아니라 이미지나 플래시, 스크립트등도 적용이 가능합니다.

다음으로 marquee 태그의 속성값을 하나 하나씩 알아가 보도록 하겠습니다.
순서는 사용 빈도순. 많이 사용하실만한것부터 차례대로 사용하겠습니다.

1. 움직임의 속성 설정 : <marquee behavior=(scroll/slide/alternate)> ~ </marquee>
marquee 태그를 어떻게 움직일 것인지를 설정할 수 있습니다.
계속 움직이게 할것인지, 끝에서 멈추게 할것인지 등등을 설정하실수 있습니다.
태그는 <marquee> 태그를 닫기전에 "behavior=속성값"을 삽입하면 됩니다.
태그 : <marquee behavior=scroll> 반복해서 움직입니다. </marquee>
반복해서 움직입니다.
별반 달라진것이 없죠? 이미 눈치를 채신분들도 있겠지만, marquee 태그의 behavior 속성 기본값은 반복해서 움직이는 scroll임을 알수가 있습니다.
태그 : <marquee behavior=slide> 끝에서 멈춥니다. </marquee>
끝에서 멈춥니다.
이번에는 계속 반복하지 않고, 끝에서 멈춥니다. slide 속성값은 마치 미끄럼틀의 끝이 있어 멈춰야 되는것처럼 계속 흐르다가 끝에서 멈추게 되는 속성값입니다.
태그 : <marquee behavior=alternate> 좌우로 왔다갔다합니다. </marquee>
좌우로 왔다갔다합니다.
alternate 속성값은 자동차 와이퍼같이 좌우로 반복해서 왔다갔다하는 속성값입니다.

2. 스크롤 방향 지정 : <marquee direction=(up/down/left/right)> ~ </marquee>
marquee 태그 안에서 설정된 개체의 흐르는 방향을 설정할 수 있습니다.
<marquee> 태그를 닫기 전, "direction=방향"을 삽입, 설정하시면 됩니다.
대표로 글자가 위로 올라가는 태그 하나만 시연하고 다음으로 넘어가겠습니다.
태그 : <marquee direction=up> 글자가 위로 올라갑니다. </marquee>
글자가 위로 올라갑니다.
2편에서 활용 예로 보여드리겠지만, 한줄이 아닌 여러줄(br 태그 활용)로 시나 편지등을 작성하여 위로 올라가게 하는 태그를 작성한다면 멋진 활용이 될것입니다.

3. 가로, 세로 크기 지정 : <marquee width=(가로픽셀) height=(세로픽셀)> ~ </marquee>
marquee 태그가 적용이 될 범위를 지정할 수 있습니다.
태그 : <marquee width=240 height=120> 가로 240픽셀, 세로 120픽셀 입니다. <br> 텍스트 </marquee>
가로 240픽셀, 세로 120픽셀 입니다.
텍스트

위 3개의 태그 정도만 안다면 제 블로그 제목과 같은 효과는 충분히 만들수 있습니다.
계속해서 어떠한 속성이 더 있는지 보도록 하겠습니다.

4. marquee 태그 내 배경색 지정 : <marquee bgcolor="(색상값/RGB)"> ~ </marquee>
marquee 태그가 지정된 범위 내의 배경색을 지정하실수 있습니다.
태그 : <marquee bgcolor="pink"> 배경색이 분홍입니다. </marquee>
배경색이 분홍입니다.

5. 흐르는 속도 조절 (빠르게) : <marquee scrollamount="(숫자)"> ~ </marquee>
marquee 태그 내 개체의 흐르는 속도를 조절할 수 있습니다.
이번 태그는 scrollamount에 들어가는 숫자가 커질수록 빨라집니다.
태그 : <marquee scrollamount="100"> 100만큼 속도가 빨라집니다. </marquee>
100만큼 속도가 빨라집니다.

6. 반복 횟수 설정 : <marquee loop=(횟수)> ~ </marquee>
marquee 태그 내 개체의 반복횟수를 설정하실수 있습니다.
기본값은 무한정 반복하는 것입니다.
태그 : <marquee loop=3> 3회 반복 후 사라집니다. </marquee>
3회 반복 후 사라집니다.

7. 흐르는 속도 조절 (느리게 지연) : <marquee scrolldelay="(ms)"> ~ </marquee>
marquee 태그 내 개체의 속도를 느리게 지연할수 있습니다.
scrolldelay내에 들어가는 숫자가 커질수록 느려지며, 단위는 밀리초(ms, 1/1000)입니다.
태그 : <marquee scrolldelay="1500"> 1.5초의 지연이 발생하고 있습니다. </marquee>
1.5초의 지연이 발생하고 있습니다.

지금까지 marquee 태그에 대해서 설명과 그 속성값에는 어느것들이 있는지 그 예제를 보셨습니다.
다음으로 marquee 태그의 활용 예제에 대해 작성할까 하였으나, 내용이 많이 길어진 관계로 2편에서 계속해서 이어가도록 하겠습니다. 읽어주셔서 감사하고, 많은 활용 되시길 바랍니다. 감사합니다.

가시기 전에 댓글 하나 남겨주시고 가시는 센스! 잊지 마세요~ ^^*