오늘은 마키(marquee)태그에 대해서 배워보겠습니다.
마키태그는 다양한 칼러의 바탕색에 역시 다양한 칼러의 글씨가 지나가게 만드는 다이내믹한 태그입니다.
마키태그 속성 명령어들
bgcolor=[색상] // 배경색상을 설정 합니다
width=400 height=300 // 가로, 세로 크기를 설정 합니다
direction="left[right|up|down]" // 스크롤 방향을 설정 합니다
behavior=scroll[slide|alternate] // 움직임 속성을 지정합니다 (scroll : 한쪽방향으로 반복 스크롤 됩니다, slide : 스크롤되어와서 엄춤, alternate : 왼쪽, 오른쪽으로 반복 스크롤)
loop=3 // 반복횟수를 설정 합니다
scrollamount="3" // 스크롤 되는 거리간격을 픽셀단위로 설정 합니다
scrolldelay="200" ; 0.2초 // 스크롤 속도를 설정 합니다. 200 이 기본값입니다
hspace="50" vspace="50" // 아래위의 여백을 지정할 수 있습니다
<marquee align=bottom,middle,top> : 각각 문자열을 아래,중간,위쪽으로 위치
<marquee height,width,hspace,vspace> : 높이,폭,좌우여백을 지정할 수 있음
<marquee direction=right,left> : 문자열의 스크롤 방향 지정
<marquee bgcolor="#000080"> : 배경색 지정
<marquee scrolldelay=5 scrollamount=50> : 속도지정
아래는 실습용으로 몇개의 예제를 게시하였습니다.
소스코드를 그대로 복사하여 연습용파일에 붙여넣기한뒤 htm파일로 저장하여 결과물을 직접 실습해보세요.
메모장에서는 저장, htm파일에서는 새로고침을 하여 그때그때 결과물을 확인해 보세요.
검정색 바탕에 빨간글씨가 지나가게 만들기
<marquee bgcolor="black"><font color="red">배경은 검정색</font></marquee>
크기를 지정한 노랑색 바탕에 검정글씨가 지나가게 만들기
<marquee width=400 height=50 bgcolor="yellow"><font size="6">가로 400픽셀 세로 50픽셀에 바탕 노랑, 폰트 사이즈는 6</font></marquee>
- 참조하기 font 태그 배우기 클릭 https://itfix.tistory.com/28
좌우로 움직이는 글씨 만들기
<marquee behavior=alternate bgcolor="#ff0080" width=50% height=30><font color="Black">좌우 반복합니다</font></marquee>
위로 올라가는 글씨 만들기
<marquee direction=up width=180 height=70 bgcolor="yellow"><font color="red">위쪽으로 스크롤 됩니다</font></marquee>
지나가는 속도 조절하기
<marquee scrollamount="16">한번에 16픽셀씩 움직입니다</marquee>
위의 설명들을 참조하시어 다양한 예제들을 스스로 만들어 실습해보세요. 아주 재미있는 태그입니다.