[스크랩] 움직이는 태그 marquee(마키, 마퀴)에 대하여

▣ 움직이는 태그 marquee(마키, 마퀴)에 대하여 이번 시간에는 글자나 이미지 등을 움직이게 할 수 있는 marquee(마키, 마퀴)에 대하여 알아보겠습니다. 영어 사전적 의미는 (서커스 따위의) 큰 천막, (극장 출입구의) 차양이지만 태그에서는 글자나 여러 객체를 움직이게 하는 효과를 주는 명령 태그입니다. 기본 형식은 <marquee>움직임을 주고 싶은 글이나 이미지 주소 </marquee> * 시작태그 다음엔 종료태그가 있다는 것은 알아야지요? 위와 같이 기본 형식만 지정하면 속성은 기본값으로 움직인다. 1. marquee의 기본 속성 ▷ behavior=scroll, slide, alternate (scroll이 디폴트) ▷ bgcolor = 색상 : 마키 영역의 배경색 지정 (지정하지 않으면 body나 table의 배경색으로 됨) ▷ width = 픽셀 또는 상대 비율(%) height = 픽셀 또는 상대 비율(%) : 마키 영역의 크기 지정. 상대 비율로 주면 화면 또는 테이블의 상대적인 크기로 지정된다. ▷ direction = left, right, up, down (left가 디폴트) : 마키의 움직이는 방향 지정 ▷ scrolldelay = 시간 (단위 milliseconds) : 스크롤 될 때의 지연 시간 (움직이는 시간을 조절) 숫자가 높을수록 지체시간이 길어지죠.. ▷ scrollamount = 픽셀 : 스크롤의 움직임 정도(움직이는 이동량을 조절) 숫자가 낮을수록 세밀하게 움직입니다 ▷ loop = infinite 또는 횟수 : 스크롤의 반복 횟수. 디폴트는 infinite로 무한 반복. loop=2면 2회 반복 2. marquee 태그에 대한 속성과 속성값, 의미, 형식을 표로 알아보자. 속 성 속성값 의 미 형 식 behavior scroll 영역을 벗어나 사라진다 <marquee behavior=scroll> slide 움직이다 영역 끝에서 멈춘다 <marquee behavior=slide> alternate 영역 안에서 왔다 갔다한다 <marquee behavior=alternate> bgcolor 색상명 또는 색상코드 배경색 지정 <marquee bgcolor=yellow> width, height 수 치(픽셀) 움직일 범위를 지정한다 <marquee width=500 height=200> direction up 위로 움직인다 <marquee direction=up> down 아래로 움직인다 <marquee direction=down> right 왼쪽에서 오른쪽으로 움직인다 <marquee direction=right> left 오른쪽에서 왼쪽으로 움직인다 (기본값이 left임) <marquee direction=left> scrolldelay 수 치 스크롤의 지연효과 (1000을 지정하면 1초간 정지) <marquee scrolldelay=1000> scrollamount 수 치 스크롤의 이동 폭을 지정한다 <marquee scrollamount=5> loop 수 치 또는 infinite 스크롤의 반복 횟수을 지정한다 <marquee loop=infinite> 태그 작성 예시와 결과를 통해 알아보겠습니다. 빨간색 배경에 가로 100픽셀 세로200픽셀 크기의 범위에서 상하로 왕복하여 움직이는 명령은 <marquee bgcolor=red direction=up behavior=alternate width=100 height=200>글자입력</marquee> 결과 보기 글자입력 이번에는 조그만 아이콘 이미지를 가로 300픽셀 세로200픽셀 크기의 범위에서 왼쪽에서 오른쪽으로 움직여 볼까요? <marquee direction=right width=300 height=200> <img src=http://mysesang.com/buty/img/t3.gif></marquee> 결과 보기 3. marquee의 응용 (1) 2중 marquee 태그 direction=up 하면 위로 움직이고 여기에 behavior=alternate로 하면 위아래로 왕복을 하고 이동폭의 높이를 height=30으로 하면 태그작성 예시 <marquee behavior=alternate direction=up height=30> marquee의 응용</marquee> (결과) marquee의 응용 여기에 marquee를 하나 더 주면 <marquee><marquee behavior=alternate direction=up height=30>marquee의 응용</marquee></marquee> 결과 보기 marquee의 응용 (2) 글씨 깜빡이는 효과 글씨를 깜빡이는 효과가 나타나도록 마퀴 태그를 이용해 표현해보죠? marquee태그의 속성중에서width는 좌우공간을 정해주고 scrollamount는 이동량을 정해주는 속성입니다. 이 속성을 이용해서 깜박이는 효과를 줍니다. 주어진 공간안에서 이동량이 다르면 그 표현되는 운동도 차이가 나겠지요 따라서 같은 scrollamount값을 주더라도 width 값이 작을수록 더욱 깜빡거리는 효과가 나고, 같은 width값 안에서 scrollamount 값을 다르게 줘도 차이가 납니다. 작성 예 <marquee width=100 scrollamount=80> width=100 scrollamount=80일때 깜빡깜빡</marquee> <marquee width=350 scrollamount=80> width=100 scrollamount=80일때 깜빡깜빡</marquee> <marquee width=350 scrollamount=300> width=350 scrollamount=300일때</marquee> <marquee width=350 scrollamount=2> width=350 scrollamount=2일때</marquee> 결과 보기 width=100 scrollamount=80일때 깜빡깜빡 width=100 scrollamount=80일때 깜빡깜빡 width=350 scrollamount=300일때 width=350 scrollamount=2일때 작성 예 <marquee width=80 scrollamount=70> ★★☆☆ </marquee> 결과보기 ★★☆☆ 이미지를 천천히 위로 움직여 볼까요? <table border=3 bordercolor=black width=550 height=480><tr><td> <marquee width=550 height=480 scrollamount=1 direction=up> <img src= _album&dataid=1394&fileid=7®dt=20061211204417&disk=5&grpcode= pakhopehome&dncnt=N&.jpg> </marquee> </td></tr></table> 결과보기 아래와 같은 효과도 만들 수 있습니다 <marquee width=200 scrollamount=70>★</marquee> <marquee width=150 scrollamount=47> <font color=hotpink>★</font></marquee> <marquee width=200 scrollamount=48> <font color=green>☆</font></marquee><br> <marquee width=100 scrollamount=45> <font color=blue>☆</font></marquee> <marquee width=130 scrollamount=57> <font color=hotblue>☆</font></marquee> <marquee width=180 scrollamount=60> <font color=red>★</font></marquee> <marquee width=200 scrollamount=68> <font color=purple>☆</font></marquee><br> <marquee width=143 scrollamount=47> <font color=pink>☆</font></marquee> <marquee width=150 scrollamount=52> <font color=violet>☆</font></marquee> <marquee width=170 scrollamount=58> <font color=orange>★</font></marquee><br> <br><center>^^ ~ 깜박이는 효과 내기 ~ ^^</center> <marquee width=130 scrollamount=57> <font color=hotblue>☆</font></marquee> <marquee width=180 scrollamount=60> <font color=red>★</font></marquee> <marquee width=200 scrollamount=68> <font color=purple>☆</font> </marquee> <marquee width=200 scrollamount=70> <font color=blue>☆</font></marquee> <marquee width=150 scrollamount=47> <font color=hotpink>★</font></marquee> <marquee width=200 scrollamount=48> <font color=green>☆</font></marquee> 결과보기 ★ ★ ☆ ☆ ☆ ★ ☆ ☆ ☆ ★ ^^ ~ 깜박이는 효과 내기 ~ ^^ ☆ ★ ☆ ☆ ★ ☆

출처 : 로댕하우스

글쓴이 : 로댕 원글보기

메모 :