[HTML/CSS] 움직이는 글자 <marquee>태그!!

    웹 문서에서 글자를 돋보이게 하기 위해 <marquee>태그를 사용 할 수 있어요. 간판의 "네온사인" 같은 느낌을 낼 수 있지만 사실 요즘에는 gif이미지로 표현 하는것이 훨씬 자유롭고 멋지게 만들 수 있기 때문에 요즘에는 거의 사용하지 않는 태그에요.

     

     

    <marquee></marquee> 마퀴태그

    태그

    속성

    속성값

    비고

    marquee

     align

     위치

     top / middle / bottom

     width/height

     숫자

     가로, 세로 보여줄 범위

     hspace/vspace

     숫자

     텍스트 바깥 여백

     behavior

     scroll  가로로 지나감(기본값)
     slide  한쪽 끝에 닿으면 멈춤
     alternate  범위 안에서 왕복
     direction

     방향

     up / down / left / right
     scrolldelay

     숫자

     지연속도 1/1000초, 클수록 느려짐 

     scrollamount

     숫자

     한번에 움직일 픽셀수, 클수록 빨라짐

     loop

     숫자

     반복횟수 infinite(기본값) 

     bgcolor

     색상코드

     0000FF, FFFFFF 등등

    <marquee loop="3" direction="right" bgcolor="00FFFF">3번만 반복해요.</marquee>

    3번만 반복해요.

     

    <marquee behavior="slide" scrolldelay="200">끝에서 멈춰요</marquee>

    끝에서 멈춰요

     

    <marquee behavior="alternate" scrollamount="200">속도가 빨라요</marquee>

    속도가 빨라요

     

    <marquee width="100" height="100" direction="up" bgcolor="0EE487" behavior="alternate">범위 안에서</marquee>

    범위 안에서

     

    * 마퀴태그를 응용하면 이런것도 가능해요.

     

    <marquee behavior="alternate" direction="up" width="670" height="70" bgcolor="ffbebe" scrollamount="8"><marquee behavior="alternate" scrollamount="4">●</marquee></marquee>

     

     

     

     

    < 연습하기 >

     

    w3스쿨js피들

     

     

     

     

    Posted by 옹봉이