마퀴 태그(marquee tag)의 활용
마퀴(marquee)는 보통 "글자의 움직이는 명령어"로 해석합니다.
하지만, 꼭 글자에만 해당하는 것은 아니죠.
우선은 글자를 움직이는 명령으로 배워, 다른 것에도 활용하도록 합시다.
|
기본 명령어는
<marquee> 명령어</marquee> 입니다.
<marquee> 는 "오른쪽으로 움직여라"는 뜻
|
자, 이제 시작해 볼까요?
연습장이나 메모장을 불러옵니다.
그리고, 아래처럼 적어세요
|
<br>
<marquee direction="right">오른쪽으로 움직여라</marquee>
<br>
<marquee direction="up">위쪽으로 움직여라</marquee>
<br>
<marquee direction="down">밑으로 움직여라</marquee>
<br>
<marquee behavior="slide"> 왼쪽으로 움직이다 멈추어라 </marquee>
다 적으셨으면
메모장은 편집 눌러서 [다른 이름으로 저장]하시고
[○○.html]로 저장하셔서 보시고,
연습장은 편집 눌러서 그냥 저장하신 다음 [새로고침] 하세요
이렇게 나오나요?
|
|
이번에는 marquee의 명령어 안에 여러가지 속성을 넣어봅시다.
1. scrollamount
움직임의 속도를 명령합니다
<marquee scrollamount="움직이는 속도의 수치">
움직이는 속도의 수치에 값을 넣으면 움직임의 속도가 변합니다.
1 이 가장 느리고 숫자가 증가 할수록 속도도 빨라 지죠.
2.bgcolor
바탕색을 말합니다
<marquee bgcolor="yellow">노란색 바탕</marquee>
이렇게 직접 바탕색을 지정해 줄수도 있지만,
색상표를 활용하면 여러가지 색을 원하는 대로 지정할수 있습니다.
가령, <marquee bgcolor="##ffcc33">위에 보이는 주황색 바탕</marquee>
3.direction
움직이는 방향...
위에서 처음에 해 보셨죠?
※참고로
4. behavior="slide"
이건, 오다가 멈춤...
5. behavior="alternate"
이건 왔다갔다 하라는 말이죠
|
실전 연습 한 번 해 볼까요?
크기까지 넣어서
움직임은 왼쪽으로, 속도는 5, 바탕색은 핑크, 왔다리 갔다리 입니다
<marquee direction="left" scrollamount="5" bgcolor="pink"
behavior="alternate"> width="300" height="70">
♠좋은 친구♠<br>
♣회원님들♪♣<br>
♡사랑합니다♡</marquee>
|
|
결과는?
|
※응용 하나만 더!!
마퀴를 이중으로 사용해 봅시다.
<marquee><marquee direction="up" scrollamount="5"
behavior="alternate" width="350" height="150">
♠좋은 친구♠<br>
♣회원님들♪♣<br>
♡사랑합니다♡</marquee></marquee>
이렇게 하시면 한번은 상하로, 또 한번은 좌우로 움직입니다.
|
결과보기
|
테이블에 활용 해 볼까요?
전에 올려 드린 이미지에 해 봅시다
<table background="http://melody123.com.ne.kr/img/f184.jpg"
style="filter:blur(direction=135,strength=100)"
width="520" height="368" border=10>
<tr><td>
<marquee direction=up scrollamount=1>
<font color=yellow size=3><center><b>
귀천 <br><br>
글 - 천상병<br><br>
나 하늘로 돌아가리라.<br>
새벽빛 와 닿으면 스러지는<br>
이슬 더불어 손에 손을 잡고,<br><br>
나 하늘로 돌아가리라.<br>
노을빛 함께 단 둘이서<br>
기슭에서 놀다가 구름 손짓하며는,<br><br>
나 하늘로 돌아가리라.<br>
아름다운 이 세상 소풍 끝내는 날,<br>
가서, 아름다웠더라고 말하리라.
</b></center> </font> </marquee>
</td></tr></table>
|
| 그 결과
|
|
|
다음은 숙제?
열심히 공부하세요!!
|
|
|
|