나의 즐겨찾기 | 블로그홈 | 바로가기 바로가기 | 로그인
순리를 역행 하지 말자
블로그  |  사진갤러리  |  동영상갤러리 방명록  |   즐겨찾기 추가
바다 (asd1936)
프로필     
 인기도 :
 이 블로그 점수주기
최근 글
봄 조개요리
여러가지 순두부 요리...
오징어 요리 맛있게하는..
적절하게 사용하면 넘 ..
스트레스 받아 마음이 ..
최근 댓글 전체
맛있겠어요 감사히 담아..
좋은 건강정보 감사히 ..
좋은 건강정보 감사히 ..
좋은 건강정보 감사히 ..
맛있겠어요
최근 참조글 전체
Ultram.
Lorazepam at..
Ultram addic..
Nextel Ringt..
Cingular Rin..
오늘 전체
방문자 481 1893282
구독자 1 1166
댓글 1 8464
참조글 4 651
2009 12월
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
지난 글
2009년 1월
2009년 2월
2009년 3월
2009년 4월
2009년 5월
2009년 6월
2009년 7월
2009년 8월
2009년 9월
2009년 10월
2009년 11월
2009년 12월
개설일 : 2004/04/13
 

움직이는 글자(mrquee)

 

마퀴(marquee)라는 영어 단어는 "움직이다"라는 뜻이 들어있습니다. 이 태그는 글자,그림 등을 움직이게 할 수 있는데여... 마퀴 태그는요 marquee 이 단어 하나만으로도 아주 많은 표현을 할 수 있는 간단하면서도 강력한 태그언어라 할 수 있습니다. 홈페이지 제작할 때는 다른 태그와 함께 아주 중요한 문자입니다.
marquee 태그에도 여러 가지 옵션을 삽입할 수 있는데여..... 좌로 이동, 우로 이동 , 아래로 이동 , 위로 이동 , 좌우로 이동 등을 글자나 그림에 붙여서 사용할 수 있습니다.
홈페이지에서는 많이 사용되지는 않지만 다른 태그와 함께 필수로 알아 두셔야 할 사항입니다. 주로 채팅방에서 많이 사용되는
마퀴(marquee)태그를 지금부터 알아 보도록 하겠습니다.

 

1.기본적인 소스 글자내용 : 여기에 여러 가지 옵션을 넣어서 사용합니다.

 

옵션코드와 의미 , 결과보기를 표를 이용하여 알아 보겠습니다.


기본 소스 : <marquee behavior="사용할옵션">본문 내용</marquee>

 

  • scroll : 영역을 벗어나서 사라지게 하는 옵션입니다.

소스

<marquee behavior=scroll>글자가 계속 반복해서 움직입니다.</marquee>

결과

글자가 계속 반복해서 움직입니다.

  • slide loop : 영역의 끝부분에서 멈추게 합니다. 반복 횟수를 말합니다.(안에 숫자를 입력한 크기 만큼 글자가 반복하여 움직입니다.) "loop" 에 숫자를 몇으로 하느냐에 따라 보여지는 느낌이 다르게 표현 되기도 합니다.
  • loop : "infinite" 적어주면 무한대로 반복하는 것으로 -1을 적어줘도 동일합니다.

loop 에 반복 횟수를 한번만 준 경우

소스

<marquee behavior=slide loop=1>(끝에서 와서 멈춥니다.)</marquee>

결과

(끝에서 와서 멈춥니다.)

 

loop 에 반복 횟수를 30번 준 경우 글자가 갑자기 사라지는 느낌이 전해 집니다.

소스

<marquee behavior=slide loop=30>(글자가 갑자기 사라집니다.)</marquee>

결과

(글자가 갑자기 사라집니다.)

 

  • alternate : 영역 안에서 왔다갔다 합니다.

소스

<marquee behavior=alternate>좌 , 우로 왔다 갔다......</marquee>

결과

좌 , 우로 왔다 갔다......

 

  • bglolor : 영역의 배경색을 지정합니다.

소스

<marquee bgcolor=pink>배경색상</marquee>

결과

배경색상

 

  • width(넓이) 와 height(높이) : 영역의 넓이와 높이를 지정합니다.

