|
▷ Img [이미지, 그림 Image] 태그
|
| |
|
⊙ 태그요소
|
|
① <img> ... 종료태그 사용금지
|
|
img 태그는 그림을 화면에 나타내주는 태그이다.
종료태그를 사용하지 않는다. |
|
⊙ 속성(Atributes)
|
|
속성
|
용도
|
사용법
|
|
|
id, class, style, title, name |
| src="그림주소" |
마퀴 형식을 지정 |
<marquee behavior="scroll / slide / alternate">마퀴될 내용</marqee> |
width="폭"
height="높이" |
마퀴 폭을 지정(left/right에서)
마퀴 높이 지정(up/down에서) |
<marquee width="400" height="300">마퀴될 내용</marqee> |
| align="정렬" |
마퀴 방향을 지정 |
<marquee direction="left / right / up /down">마퀴될 내용</marqee> |
| border="테두리" |
반복횟수 지정, 기본값=무한 |
<marquee loop="3">마퀴될 내용</marqee> |
hspace="수평간격"
vspace="수직간격" |
마퀴 수평, 수직 간격지정 |
<marquee hspace="10" vspace="10">마퀴될 내용</marqee> |
alt="설명"
longdesc="url" |
마퀴 속도를 지정, 클수록 빠르다. |
<marquee scrollmount="100">마퀴될 내용</marqee> |
ismap
usemap |
마퀴 지연을 지정, 클수록 늦다. |
<marquee scrolldelay="1000">마퀴될 내용</marqee> |
lowsrc="이미지파일"
height="높이" |
마퀴 폭을 지정(left/right에서)
마퀴 높이 지정(up/down에서) |
<marquee width="400" height="300">마퀴될 내용</marqee> |
loop="수평간격"
start="값""
datasrc="url"
datafield="열"
dynsrc="동영상" |
마퀴 수평, 수직 간격지정 |
<marquee hspace="10" vspace="10">마퀴될 내용</marqee> |
|
| |
|
⊙ 속성(Atributes)의 사용 예
|
|
behavior 속성 예제 |
실행결과 |
|
<marquee behavior="scroll">흘러 사라지는 마퀴</marquee>
<marquee behavior="slide">흘러 정지하는 마퀴</marquee>
<marquee behavior="alternate">왔다갔다 왕복 마퀴</marquee>
|
| scroll
|
|
흘러 사라지는 마퀴
|
| slide
|
| 흘러 정지하는 마퀴
|
| alternate
|
| 왔다갔다 왕복 마퀴
|
|
|
| |
|
direction 속성 예제 |
실행결과 |
|
<marquee direction="left">좌측으로</marquee>
<marquee direction="right">우측으로</marquee>
<marquee direction="up">올라가기</marquee>
<marquee direction="down">내려가기</marquee>
|
|
|
| |
|
bgcolor 속성 예제 |
실행결과 |
|
<marquee bgcolor="greenyellow">배경색상</marquee>
|
|
|
| |
|
scrollamount 속성 예제 |
실행결과 |
|
<marquee scrollamount="0">이동양=0</marquee>
<marquee scrollamount="0">이동양=1</marquee>
<marquee scrollamount="10">이동양=10</marquee>
<marquee scrollamount="50">이동양=50</marquee>
|
scrollamount=0 - 이동이 없으니 움직이지 않겠죠?
|
|
마퀴속도
|
scrollamount=1- 숫자가 작을수록 세밀하겠지요?
|
마퀴속도
|
scrollamount=10 - 이동량 10 픽셀
|
마퀴속도
|
scrollamount=50 - 이동량 50 픽셀
|
마퀴속도
|
|
|
| |
|
scrolldelay 속성 예제 |
실행결과 |
|
<marquee scrolldelay="0">지연시간=0초</marquee>
<marquee scrolldelay="100">지연시간=0.1초</marquee>
<marquee scrolldelay="500">지연시간=0.5초</marquee>
<marquee scrolldelay="1000">지연시간=1초</marquee>
|
scrolldelay=0 - 0/1000=0초 지연없다. 빠르다.
|
|
마퀴지연
|
scrolldelay=1 - 100/1000=0.1초씩 지연발생
|
마퀴지연
|
scrolldelay=10 - 500/1000=0.5초씩 지연발생
|
마퀴지연
|
scrolldelay=50 - 1000/1000=1초씩 지연발생
|
마퀴지연
|
|
|
| |
|
width, height 속성 예제 |
실행결과 |
|
<marquee>폭:생략
<marquee width="100">폭:100</marquee>
<marquee width="200">폭:200</marquee>
<marquee width="50%">폭:50%</marquee>
<marquee direction="up">높이:생략</marquee>
<marquee height="100" direction="up">높이:100</marquee>
<marquee height="150" direction="down">높이:150</marquee>
|
|
폭:생략
|
상
|
상
|
하
|
|
폭:100
|
|
폭:200
|
|
폭:50%
|
|
|
| |
|
image 도 scroll 된다. |
Table 도 scroll 된다. |
<marquee>
<img src="그림주소">
</marquee>
|
태왕사신기
청룡, 백호
현무, 주작
|
|
|
|
|
| |
|
|