움직이는 글씨방향

쿠욱키 2005. 10. 29. 17:57

글씨가 움직이는 경로를 한번 바꿔봅시다..
항상...글씨는 왼쪽을 향하여 진행하게 되는게 기본입니다.
하지만 우리가...글씨의 방향을 지정해 줄수 있습니다.

Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/m/4875104","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875104,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "/m", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "QHzKtN/kTJ0wjVaVLILd3KAu9sEDsNvbEODn7Tlzh285k92UlCpyXU47AAXJKCtz" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <title>글씨방향</title> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875104"/>  <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/m/4875104","name":null},"url":"https://pshto.tistory.com/m/4875104","headline":"움직이는 글씨방향","description":"글씨가 움직이는 경로를 한번 바꿔봅시다.. 항상...글씨는 왼쪽을 향하여 진행하게 되는게 기본입니다. 하지만 우리가...글씨의 방향을 지정해 줄수 있습니다. Tag 글씨방향 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 실행결과 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 'direction'은 방향..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T17:57:45+09:00","dateModified":"2005-10-29T17:57:45+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script>  </head> <body> <marquee direction=left> 글씨의 방향 </marquee><br><br> <marquee direction=right> 글씨의 방향 </marquee><br><br> <marquee direction=up> 글씨의 방향 </marquee><br><br> <marquee direction=down> 글씨의 방향 </marquee><br><br> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875104","customProps":{"userId":"0","blogId":"5625759","entryId":"4875104","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875104","entryTitle":"움직이는 글씨방향","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/m/4875104","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

실행결과

글씨의 방향

글씨의 방향

글씨의 방향

글씨의 방향

'direction'은 방향을 정해주는 명령어입니다.
당연히 left는 왼쪽을 향하여...right는 오른쪽을 향하여... up은 위를 향하여..down은 아래로 향하여...글씨가 진행하게 되겠져..^^;; 항상 기본값은 왼쪽을 향해서입니다. ^^;;

그럼...marquee 영역부분에 배경색을 한번 넣어보겠습니다.
우선 모든 태그안에 배경색을 넣어줄때는..똑같은 명령어를 써줍니다.
화면표시영역에..즉..body부분에 배경색 넣어줄때도 똑같고...나중에 table도 배우실텐데.. 테이블안에 배경색을 넣어주는것도 똑같습니다. marquee도 마찬가집니다..
명령어는 bgcolor(backgroundcolor)를 쓰져~! 형식은 bgcolor="색명 또는 RGB색상코드" 입니다.
그럼..아래를 한번 보겠습니다...^^;;

Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/m/4875104","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875104,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "/m", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "QHzKtN/kTJ0wjVaVLILd3KAu9sEDsNvbEODn7Tlzh285k92UlCpyXU47AAXJKCtz" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <title>움직이는글씨 배경색</title> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875104"/>  <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/m/4875104","name":null},"url":"https://pshto.tistory.com/m/4875104","headline":"움직이는 글씨방향","description":"글씨가 움직이는 경로를 한번 바꿔봅시다.. 항상...글씨는 왼쪽을 향하여 진행하게 되는게 기본입니다. 하지만 우리가...글씨의 방향을 지정해 줄수 있습니다. Tag 글씨방향 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 실행결과 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 'direction'은 방향..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T17:57:45+09:00","dateModified":"2005-10-29T17:57:45+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script>  </head> <body> <marquee bgcolor=yellow> 움직이는글씨 배경색 </marquee><br><br> <marquee bgcolor=skyblue> 움직이는글씨 배경색 </marquee><br><br> <marquee bgcolor=ivory> 움직이는글씨 배경색 </marquee><br><br> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875104","customProps":{"userId":"0","blogId":"5625759","entryId":"4875104","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875104","entryTitle":"움직이는 글씨방향","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/m/4875104","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

실행결과

움직이는글씨 배경색

움직이는글씨 배경색

움직이는글씨 배경색

글씨가 움직이는 공간에..색이..들어가 있을겁니다..^^

또...
글씨의 반복 횟수와...marquee의 세로너비와 가로 너비를 정해줄수 있습니다.
그럼 아래를 또 보시져..^^;;

Tag

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/m/4875104","DEFAULT_URL":"https://pshto.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875104,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "/m", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "QHzKtN/kTJ0wjVaVLILd3KAu9sEDsNvbEODn7Tlzh285k92UlCpyXU47AAXJKCtz" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <title>글씨..</title> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-e016e2afd99ce1d1f632c094ef82d280627100a3/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875104"/>  <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/m/4875104","name":null},"url":"https://pshto.tistory.com/m/4875104","headline":"움직이는 글씨방향","description":"글씨가 움직이는 경로를 한번 바꿔봅시다.. 항상...글씨는 왼쪽을 향하여 진행하게 되는게 기본입니다. 하지만 우리가...글씨의 방향을 지정해 줄수 있습니다. Tag 글씨방향 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 실행결과 글씨의 방향 글씨의 방향 글씨의 방향 글씨의 방향 'direction'은 방향..","author":{"@type":"Person","name":"쿠욱키","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2005-10-29T17:57:45+09:00","dateModified":"2005-10-29T17:57:45+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script>  </head> <body> <marquee loop=1> 움직이는글씨 </marquee><br><br> <marquee loop=3> 움직이는글씨 </marquee><br><br> <marquee loop=50> 움직이는글씨 </marquee><br><br> <marquee width=200 bgcolor=yellow>움직이는 글씨</marquee><br><br> <marquee width=50% height=50 bgcolor=yellow>움직이는 글씨</marquee> <br><br> <marquee width=400 height=100 bgcolor=yellow direction=up> 움직이는 글씨</marquee> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875104","customProps":{"userId":"0","blogId":"5625759","entryId":"4875104","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875104","entryTitle":"움직이는 글씨방향","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/m/4875104","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

실행결과

움직이는글씨

움직이는글씨

움직이는글씨

움직이는 글씨

움직이는 글씨

움직이는 글씨

loop는 글씨의 반복횟수를 말합니다.
loop=1은 한번만 반복해라...loop=3은 3번만 반복해라...50은 50번..100은 100번을 반복합니다.
width는 글씨가 움직이는 스크롤부분의 가로 너비를 정해주는 명령어 입니다. 단위는 픽셀단위이고...width=200은 200픽셀만큼의 가로 너비다 라는 말입니다. 우리가 100%를 기준으로 %를 지정할수도 있습니다..전체에서..50% 만큼만 가로 너비로 지정할수 있습니다.
height도 마찬가지고여....^^;;

정리해서 써드리겠습니다...

명령어	설명
direction	스크롤 되는 방향을 정해줌 left(왼쪽),right(오른쪽),up(위쪽),down(아래쪽)
bgcolor	움직이는 글씨 공간의 배경색지정됨. 색명,RGB색상코드값
width	스크롤부분의 가로 너비를 정해줌 수치, % (예, width=500 또는 width=50%)
height	스크롤부분의 세로 너비를 정해줌 수치 (예, width=50)
loop	글씨의 반복횟수를 정함. 수치,infinite(무한반복) (예, loop=3 또는 loop=infinite)