강좌 전의 중얼중얼~ 회사에서 제작한 내년 달력을 받아보았습니다. (참고로 우리 회사 달력은 정말 예쁩니다.) 6월 6일 현충일 일요일, 7월 17일 제헌절 토요일, 8월 15일 광복절 일요일 10월 3일 개천절 일요일, 12월 25일 성탄절 토요일, 2005년 신정(1월 1일) 토요일... 내년 6월부터는 오로지 9월에 있을 추석 연휴만 기대하고 살아야겠네요. ㅜ.ㅜ
오늘은 초보자를 위한 HTML 강좌 여덟번째 시간입니다. 지난 시간까지 우리는 기본 태그와 테이블, 그리고 프레임을 살펴 보았는데요. 사실 이정도까지만 알아두면 기본적으로 홈페이지를 만드는 데 필요한 필수적인 요소는 모두 공부하셨다고 해도 과언은 아닐듯 합니다.
때문에 오늘부터의 강좌에서는.. HTML 을 처음 접하는 초보자들께서 관심이 있어할 만한 재미있는 태그나 사용 기법들을 소개하는 시간으로 꾸며보고자 합니다.
오늘 여러분들께 소개시켜 드리고 싶은 친구는 바로 MARQUEE 태그가 되겠습니다. 이 태그를 사용하면 문자열 또는 이미지가 설정에 따라 좌우상하로 마구 이동하게 되지요. (궁금하시다고요? 잠시 후에 실컷 보시게 될 겁니다. ^^)
MARQUEE 라는 단어는 원래 '천막' 이라는 뜻을 가지고 있는데요. 이 태그에 어째서 MARQUEE 라는 이름이 붙게 되었는지는 잘 모르겠습니다만 아마도 이 이름을 지었던 사람이 MARQUEE 로 인해 문자열이 이동하는 모습에서 서커스 천막이 열리고 닫히는 장면을 연상했던 것 같습니다. (근거는 없는 이야기입니다. ^^)
이 태그의 간단한 사용 예를 보시면 다음과 같습니다.
어떻습니까? 나름대로 귀엽지 않나요? 위의 태그의 소스는 다음과 같습니다.
<MARQUEE>어떻습니까? 문자열이 움직이고 있지요?</MARQUEE>
이런 간단한 태그의 사용으로 문자열이 흐르는 효과를 주는 재미있는 MARQUEE 태그. 자, 그럼.. 오늘은 이 MARQUEE 태그에 대해서 한번 자세히 살펴보도록 하겠습니다.
<MARQUEE> 태그의 속성 정리
1.
BEHAVIOR BEHAVIOR 이라는 단어는 원래 '행동, 움직임' 이라는 뜻을 가지고 있습니다. 이 속성에서는 MARQUEE 의 대상이 어떻게 이동해야 할지 그 패턴을 지정하게 됩니다. 이 속성에는 다음과 같은 값들이 들어갈 수 있습니다. (기본은 SCROLL 입니다.)
SCROLL
한쪽 방향으로 끝없이 반복하여 이동합니다.
SLIDE
한 방향으로 움직이다가 반대편 끝에서 정지합니다.
ALTERNATE
양쪽 끝을 계속 오락가락 합니다.
용도에 맞게 잘 사용하시면 아주 재미있는 효과를 낼 수 있겠지요? ^^
2.
DIRECTION 방향을 의미하는 DIRECTION 속성에서는 여러분들께서 예상하시는대로, 왼쪽(LEFT), 오른쪽(RIGHT), 위(UP), 아래(DOWN) 의 값들을 사용하실 수 있습니다. 그런데 한가지. LEFT 와 RIGHT 값을 사용하실 때에는 별다른 이상이 없을 테지만, UP, DOWN 값을 사용하시면 자동적으로 MARQUEE 를 위한 공간이 - 지정하지 않으면 약 200 픽셀 정도 높이 - 생기게 됩니다. 이 점은 미리 알아두시면 좋을 듯 하네요.
LEFT
RIGHT
UP
DOWN
위에서 보시는 것처럼 DIRECTION 속성에 UP 과 DOWN 값을 지정하면 자동으로 테이블의 HEIGHT 가 늘어나는 것을 보실 수가 있습니다.
3.
LOOP '반복횟수' 를 의미하는 이 속성은 MARQUEE 의 대상을 몇 번 실행할지를 결정합니다. 예를 들어서 LOOP=1 이라고 한다면 단 한 번만 실행이 되는 것이고, LOOP=10 이라고 하면 10번 실행하게 되는 것이지요. 멈추지 않고 계속 반복되게 하려면 LOOP=-1 이라는 값을 입력하면 됩니다. (이 속성을 지정하지 않으면 기본 값은 -1이 되어서 무한정 반복됩니다.)
LOOP=1
LOOP=2
LOOP=10
LOOP=-1
4.
SCROLLAMOUNT 이 속성에서는 MARQUEE 의 대상이 한번에 이동하는 거리(양)를 결정합니다. (이 속성에서 사용되는 단위는 픽셀(Pixel) 입니다.) 예를 들어, SCROLLAMOUNT=1 이라고 한다면 1 픽셀씩 이동하게 되며, SCROLLAMOUNT=10 이라고 한다면 10 픽셀씩 이동하게 됩니다. 즉, 이 속성 값은 커지면 커질수록 더욱 띄엄띄엄 이동하게 되는 것이지요. (이 속성을 지정하지 않으면 기본 SCROLLAMOUNT 값은 6이 됩니다.)
SCROLLAMOUNT=1
SCROLLAMOUNT=6
SCROLLAMOUNT=10
SCROLLAMOUNT=20
설정 안함
5.
SCROLLDELAY 이 속성은 MARQUEE 의 대상이 이동하는 시간의 간격을 결정합니다. (이 속성에서 사용되는 단위는 MILLISECONDS(1/1000초) 입니다.) 예를 들어, SCROLLDELAY=1000 이라고 한다면 1초마다 한번씩 이동하게 되므로 (1000 milliseconds 는 1초입니다.) 매우 느린 진행을 보시게 될 것이고요. SCROLLAMOUNT=50 이라고 한다면 1초에 20번의 이동이 일어나게 되므로 상당히 빠르게 이동하는 모습을 보실 수가 있게 됩니다. 즉, 이 속성 값은 작아지면 작아질 수록 더욱 빨라지게 되는 것이지요. 그런데.. 제가 들은 바로는 64 이하의 값을 입력해도 더 빨라지지는 않는다고 하네요. (이 속성을 지정하지 않으면 기본 SCROLLDELAY 값은 85가 됩니다.)
SCROLLDELAY=1000
SCROLLDELAY=500
SCROLLDELAY=200
SCROLLDELAY=85
SCROLLDELAY=64
설정 안함
6.
BGCOLOR MARQUEE 에서도 테이블과 마찬가지로 배경색을 지정할 수 있습니다. 사용법은 테이블의 사용법과 일치합니다. 다음 예를 보시기 바랍니다.
BGCOLOR=BLACK
BGCOLOR=YELLOW
BGCOLOR=RED
BGCOLOR=BLUE
7.
WIDTH, HEIGHT 넓이와 높이를 의미하는 WIDTH, HEIGHT 속성 역시 설명이 필요없을 것 같네요. 넓이와 높이를 설정하면, 그만큼의 공간 안에서 MARQUEE 가 적용됩니다.
<MARQUEE WIDTH=200>
<MARQUEE WIDTH=400>
<MARQUEE WIDTH=400 HEIGHT=100>
자, 어떻습니까? MARQUEE 라는 친구.. 참 재미있지 않나요? 오늘의 강좌에서는 주로 문자열을 대상으로 MARQUEE 태그를 설명했는데요.. 꼭 문자열만이 MARQUEE 태그에 적용될 수 있는 것은 아닙니다. 문자열, 이미지, 테이블... 그 어떤 내용도 MARQUEE 태그에 적용될 수 있지요.
이 MARQUEE 태그는 단지 홈페이지를 만들 때 뿐만 아니라 일반 게시판에 글을 쓸 때에도 상당히 자주 사용되는.. 활용도가 매우 높은 태그입니다.
이렇게 다양한 기능을 가진 MARQUEE 태그를 잘 활용하셔서, 눈에 확 띄는 여러분만의 멋진 페이지를 만들어 보시기 바랍니다.
그러면 MARQUEE 태그의 여러가지 사용 예를 보시면서 강좌를 마무리 짓도록 하겠습니다. 오늘도 수고 많이 하셨습니다. 즐거운 주말 보내시고요. 다음 강좌에서 또 뵙겠습니다. ^^
marquee태그 방향을 up으로 하구요, height 100으로 준후에,
onmouseOver시에는 멈추게 했는데요.
마우스를 오버하면 뜬금없이 높이가 210px으로 확 넓어져 버립니다.
왜 그럴까요?