HTML 기초, <marquee> 태그를 사용해 움직이는 글자만들기 ( 10번째 )
이 포스트는 Tistory 블로그를 하면서 자주 접하는 HTML에 대한 궁금증을 해소하기 위해
HTML 기초공부를 시작하고, 공부한 내용을 정리 목적으로 작성된 포스트입니다. ^^
HTML 기초, <marquee> 태그를 사용해 움직이는 글자만들기
HTML 문서에 <marquee> 태그를 사용하면 인터넷 페이지 화면에서 자유롭게 움직이는 글자를 만들 수 있습니다.
글자를 움직이게 하는 위치는 상, 중, 하로 지정할 수 있으며, 글자를 나타낼 영역과 상하좌우의 여백을 지정할 수 있습니다.
◎ 움직이는 텍스트를 만드는 <marquee> 태그
|
속성값 |
의미 |
|
align |
텍스트의 위치 (상, 중, 하)를 지정 |
|
height, width |
텍스트가 나타낼 범위 (영역)를 지정 |
|
hspace, vspace |
텍스트 바깥쪽의 상하좌우 여백을 지정 |
예문)
<marquee align="middle" height="50">
텍스트의 위치 ( 상, 중, 하 ) 를 지정합니다.
</marquee>
<marquee height="50">
텍스트가 나타날 범위를 지정합니다.
</marquee>
<marquee height="50" width="400" hspace="10" vspace="10">
텍스트 바깥쪽의 상하좌우 여백을 지정합니다.
</marquee>
# <marquee> 태그의 behavior 속성
속성을 지정해 흘러갈 방향과 속도를 조절할 수 있습니다.
|
속성값 |
의미 |
|
scroll |
속성의 기본값으로 문자열이 페이지를 가르면서 계속 흘러간다 |
|
side |
스크롤하던 문자가 페이지 한쪽 끝 가장자리에 닿으면 정지한다 |
|
alternate |
문자열이 일정범위 내에서 앞뒤로 왔다 갔다 반복한다 |
예문)
<marquee behavior="scroll" height="50">
behavior 속성의 기본값으로 문자열이 페이지를 가르면서 계속 흘러갑니다.
</marquee>
<marquee behavior="side" height="50">
스크롤하던 문자가 페이지 한쪽 끝 가장자리에 닿으면 정지합니다.
</marquee>
<marquee behavior="alternate" height="50">
문자열이 일정범위 내에서 앞뒤로 왔다 갔다 반복합니다.
</marquee>
# <marquee> 태그의 direction 속성
direction 속성에 흘러갈 방향 ( up, down, left, right ) 을 지정할 수 있습니다.
예문)
<marquee height="50" direction="left">
텍스트가 왼쪽으로 흐릅니다.
</marquee>
<marquee height="50" direction="right">
텍스트가 오른쪽으로 흐릅니다.
</marquee>
<marquee height="50" direction="up">
텍스트가 위쪽으로 흐릅니다.
</marquee>
<marquee height="50" direction="down">
텍스트가 아래쪽으로 흐릅니다.
</marquee>
# <marquee> 태그의 scrolldelay, scrollamount 속성
scrolldelay 속성은 스크롤 지연 속도를 지정할 수 있는 속성입니다.
즉, 스크롤을 얼마나 천천히 할 것인지를 지정하는 것. 속성값은 1/1000초 단위인데 값이 클수록 스크롤 속도가 느려집니다.
반면에 scrollamount 속성은 한번에 스크롤되는 픽셀 수를 지정합니다.
값이 커질수록 스크롤 속도가 빨라집니다.
예문)
<marquee scrolldelay="80" height="50">
scrolldelay 속성은 스크롤 지연 속도를 지정할 수 있는 속성입니다.
</marquee>
<marquee scrollamount="2" height="50">
scrollamount 속성은 한번에 스크롤되는 픽셀 수를 지정합니다.
</marquee>
# <marquee> 태그의 bgcolor, loop 속성
흘러가는 문자열에 배경색을 지정하기 위한 bgcolor 속성이 제공됩니다.
그리고 반복횟수를 지정하기 위해서 loop 속성이 지원됩니다.
예문)
<marquee bgcolor="0000ff" loop="1" height="50">
bgcolor 속성은 흘러가는 문자열의 배경색을 지정합니다.
</marquee>
<marquee bgcolor="0099ff" loop="2" height="50">
bgcolor 속성은 흘러가는 문자열의 배경색을 지정합니다.
</marquee>
<marquee bgcolor="00ffff" loop="4" height="50">
loop 속성을 제어하면 스크롤 반복 횟수를 제한할 수 있습니다.
</marquee>