한국어

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. 5대 웹브라우저, 그 이름과 로고의 의미

  2. No Image 05Oct
    by twin
    2020/10/05 by twin
    Views 2278 

    marquee 태그 사용법

  3. 네트워크-IP주소 / Port Number (포트번호)

  4. HTML COLOR 색상표

  5. No Image 08Jun
    by twin
    2017/06/08 by twin
    Views 960 

    네트워크-내컴퓨터 ip주소 확인하는 법

  6. Server/Client, IP주소, 포트, Protocol, TCP, UDP

  7. No Image 30May
    by twin
    2017/05/30 by twin
    Views 809 

    HTML & JavaScript & CSS_CSS.pdf 일람표

  8. 내맘대로 꾸미는 블로그, 태그연습장을 활용

  9. No Image 08Jun
    by twin
    2017/06/08 by twin
    Views 628 

    컴퓨터 네트워크-TCP / UDP 

  10. No Image 06Sep
    by twin
    2018/09/06 by twin
    Views 581 

    웹표준 & html5 & css 관련 링크

  11. No Image 02Sep
    by twin
    2019/09/02 by twin
    Views 578 

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

  12. No Image 08Jun
    by twin
    2017/06/08 by twin
    Views 534 

    네크워크 기본 용어

  13. No Image 15May
    by twin
    2017/05/15 by twin
    Views 533 

    html5 게임 들여다 보기

  14. No Image 08May
    by twin
    2017/05/08 by twin
    Views 531 

    Color CSS name, hex code, or RGB values

  15. No Image 29Aug
    by twin
    2019/08/29 by twin
    Views 502 

    소스코드 정렬 사이트

  16. No Image 10Mar
    by twin
    2021/03/10 by twin
    Views 320 

    2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)

  17. No Image 22Jun
    by twin
    2020/06/22 by twin
    Views 265 

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

  18. No Image 10Mar
    by twin
    2021/03/10 by twin
    Views 231 

    웹 개발자가 되기 위한 학습 로드맵

  19. No Image 11Sep
    by twin
    2020/09/11 by twin
    Views 211 

    태그로 유트브를 연결하기

Board Pagination Prev 1 Next
/ 1