marquee태그를 사용해 텍스트를
우에서 좌로, 아래에서 위로 움직여 보겠습니다.
가로세로 여백 속성과, 움직이는 방향속성, 스크롤되는 양속성을 활용했습니다.
ex) hspace="100" vspace="100" direction="up" scrollamount="2"
-> 수평,수직여백100, 움직이는방향 위, 2픽셀씩 스크롤 해라
marquee의 속성입니다. 속성값을 활용해 다양하게 옵션을 활용할수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
브라우저 호환성을 확인하고 사용하세요, 지원하지 않는 브라우저에서는 사용이 불가능합니다.
| behavior | 선택 윤곽 내에서 텍스트가 스크롤되는 방식을 설정합니다. 가능한 값은 scroll, slide및 alternate입니다. 값을 지정하지 않으면 기본값은 scroll입니다. |
| bgcolor | 색상 이름 또는 16진수 값을 통해 배경색을 설정합니다. |
| direction | 선택 윤곽 내에서 스크롤 방향을 설정합니다. 가능한 값은 left, right, up와 down. 값을 지정하지 않으면 기본값은 left입니다. |
| height | 픽셀 또는 백분율 값으로 높이를 설정합니다. |
| hspace | 수평 여백을 설정합니다 |
| loop | 선택 윤곽이 스크롤되는 횟수를 설정합니다. 값을 지정하지 않으면 기본값은 -1이며 선택 윤곽이 계속 스크롤됨을 의미합니다. |
| scrollamount | 각 간격에서 스크롤되는 양을 픽셀 단위로 설정합니다. 기본값은 6입니다. |
| scrolldelay | 각 스크롤 이동 사이의 간격을 밀리초 단위로 설정합니다. 기본값은 85입니다. truespeed지정 하지 않는 한 60보다 작은 값은 무시되고 값 60이 대신 사용됩니다 . |
| truespeed | 기본적으로 scrolldelay60보다 작은 값은 무시됩니다. 이 있는 경우 truespeed해당 값은 무시되지 않습니다. |
| vspace | 세로 여백을 픽셀 또는 백분율 값으로 설정합니다. |
| width | 너비를 픽셀 또는 백분율 값으로 설정합니다. |
html body안에
<MARQUEE scrollamount="이동할픽셀설정 "> "움직이게 할 텍스트내용을 추가해주세요 "</MARQUEE>를 추가합니다.
marquee 앞에 붙이는 <> 안에 옵션을 추가해주면, 방향 및 속도를 설정해줄수 있습니다.
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>MarQuee를 활용한 좌우 상하로 움직이는 텍스트만들기</title>
</head>
<body>
<p>
<MARQUEE hspace="50" vspace="50" scrollamount="10" >스크롤의 위/아래 여백 50픽셀 + 한번에 10픽셀씩 이동</MARQUEE>
<!-- 스크롤의 여백 -->
</p>
<p>
<MARQUEE scrollamount="30">한번에 30픽셀씩 이동합니다.</MARQUEE>
<!-- 스크롤의 속도 -->
</p>
<MARQUEE scrollamount="20">한번에 20픽셀씩 이동합니다.</MARQUEE>
<!-- 스크롤의 속도 -->
</p>
<MARQUEE scrollamount="10">한번에 10픽셀씩 이동합니다.</MARQUEE>
<!-- 스크롤의 속도 -->
</p>
<p>
<MARQUEE hspace="100" vspace="100" direction="up" scrollamount="2">
위아래 여백 100, 스크롤 방향이 위쪽이됩니다.위로2픽셀씩 이동</MARQUEE>
<!-- 스크롤 방향 설정, 속도 -->
</p>
</body>
</html>
간단한 태그 속성만으로도 텍스트를 쉽게 움직일수 있습니다.
웹사이트를 만들때 꼭 활용해 보시기 바랍니다.
전체소스는 해당 스틱코드를 즐겨찾기 하시면 쉽게 활용하실수 있습니다!
https://stickode.com/detail.html?no=2723
스틱코드
stickode.com
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 버튼 태그, 이미지 태그 예제 (0) | 2022.01.25 |
|---|---|
| [HTML/CSS] 탭 메뉴바 예제 (0) | 2022.01.13 |
| [HTML/CSS] 검색어 입력상자 예제 만들기 (0) | 2022.01.02 |
| [HTML/CSS]유튜브 API 사용법( Youtube Iframe) (0) | 2021.12.25 |
| [HTML] 이미지를 원형으로 만들기 예제 (0) | 2021.12.21 |