<marquee direction="뱡향" width="넓이 숫자" height="넓이 숫자" bgcolor="색상">내용</marquee>

소스

<marquee width=400 height=50 bgcolor=00ffff>넓이와 높이</marquee>

결과

넓이와 높이

 

  • direction : 움직이는 방향을 지정해 줍니다.
    방향에는 " left , right , up , down " 의 4가지 옵션을 사용할 수 있습니다.

왼쪽으로 이동하는 소스

<marquee direction=left>왼쪽으로 이동합니다.</marquee>

결과

왼쪽으로 이동합니다.

오른쪽으로 이동하는 소스

<marquee direction=right>오른쪽으로 이동합니다.</marquee>

결과

오른쪽으로 이동합니다.

올라가는 소스

<marquee direction=up>위로 이동합니다.</marquee>

결과

위로 이동합니다.

내려가는 소스

<marquee direction=down>아래로 이동합니다.</marquee>

결과

아래로 이동합니다.

 

  • scrolldelay : 스크롤의 지연효과를 얻기 위해서 scrolldelay를 사용합니다. 만약 1초간 멈췄다가 이동하려면 1000을 지정해 주면 됩니다.

소스

<marquee scrolldelay=1000 bgcolor=silver>1초간 정지합니다.</marquee>

결과

1초간 정지합니다.

 

  • scrollamount : 값(숫자가 클수록)을 많이 줄 수록 스크롤 속도가 빨라집니다

소스

<marquee scrollamount=30>하모니의 쉼터로 놀러 오세요.^^*</marquee>

결과

하모니의 쉼터로 놀러 오세요.^^*

 

위에 쓰여진 태그에 여러 가지 옵션을 사용하여 다이나믹하게 표현할 수 있습니다. 예를 들어


<marquee behavior=scroll><font size="2" color="black" face="바탕">하모니의 쉼터</font></marquee> 이 태그안에 크기나 방향 , 색상등을 삽입하여 쓰기도 합니다.
또는 글씨체와 글자 크기를 변경 할 수도 있는데요. 바꾸는 방법은 marquee 앞에
내용을 삽입하면 되겠지요?


예)
<marquee behavior=scroll><font size="2" color="black" face="바탕">내용</font></marquee> 이런식으로 여러 가지 옵션을 써서 표현할 수 있다는 점을 명심하시기 바랍니다. 태그는 여러 가지 응용력을 발휘하면 할수록 돋보이게 됩니다.

 

 

2. 마퀴(marquee)태그에 옵션을 삽입한 또 다른 예제입니다.

아래로 내려가는 태그

소스

<marquee direction=down>♣하♣모♣니

결과

    ♣하
      ♣모
        ♣니

올라가는 태그

소스

<marquee direction=up>♣하♣모♣니

결과

    ♣하
      ♣모
        ♣니

글자가 세로로 이동하는 태그

소스

<MARQUEE bgcolor=white direction=reft scrollamount=1 width=300 height=50 loop=-1>하<br>모<br>니</marquee>

결과




왼쪽으로 이동하면서 위로 올라가는 태그

소스

<MARQUEE DIRECTION=LEFT><marquee direction=up><font size=5 color=pink face=바탕체>좋은 하루!</font>

결과

좋은 하루!

빙글빙글 태그

소스

<marquee direction=up behavior=alternate height=100>글자가 막 돌아요~~</font>

결과

글자가 막 돌아요~~

 

이렇게 태그에 여러 가지 옵션을 삽입하여 응용하면 멋진 글자 태그가 탄생됩니다. 여러 가지를 혼합하여 응용할 수도 있습니다. 1%의 영감과 99%의 노력으로

댓글쓰기

댓글쓰기 입력폼

포스트 목록 닫기

목록보기
 
전체 글보기(15855)
꽃 식물 이야기
신선하고 간단한 요리만들기
디카 포토샾스위시 배우기
블로그자료 태그자료
아이콘 모음
생활에 도움을 주는자료
컴에필요한 자료
건강에 도움을 주는 자료
쉽고 영양 많은 요리 만들기 새 댓글이 있습니다.