한국어

Programming

2020.10.05 16:06

marquee 태그 사용법

twin 주소복사
조회 수 2278 추천 수 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픽셀씩 움직입니다

 

 

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


  1. 태그로 유트브를 연결하기

    Date2020.09.11 Bytwin Views211
    Read More
  2. 코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.

    Date2019.09.02 Bytwin Views578
    Read More
  3. 컴퓨터 네트워크-TCP / UDP 

    Date2017.06.08 Bytwin Views628
    Read More
  4. 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)

    Date2020.06.22 Bytwin Views265
    Read More
  5. 웹표준 & html5 & css 관련 링크

    Date2018.09.06 Bytwin Views581
    Read More
  6. 웹 개발자가 되기 위한 학습 로드맵

    Date2021.03.10 Bytwin Views231
    Read More
  7. 소스코드 정렬 사이트

    Date2019.08.29 Bytwin Views502
    Read More
  8. 네트워크-내컴퓨터 ip주소 확인하는 법

    Date2017.06.08 Bytwin Views960
    Read More
  9. 네트워크-IP주소 / Port Number (포트번호)

    Date2017.06.08 Bytwin Views1821
    Read More
  10. 네크워크 기본 용어

    Date2017.06.08 Bytwin Views534
    Read More
  11. 내맘대로 꾸미는 블로그, 태그연습장을 활용

    Date2019.01.08 Bytwin Views688
    Read More
  12. Server/Client, IP주소, 포트, Protocol, TCP, UDP

    Date2017.06.08 Bytwin Views959
    Read More
  13. marquee 태그 사용법

    Date2020.10.05 Bytwin Views2278
    Read More
  14. html5 게임 들여다 보기

    Date2017.05.15 Bytwin Views533
    Read More
  15. HTML COLOR 색상표

    Date2019.01.08 Bytwin Views1328
    Read More
  16. HTML & JavaScript & CSS_CSS.pdf 일람표

    Date2017.05.30 Bytwin Views809
    Read More
  17. Color CSS name, hex code, or RGB values

    Date2017.05.08 Bytwin Views531
    Read More
  18. 5대 웹브라우저, 그 이름과 로고의 의미

    Date2017.06.12 Bytwin Views22600
    Read More
  19. 2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)

    Date2021.03.10 Bytwin Views320
    Read More
Board Pagination Prev 1 Next
/ 1