텍스트 가로 롤링 - tegseuteu galo lolling

Question

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

번호

제목

글쓴이

추천

조회

날짜

.NET 기반 그룹웨어 솔루션 개발자를 모십니다. []

다자래

86120

2010-06-08

314

[TEXT] 텍스트 한줄 또는 문장이 롤링(Vertiacl Scrolling) 되는 자바스크립트 소스..

운영자

0 / 0

10710

2008-12-24

313

[STATUS] 상태바에 아무것도 표시되지 않습니다.

운영자

0 / 0

4113

2008-12-21

312

[ETC] 클릭하면 해당되는 태그명을 알려주는 자바스크립트 소스입니다.

운영자

0 / 0

3560

2008-12-20

311

[KEYBOARD] 키보드로 타이핑된 내용을 기억합니다.

운영자

0 / 0

3763

2008-12-19

310

[TIME] 오늘의 요일 구하기

운영자

0 / 0

5381

2008-12-16

309

[INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다. (#2)

운영자

5 / 0

17858

2008-12-06

308

[INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다. (#1)

운영자

53 / 0

34349

2008-12-05

307

[PROGRESS BAR] 그라데이션 프리 프로그레스바

운영자

0 / 0

5662

2008-12-03

306

[SELECT BOX] 멀티 셀렉트 박스

운영자

0 / 0

12508

2008-12-02

305

[INPUT BOX] 박스 입력시 하이라이트 기능

운영자

0 / 0

5442

2008-12-02

304

[MENU] 탭메뉴형 자바스크립트

운영자

0 / 0

18235

2008-12-02

303

[MENU] 기본 좌측 가로메뉴

운영자

1 / 0

9572

2008-12-02

302

[MENU] 드롭다운 가로형 메뉴

운영자

0 / 0

13029

2008-12-02

301

[BUTTON] 전송(submit) 버튼의 연속 클릭을 방지하는 자바 스크립트입니다.

운영자

4 / 0

18587

2008-12-02

300

[CHECK BOX] 드래그 체크박스 선택 해제

운영자

1 / 0

5959

2008-12-01

299

[INPUT BOX] 정규식을 이용한 콤마(comma) 제거

운영자

3 / 0

9950

2008-11-28

298

[INPUT BOX] 정규식을 이용한 실시간 콤마(comma) 넣기

운영자

13 / 2

19927

2008-11-21

297

[CHECKBOX] 그룹별 전체 체크하기!

운영자

1 / 0

5820

2008-11-17

296

[KEYBOARD] 키보드를 누르면 키보드키 사용을 금지합니다.

운영자

0 / 0

3930

2008-11-17

295

[ETC] 즐겨찾기에 추가하기 (#2)

운영자

0 / 0

3588

2008-11-16

294

[SCROLL] 버튼을 누르면 텍스트 내용이 스크롤됩니다.

운영자

0 / 0

4684

2008-11-13

293

[INPUT BOX] 페이지 시작시 텍스박스로 포커스가 바로 이동합니다.

운영자

0 / 0

4887

2008-11-13

292

[INPUT BOX] 숫자외에 입력은 없어집니다.

운영자

0 / 0

3632

2008-11-01

291

[SELECT] 해당 셀렉트 박스 선택하면 테이블 보여주기

운영자

0 / 0

8659

2008-10-25

290

[SCROLL] 스크롤 업

운영자

0 / 0

4444

2008-10-24

[1] [2] 3 [4] [5] [6] [7] [8] [9] [10]

JavaScript 흐르는 텍스트 CSS 텍스트 롤링 CSS 전광판 효과 돌아가는 텍스트 롤링배너 만들기

텍스트 가로 롤링 - tegseuteu galo lolling

marquee태그를 사용해 텍스트를

우에서 좌로, 아래에서 위로 움직여 보겠습니다.

가로세로 여백 속성과, 움직이는 방향속성, 스크롤되는 양속성을 활용했습니다.

marquee의 속성입니다. 속성값을 활용해 다양하게 옵션을 활용할수 있습니다.

관련 게시물

홈페이지 html 수정 - hompeiji html sujeong

Javascript 화면 캡쳐 방지 - Javascript hwamyeon kaebchyeo bangji

자바 변수 여러개 출력 - jaba byeonsu yeoleogae chullyeog

오토 핫키 게임 픽셀 서치 - oto haski geim pigsel seochi

안드로이드 자바스크립트 리턴값 - andeuloideu jabaseukeulibteu liteongabs

블렌더 한글 텍스트 - beullendeo hangeul tegseuteu

일러스트레이터 텍스트 도형 - illeoseuteuleiteo tegseuteu dohyeong

Javascript 자식 노드 찾기 - Javascript jasig nodeu chajgi

포토샵 폰트 삭제 - potosyab ponteu sagje

디스 코드 취소 선 - diseu kodeu chwiso seon

광고하는

최근 소식

혼다어코드 보험료 - honda-eokodeu boheomlyo

인퀴 지션 도안 모드 - inkwi jisyeon doan modeu

잘 살아라 그게 최고의 복수다 ebook - jal sal-ala geuge choegoui bogsuda ebook

포토샵 레이어 클릭 안됨 - potosyab leieo keullig andoem

갤럭시 탭 S6 공장 초기화 - gaelleogsi taeb S6 gongjang chogihwa

불성 애드온 모음 - bulseong aedeuon mo-eum

자이스토리 1-2 답지 해설 - jaiseutoli 1-2 dabji haeseol

디즈니 플러스 정지 - dijeuni peulleoseu jeongji

로아 레일리 커마 - loa leilli keoma

국내 이륜차 시장 규모 - gugnae ilyuncha sijang gyumo

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의