한국어

Programming

2020.10.05 16:06

marquee 태그 사용법

twin 주소복사
조회 수 2388 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

오늘은 마키(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>

 

가로 400픽셀 세로 50픽셀에 바탕 노랑, 폰트 사이즈는 6

 

 

- 참조하기 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>

 

한번에 16픽셀씩 움직입니다

 

 

위의 설명들을 참조하시어 다양한 예제들을 스스로 만들어 실습해보세요. 아주 재미있는 태그입니다.


List of Articles
번호 제목 글쓴이 날짜 조회 수
19 5대 웹브라우저, 그 이름과 로고의 의미  twin 2017.06.12 22631
» marquee 태그 사용법  twin 2020.10.05 2388
17 네트워크-IP주소 / Port Number (포트번호)  twin 2017.06.08 1846
16 HTML COLOR 색상표  twin 2019.01.08 1403
15 Server/Client, IP주소, 포트, Protocol, TCP, UDP  twin 2017.06.08 990
14 네트워크-내컴퓨터 ip주소 확인하는 법  twin 2017.06.08 984
13 HTML & JavaScript & CSS_CSS.pdf 일람표  twin 2017.05.30 831
12 내맘대로 꾸미는 블로그, 태그연습장을 활용  twin 2019.01.08 714
11 컴퓨터 네트워크-TCP / UDP   twin 2017.06.08 650
10 웹표준 & html5 & css 관련 링크  twin 2018.09.06 606
9 코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.  twin 2019.09.02 596
8 html5 게임 들여다 보기  twin 2017.05.15 565
7 Color CSS name, hex code, or RGB values  twin 2017.05.08 561
6 네크워크 기본 용어  twin 2017.06.08 557
5 소스코드 정렬 사이트  twin 2019.08.29 527
4 2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)  twin 2021.03.10 343
3 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)  twin 2020.06.22 288
2 웹 개발자가 되기 위한 학습 로드맵  twin 2021.03.10 247
1 태그로 유트브를 연결하기  twin 2020.09.11 230
Board Pagination Prev 1 Next
/ 1