[HTML/CSS] 움직이는 글자 <marquee>태그!!
[HTML/CSS] 움직이는 글자 <marquee>태그!!
웹 문서에서 글자를 돋보이게 하기 위해 <marquee>태그를 사용 할 수 있어요. 간판의 "네온사인" 같은 느낌을 낼 수 있지만 사실 요즘에는 gif이미지로 표현 하는것이 훨씬 자유롭고 멋지게 만들 수 있기 때문에 요즘에는 거의 사용하지 않는 태그에요. |
|
|
<marquee></marquee> 마퀴태그
태그 |
속성 |
속성값 |
비고 |
marquee |
align |
위치 |
top / middle / bottom |
width/height |
숫자 |
가로, 세로 보여줄 범위 | |
hspace/vspace |
숫자 |
텍스트 바깥 여백 | |
behavior |
scroll | 가로로 지나감(기본값) | |
slide | 한쪽 끝에 닿으면 멈춤 | ||
alternate | 범위 안에서 왕복 | ||
direction |
방향 |
up / down / left / right | |
scrolldelay |
숫자 |
지연속도 1/1000초, 클수록 느려짐 | |
scrollamount |
숫자 |
한번에 움직일 픽셀수, 클수록 빨라짐 | |
loop |
숫자 |
반복횟수 infinite(기본값) | |
bgcolor |
색상코드 |
0000FF, FFFFFF 등등 |
<marquee loop="3" direction="right" bgcolor="00FFFF">3번만 반복해요.</marquee>
<marquee behavior="slide" scrolldelay="200">끝에서 멈춰요</marquee>
<marquee behavior="alternate" scrollamount="200">속도가 빨라요</marquee>
<marquee width="100" height="100" direction="up" bgcolor="0EE487" behavior="alternate">범위 안에서</marquee>
|
* 마퀴태그를 응용하면 이런것도 가능해요.
<marquee behavior="alternate" direction="up" width="670" height="70" bgcolor="ffbebe" scrollamount="8"><marquee behavior="alternate" scrollamount="4">●</marquee></marquee>
|
< 연습하기 >