가장 많이 수정하고 이용하는 소스부터 써내려보겠습니다.

사이드바의 크기 변경하는 소스는, 스타일시트에서
 #side_lt    {width:200px; float:left; }
 #side_rt    {width:200px; float:right;}
이 소스입니다.

저는 사이드바가 양쪽에 있기 때문에, 두개로 설정되지만, 한개이신분들도 많이 계십니다.
저 사이드바의 명은 스킨을 제작하신 분 나름대로 지정하여 설정되어있는데,
사이드바의 지정 이름을 알아내는 방법은, skin.html 에서 <div id="sidebar"> 를 찾아보시면, 한두줄 위에 <div id="side_lt"> div id="~~~~~" 이 있습니다.
저 밑줄친 부분이 사이드바 지정 명입니다.
저 이름을 그대로 복사하신 후, style.css 에서 ctrl + F 를 통해 찾아보시면 됩니다.
width:200px; 에서 밑줄친 숫자 부분만 변경하면 됩니다.

익스플로러 6인 컴퓨터에서는 사이드바에서 크기가 조금이라도 넘어가는 이미지나 위젯이 있으면, 사이드바가 제일 아래로 내려가버리는 현상이 보여지신다고 하시더군요..;
제가 익스 7이라 시험해보지는 못했지만,

<div id=" ~~~~~ " style="scrolling:auto; overflow-x:scroll;">
밑줄친 부분은 위에서 알아내신 사이드바의 이름을 넣어주시면 됩니다.
<div id="~~~~~"> 여기에서, <div id="~~~~~" 여기에>style="scrolling:auto; overflow-x:scroll;"
이것만 붙여주시면 됩니다.

이 소스를 한번 넣어보시길 바랍니다.
안된다면 알려주시기 바랍니다..;; ( 실험해보지 않았으니, 해결될거라는 보장은 못하겠습니다.. 꾸벅..; )
안되면, style="scrolling:auto; overflow-x:scroll;"
이 부분만 지워주시면 됩니다.


자주 사용하거나, 언제든지 간편하게 떼어냈다, 붙였다 할수있게 설정하는 소스를 소개해보겠습니다.

일단, skin.html 에서 <s_sidebar> 를 찾습니다.
그 후, 바로 아랫줄에,

<s_sidebar_element>
<!-- 보여질 제목 -->
내용.. (반드시 소스로 넣어주셔야 합니다.)
</s_sidebar_element>

위의 형식의 소스를 넣으시면 됩니다.
밑줄친부분만 수정해서 넣으시면 됩니다.
복수적용 되며, 여러개, 갯수제한없이 넣으실 수 있습니다.


흐음,,
사이드바에 대한건 이제.. 자주 쓰이는 설정할만한게 없네요..;;
질문, 받습니다~~^^,,,

다음에는 포스트부분에서 자주 쓰이는 소스를 써내려봐야겠네요~
Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon demun 2009.03.06 01:13 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 안그래도 사이드바의 크기를 넓히고 싶어서 찾던중 여기를 들리게 됐네요
    궁금한점 알려줘서 고맙습니다.
    근데 질문이 하나 있습니다.
    위에 글대로 사이드바의 이름을 알아냈습니다.<div id="paging">
    사이드바의 이름은 paging 인데 style.css 에서 찾아보니까 관련 글이 많아서 뭔지를 모르겠네요.
    #paging { padding-top:10px; text-align:center; font-size:0.95em;}
    #paging .numbox { font:0.95em verdana; padding: 0 18px; }
    #paging .num span { border:1px solid #eee; width: 23px; height: 23px; padding: 2px 5px; margin-right: 3px; }
    #paging .num span.selected { background-color: #ffefe5; border-color: #ff6b00; color: #333; }
    #paging a { text-decoration: none; }
    #paging #prevPage { background:url(images/btn_page_pre.gif) left 0 no-repeat; height: 23px; padding-left:9px;}
    #paging #nextPage { background:url(images/btn_page_next.gif) right 0 no-repeat; height: 23px; padding-right:9px;}
    이중에 어떤 부분을 수정해야 사이드바의 크기를 넓힐수 있나요?

    • BlogIcon 승호/ 2009.03.06 22:07 신고  댓글주소  수정/삭제

      답변이 늦어서 정말 죄송합니다..;;
      ..;; 잘못찾으신듯하네요~
      페이징부분을 찾으셨는데...;;;
      보통 사이드바는 side 혹은 sidebar 로 설정되어있답니다~^^,,,

    • BlogIcon demun 2009.03.07 00:27 신고  댓글주소  수정/삭제

      아 네 제가 잘못 알앗군요.
      전 그냥 <div id="sidebar"> 나오니 사이드바 이름이 sidebar 인가 봅니다 ^^
      막 이것 저것 노가다해서 사이드바 너비를 넓혔는데 제 블로그에 보시면 rss아이콘 밑에 보시면 너비가 줄어들어요.

      그리고 사이드바 너비를 키우니까 위에서 말씀하신 것처럼 사이드바가 아래로 처져서 style="scrolling:auto; overflow-x:scroll;"
      삽입해 봣지만 rss아이콘밑에 스크롤바가 생기더군요.
      근데 마찬가지로 사이드바가 아래로 처지는것은 동일해요.

      혹 제 블로그에서 사이드바 너비가 rss아이콘 밑에서 줄어드는데 이 현상을 바로 잡는 방법은 아시는지요???

      그리고 저 같은 경우는 위에서 말씀하신것처럼 단순이 사이드바의 width 만 넓힌다고 되는것이 아니라 wrapContainer, container, header, sidebar등 모두 넓혀주거나 서로 조절을 해줘야 하는거 같더라구요...

      아주 노가다 열심히 했습니다.^^

    • BlogIcon 승호/ 2009.03.07 01:57 신고  댓글주소  수정/삭제

      아.. 그렇네요..;;; 제 블로그 기준으로 잡아버려서 컨테이너나 헤더 영역을 생각하지 못했습니다..;; 죄송합니다~.. ( 나중에 내용추가해서 다시 쓰도록 하겠습니다~ 감사합니다~^^ )

      소스 열심히 쳐다봤습니다만..;
      문제점을 찾지 못했습니다..;;
      사이드바의 영역이 끝날때까지 크기가 계속 유지되어야하는데, 마지막 사이드바 아이템에서 사이드바 영역이 끝났다고 생각되네요...;;;

      .. 사이드바에서 어긋나는 문법이 있을 가능성이 가장 크다고 생각됩니다.
      사이드바의 소스를 수정하시거나, 다른 블로그를 만들어, 테스트해보심이 어떠신가요..?
      ( 실패가능성도 있으니, 스킨은 미리미리 백업해두시는걸 권장합니다~..; )

      ..도움이 못되어드려 정말 죄송합니다~.. ㅠㅠ///

    • BlogIcon demun 2009.03.07 18:37 신고  댓글주소  수정/삭제

      사이드바 문법,소스는 공부를 좀 더 해야겠네요.
      도움이 못되다니요..괜찮습니다.
      나중에 스킨,소스에 대한 좋은 글 부탁드립니다.
      수고하세요.

    • BlogIcon 승호/ 2009.03.08 11:59  댓글주소  수정/삭제

      주말 잘보내세요~

  2. BlogIcon 파이먼군 2009.03.06 21:24 신고  댓글주소  수정/삭제  댓글쓰기

    포스팅 잘 봤습니다. ^^

하늘놀이터 스킨 v2.01

배경음악 플레이어를 사용하실분만 업데이트 해주세요
( 배경음악은 페이지를 이동해도 끊기지 않습니다. 자동재생 설정되어있습니다. 설정값은 바꾸실 수 있습니다. )
( 사용하시려면 약간의 소스수정이 필요합니다. 꼭 끝까지 잘 읽고 따라해주세요 )

스킨 적용 미리보기 : http://stes.tistory.com
( 배경음악 플레이어의 상태가 에러인 이유는 제가 아직 음악추가를 하지 않았기 때문입니다. 설치한 직후의 상태를 보여주기 위해 음악추가 하지 않았습니다. 음악을 넣는다면 정상적으로 작동하니, 안심하시고 사용하시기 바랍니다. )


사이드바는 무엇이든지 떼거나 붙이실 수 있습니다. 그리고 위치변경도 가능합니다.
사이드바 스킨 기본 모듈 중, 스킨 버젼 현황은 업데이트 하신 후 떼주시면 됩니다.
 ( 업데이트를 하지 않더라도 떼셔도 됩니다. )
사이드바 스킨 기본 모듈 중, 인기음악 모듈과 추천도서 모듈은 사용하지 않으셔도 됩니다.
사이드바의 설정은 자유입니다.
스킨 수정은 얼마든지 가능합니다.

스킨 적용하신분들은 댓글을 남겨주세요~ 그리고, 개선 사항도 남겨주시면 감사하겠습니다~^^,,
 -( 스킨 적용 확인과, 다음 스킨 제작에 큰 도움이 됩니다~ )

개선 사항이나 수정 사항이 있으면 스킨기본 사이드바의 스킨 버젼 현황 이미지가 '업데이트 필요' 로 바뀌게 됩니다.
되도록이면 새로운 버젼으로 업데이트 될때마다 스킨을 교체해주시면 감사하겠습니다~

2.01버젼, 배경음악 추가 버젼입니다.
배경음악 플레이어를 사용하실분만 업데이트 해주세요


설치 방법을 알려드리겠습니다...
설치 방법을 그대로 따라하기 전에 먼저 한번 끝까지 읽으신 후, 설치하시기 바랍니다.

1. 먼저 아래의 파일을 받아주세요.


2. 압축을 풀어주세요
3. 설치하실 블로그의 기본 스킨파일을 모두 삭제한 후, 적용 을 눌러주세요
자신의 블로그 주소/owner/skin?_k=&layout=up  의 위치로 들어가셔서
아래쪽에 내려가면 보이는
사용자 삽입 이미지
파일들을 모두 지워주세요... ( 스킨마다 업로드되어있는 파일은 모두 다르기때문에 파일 이름 상관없이 모두 삭제해주세요 ) 그리고 아래의 적용 버튼을 눌러주세요

4. 새로고침 하신 후, 받은 파일을 업로드해주세요
사용자 삽입 이미지
받은 폴더 안에서 모든 파일을 선택하신 후, 열기 를 눌러주세요

5. 기본 설정 , 사이드바 설정을 해주세요
자신의 블로그 주소/owner/skin/sidebar
자신의 블로그 주소/owner/skin/setting

6. 타이틀 이미지, 등 이미지를 바꿔주세요
타이틀 이미지 외의 이미지는 그냥 사용하셔도 무관합니다.
타이틀 이미지는 크기가 크더라도 밖으로 벗어나지 않고 짤리게 됩니다.






7. 이제, BGM 설정 방법입니다.

다운받으신 파일 안에 index.html 파일이 있습니다.
연결 프로그램에서 메모장을 선택하신 뒤, ctrl + f 를 이용하여
// 여기서부터는 음악 삽입 소스입니다.
를 찾아주세요
그리고,
addbgm("               음악 파일 주소..                     ","         표시할 부분.. 제목이나 아티스트         ");
를 수정해주세요
음악 파일 주소는 http:// 를 포함한 모든 주소를 적으셔야 합니다.
만약 주소 중, 파일 형식도 들어있다면, 파일 형식도 적어넣으셔야 합니다.

이 외에 수정 사항은   // 수정해주세요 의 아랫부분에 설명도 적어놓았습니다.
꼭 수정하실 필요는 없습니다. 다만, 음악파일은 꼭 넣어주셔야 정상적으로 작동합니다.
음악파일의 주소를 정확히 적어넣으셔야 합니다. 주소창에 음악 파일 주소를 넣어보시고 정상적으로 다운로드 되면, 써넣어주세요/..
다 써넣으신 후, 저장, 그리고 티스토리 스킨파일 업로드 ( 자신의 블로그 주소/owner/skin?_k=&layout=up )
에 들어가셔서 index.html 파일을 다시 업로드해주세요~^^,,

실패하신분 계시면 도와드리도록 하겠습니다~^^



모든 설치가 끝났습니다.
- 스킨이 제대로 보이지 않을 경우, 인터넷 임시 파일을 모두 삭제하신 후, 익스플로러 창을 껐다 켜시면 됩니다.



주로 바꾸시게 될 이미지로는

title.jpg , p_bgimg.gif , post_bottom_bg.gif , comment_list_bg.gif , guest_list_bg.gif , comment.jpg , comment_guest.jpg

등이 있습니다.
이제, 이미지 크기를 알려드리겠습니다.
title.jpg => 1000 x 180
      ( 이보다 작지만 않으면 됩니다. 이미지가 작으면 반복되어 보여집니다.
         이미지가 크더라도 이미지는 타이틀 영역을 벗어나지 않고 짤려보여지게 됩니다. )
p_bgimg.gif => 100 x 100

      ( 패턴이미지이므로 가로, 세로 이어지기만하면 됩니다. 따라서, 이미지 크기는 자유입니다. )
post_bottom_bg.gif => 630 x 973
      ( 세로 480px 정도부터 973px 까지는 해상도에 따라 차이가 있습니다. 해상도가 낮은 컴퓨터에서는 짤려보이게 됩니다.
         세로 480px 을 권장합니다. 그러나, 973px 까지는 빈 공간을 두셔서라도 크기를 맞춰주시는게 좋습니다. )
comment_list_bg.gif => 250 x 557
      ( 세로 370px 정도부터 557px 까지는 해상도에 따라 차이가 있습니다. 해상도가 낮은 컴퓨터에서는 짤려보이게 됩니다.
         세로 370px 을 권장합니다. 그러나, 557px 까지는 빈 공간을 두셔서라도 크기를 맞춰주시는게 좋습니다. )
guest_list_bg.gif => 250 x 370
comment.jpg => 580 x 140

       ( 더 큰 이미지를 쓰시더라도 무관합니다.
          단, 정렬방식은 오른쪽, 아래 로 설정하였으니, 이보다 큰 이미지를 사용할 경우, 오른쪽 아랫부분에 정렬되어 보이게 됩니다. )
comment_guest.jpg => 610 x 160
       ( 더 큰 이미지를 쓰시더라도 무관합니다.
          단, 정렬방식은 오른쪽, 아래 로 설정하였으니, 이보다 큰 이미지를 사용할 경우, 오른쪽 아랫부분에 정렬되어 보이게 됩니다. )

Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon 로리모에。 2009.02.07 20:57 신고  댓글주소  수정/삭제  댓글쓰기

    원래는 배경음악달기 글에 질문해야하지만..

    플레이어 오른쪽에 나오는 광고는 어떻게 삭제하나요?
    배경음악달기 글에도 삭제되지않은채 파일업로드 되어있던데..

    • BlogIcon 승호/ 2009.02.08 12:35 신고  댓글주소  수정/삭제

      예, 오른쪽 광고 페이지는 제 주소에서 로드하도록 했습니다.
      로리모에 님 블로그에는 오른쪽 프레임이 보이지 않도록 설정해드렸었던걸로 기억합니다~^^,,

    • BlogIcon 로리모에。 2009.02.08 13:02 신고  댓글주소  수정/삭제

      그러면 오른쪽프레임을 안보이게 수정한거를 따로 올려주시면 안될까요 ' ㅂ'? 나중에 쓸때가 있을지도 몰라서..(제 블로그에 비밀글로 올려주셔도 됩니다)

    • BlogIcon 승호/ 2009.02.08 13:53 신고  댓글주소  수정/삭제

      죄송합니다.
      재사용/수정 재배포 의 방지를 위해 오른쪽 프레임을 없앤 파일의 배포는 금지하고 있습니다.
      되도록 빠른 시일 내에 깔끔한 디자인으로 업데이트 하거나, 빈 프레임으로 업데이트 하도록 하겠습니다.

    • BlogIcon 로리모에。 2009.02.08 20:06 신고  댓글주소  수정/삭제

      그런가요 ' ㅂ'..
      어쨌든 감사합니다/

  2. BlogIcon 하늘치B 2009.06.19 14:01 신고  댓글주소  수정/삭제  댓글쓰기

    하늘놀이터 ㅎ 제 티스토리 이름이네염 ㅋ
    갑자기 급 관심도 상승 ㅎ-ㅅ-)/

  3. clearblog 2010.09.14 01:05  댓글주소  수정/삭제  댓글쓰기

    흐음.. 저도 한번 플레이어를 직접 만들어 보고싶네요.
    오늘 회원가입해서 이리저리 찾아 보는 것이 많네요.
    제게 어떤식으로 만드는지 좀 알려주실 수 있을까요?

    • BlogIcon 승호/ 2010.09.14 15:32 신고  댓글주소  수정/삭제

      html이나 플래시에 관한 지식은 어느정도 갖고계시지요,,?

      서투르시다면, 음악 플레이어가 아닌, 다른것들을 만들면서 연습한다음에 플레이어에 도전해보시길 바랍니다.

      액션스크립트부터 구조까지.. 보기엔 심플해보여도 속을 뜯어보면 상당히 복잡한 구조랍니다~^^;;;

  4. 2011.01.19 17:06  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.01.20 04:19 신고  댓글주소  수정/삭제

      에에,,;
      배포중인 스킨에 랜덤 스킨 기능은 없습니다~; (죄송합니다~;)

      자바스크립트로, 스타일시트의 일부를 랜덤으로 덮어씌우는 방식을 사용하고 있습니다~

      다른 웹 브라우저에서 테스트해보지 않았으므로, 충돌이 일어날 가능성이 적지않아 있습니다... 되도록이면 사용하지 마시길 권장합니다~^^;;

      추후에 테스트해보고 소스 더 수정하고 알려드리도록 할게요~

  5. 레퀴엘 2011.07.02 12:47  댓글주소  수정/삭제  댓글쓰기

    우왕 신기하네요 ㅎㅎㅎ
    잘쓰겠습니다!

    • BlogIcon 승호/ 2011.07.02 16:22 신고  댓글주소  수정/삭제

      레퀴엘 님//
      네~ 감사합니다~ 좋은주말되세요~^^
      // 엄청나게 오래된 스킨인데..; 정말 이걸로 괜찮으시겠어요;;? (엉성한부분이 한두군데가 아니라^^;;;)

  6. ㅇㅂㅇ 2011.07.02 12:50  댓글주소  수정/삭제  댓글쓰기

    잘쓰겠습니다
    그런데 기본스킨파일을 삭제하는 방법을 모르겠네요 ㅠㅠ;;

일별 방문자 수
2009/01/31                       5,384
2009/01/30 5,809
2009/01/29 7,437
2009/01/28 5,802
2009/01/27 2,316
2009/01/26 1,476
2009/01/25 2,366
2009/01/24 3,195
2009/01/23 4,190
2009/01/22 4,950
2009/01/21 1,950
2009/01/20 503
2009/01/19 1,259
2009/01/18 833
2009/01/17 518
2009/01/16 427
2009/01/15 1,037
2009/01/14 1,300
2009/01/13 1,213
2009/01/12 1,047
2009/01/11 1,314
2009/01/10 1,381
2009/01/09 1,594
2009/01/08 2,225
2009/01/07 1,202
2009/01/06 420
2009/01/05 397
2009/01/04 430
2009/01/03 351
2009/01/02 527
2009/01/01 400


갈수록 발전하고있답니다~,,
흐음,,, 그런데.. 제가 직접 만들고 써낸 포스트가 그리 많지 않았습니다...
1월에는 블로그 이용 시간 중, 절반을 스킨 연구(?) 에 투자했습니다.

2월에는 제 블로그 스킨을 통째로 공유해볼 생각입니다.
많은 분들이 아시다시피, 티스토리는 스킨을 마음대로 수정할 수 있습니다.
하지만, 어려운부분도 많았습니다...
이번에 올려볼 스킨으로는,,, skin.html 에 주석에 설명을 넣어, 쉽게 수정할수 있도록 설정할 예정입니다.
그리고, 타이틀 이미지, 전체 배경 이미지, 포스트 배경이미지, 안부게시판 배경이미지.. 등 지정된 파일명으로 스킨폴더에 업로드만 해두면, 따로 소스를 수정할 필요 없이, 쉽게 스킨을 수정할 수 있도록 해보려 합니다.

그리고, 사이드바에 여러가지 기능을 넣어볼 생각입니다.
이달의 베스트셀러 라던가, 인기 음악이라던가, 날씨, 구글 번역 등을 넣어볼 생각입니다..
또 뭔가 좋은게 있으면 넣어야겠죠,,,

스킨 자주 업데이트 하려 합니다.
적어도 한달에 한번 이상씩 으로 목표 잡고있습니다.
업데이트 알림을 위해 두가지 방법을 생각해 놓았지만.. 아직까지 어느 방법을 써야 하는지 모르겠네요..;
방법 하나는 스킨 달았을 시, "이메일 주소를 남겨주세요."
또는, 사이드바에 신버젼 / 구버젼 표시 이미지를 넣어보려 합니다.
최근 버젼으로 스킨을 다시 달았을 경우, 신버젼 표시 이미지가 보이도록,
그리고, 수정 하고 나서는 ~~~/owner/skin/sidebar 사이드바 설정에서 보이지 않게 하도록..
( 그다지 복잡한 방법은 아닙니다~... )

그리고,,,
티스토리 블로그를 이용하시는 많은 분들이 원하시던..
이동해도 끊기지 않는 배경음악...
3~5월 즈음에 업데이트하며 넣어볼 예정입니다...
물론, 플레이어도 같이 넣을겁니다...
배경음악 플레이어 사용 여부는...
소스의 '주석' 을 이용해보려 합니다.
자세히 설명해 둘 예정입니다...


// 재배포는 허락하지 않을 생각입니다.
스킨 다운로드는 꼭 제 블로그에서 하도록 할겁니다...


//흐음.. 스킨 제작/공유 가 블로그의 질 향상에 도움이 될지는 아직 잘 모르겠네요~^^,,

'잡담.......' 카테고리의 다른 글

오랫만에 잡담 (?)  (0) 2009.02.14
최저가 하드디스크 모음  (0) 2009.02.13
스킨 제작 거의 완료..?  (3) 2009.02.02
2009년 01월 통계  (2) 2009.02.01
2009년 1월 29일 블로그 현황.  (6) 2009.01.29
설연휴 끝  (0) 2009.01.27
최근의 알수없는 트래픽..? 그리고 잡담...  (6) 2009.01.24
Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon ru2l0v 2009.02.02 17:09 신고  댓글주소  수정/삭제  댓글쓰기

    님 투데이수가
    제 토탈보다도 많네요
    ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

<head> 와 </head>
사이 아무곳에나 넣어주시면 됩니다..


<!-- 글씨체 속성 시작 //-->
<style type="text/css">
<!--
@font-face {font-family:글씨체를 지정할 이름; src:url(글씨체 파일 주소);}
body,td,a,div,p,pre,input,textarea {font-family:글씨체를 지정할 이름; font-size:11;}
-->
</style>
<!-- 글씨체 속성 종료 //-->


이렇게 수정하시고 나서,,
아래의 스타일시트부분도 수정해야합니다<<
글씨체가 적용되있는부분들..
dotum 이나 굴림 등... 의 기본 글씨체들 앞에 글씨체를 지정할 이름 을 넣어주세요<<
티스토리 글씨체 바꾸기 , 티스토리 글씨체 바꾸는 방법
적용방법은
관리자 페이지 => 스킨 => HTML / CSS 편집 => skin.html
이 부분에서 <head> 와 </head> 사이 아무곳에나 넣어주시면 됩니다..
글씨 크기는 마음대로입니다<<
글씨체에 따라서 잘 맞춰주시길...

글씨체 파일은 TTF 파일확장자가 아닌 웹폰트 확장자..
eot 로 올려야 적용됩니다//!!
eot 웹폰트 확장자 글꼴파일을 티스토리에 올리신 후에 절대주소 로 링크시켜줍니다.. ( http:// 주소 )

TTF 확장자에서 eot 확장자로의 파일변환은 좀더 나중에 알려드리겠습니다<<
그때까지의 준비물!!

Microsoft WEFT

파일입니다!!
설치 끝내셨으면,, 덧글 부탁드립니다<<
자세히 설명드리겠습니다<<

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
Posted by 승호/

댓글을 달아 주세요

  1. 진영아 2008.04.16 23:20  댓글주소  수정/삭제  댓글쓰기

    고마워요

  2. BlogIcon Syl 2008.04.17 00:50 신고  댓글주소  수정/삭제  댓글쓰기

    아아.. 감사합니다 ㅇㅅㅇ;
    일단은 댓글 다는곳에 그림넣었습니다~~

  3. BlogIcon 브레군 2009.01.04 12:50 신고  댓글주소  수정/삭제  댓글쓰기

    근데 ttf를 eot로 어떻게 바꾸죠?
    알아 보니깐 무슨 프로그램이 있다는데 없네요...

    • BlogIcon 승호/ 2009.01.04 21:21 신고  댓글주소  수정/삭제

      안녕하세요~^^ 들러주셔서 감사해요~^^

      ttf를 eot 웹픈트파일로 바꾸시려면
      Microsoft WEFT 프로그램을 이용하시면 됩니다~^^

  4. BlogIcon 브레군 2009.01.04 21:32 신고  댓글주소  수정/삭제  댓글쓰기

    WEFT라는 프로그램이 없다능...

<HTML>
 <HEAD>
   <TITLE> 링크에 마우스가 올라가면 링크가 무지개색으로 계속 변하는 스크립트. </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!---//
var rate = 20;  // Increase amount(The degree of the transmutation)
if (document.getElementById)
window.onerror=new Function("return true")

var objActive; 
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 125; // Saturation
var elmV = 255; // Value
var clrOrg;    
var TimerID;  


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
  }
}

function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
  }
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
 }

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
   }
 }
}

function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
    }
  }
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
        }

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
        }
    }
}


function ChangeColor()
{  objActive.style.color = makeColor(); }


//  색상제어
function makeColor()
{
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}
//--->
</script>

</HEAD>

<BODY>

<b>아래의 링크에 마우스를 올리면 링크가 무지개색으로 표시됩니다...</b><p>
<H3> <a href=http://jihansome.tistory.com/> 블로그 </a> </H3>
<H4> <a href=http://www.tistory.com> 티스토리 </a> </H4>
<H5> <a href=http://www.naver.com> 네이버 </a> </H5>

</BODY>
</HTML>



이 방법 말고도 js 파일을 따로 넣는방법도 있는데요...
일단은...
이 방법대로만 해봅시다...///
제 블로그에도 링크가 무지개색으로 변하는데...
저는 플러그인... 썼어요;;;; ㄷㄷ///
왠지 관리하기가 불편해질거같았기에;; ㅎㅎ;;;
티스토리에서는 js파일을 직접 링크시켜 넣었더군요..

<body> 와 </body> 사이에 넣어주세요<<

<script language=javascript src="http://cfs.tistory.com/blog/plugins/RainbowLink/rainbow.js" type="text/javascript"></script>

이걸 직접 넣으면...
마우스가 링크 위에 올라왔을때, 링크가 무지개색으로 변합니다...

재미있는 공부 되셨는지요...


Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon 하늘치B 2008.08.18 21:32 신고  댓글주소  수정/삭제  댓글쓰기

    긁기가 안되요 -ㅁ=!;;;;;ㅠㅠ

  2. BlogIcon 하늘치B 2009.01.08 19:09 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 감사해요 ^^

  3. BlogIcon Lemon27 2009.09.20 14:25  댓글주소  수정/삭제  댓글쓰기

    님.. 이거 네이버블로그에는 안되는거죠? 네이버가 자바스크립트 막아놨다던데...
    방법이 없을까요?? 아 요즘들어 자꾸 티스토리로 이사가고싶네요^^;;

    • BlogIcon 승호/ 2009.09.20 23:22 신고  댓글주소  수정/삭제

      네, 네이버 블로그 / 카페에서는 스크립트의 사용이 불가능합니다,
      아 티스토리로 이사오시고싶으시면, http://jihansome.tistory.com/guestbook 에 비밀글로 이메일주소 남겨주세요~ 초대장 보내드리겠습니다~^^

  4. BlogIcon degi 2011.06.29 19:51 신고  댓글주소  수정/삭제  댓글쓰기

    무지개 플러그인쓰면 전체가 다 ㅁㄴㅇㄹ 무지개색으로 변해서
    저는 일부만 하고 싶지만 귀찮아서 ㅁㄴㅇㄹ

    • BlogIcon 승호/ 2011.06.29 20:40 신고  댓글주소  수정/삭제

      degi 님//
      ㅎㅎ 전 익숙해졌달까... 무지개링크가 로딩시간 엄청 차지해도 뭐랄까... 차별화된 느낌이랄까요 ㅋㅋ~? (보급률 대단한 네이버 블로그엔 이런기능이 없잖아요~ ㅋㅋ~?)

    • BlogIcon degi 2011.06.30 09:53 신고  댓글주소  수정/삭제

      로딩시간이야 뭐 엄청나게까진 늘어나진 않아요 ㄷㄷ;;;;
      텍스트 링크로 이동되는 부분만 무지개색으로 변경시켜주는거니
      ㅁㄴㅇㄹ 여튼 간지나죠?? ㅋㅋㅋ

    • BlogIcon 승호/ 2011.06.30 16:11 신고  댓글주소  수정/삭제

      degi 님//
      조만간에 그냥 떼내려구요... ;ㅁ;
      링크에 마우스 올리면 뭔가 좀더 확 티나게 바뀌는 효과를 내고싶어졌어요.. ;ㅁ;

이번에는 저번에 배웠던 프레임셋에 대해서.
연습만 해봅시다,,<<
<head> </head> 사이에 넣어주세요<<
src=" _____ "                ___사이의 주소는 바꿔서 사용합니다...
scrolling = "no/yes/auto"   중에서 한가지 선택해주시고요
frame name =" ___ "         ___ 사이의 지정 이름 바꿔서 사용하세요

-------------------------------------------------------------------


<frameset rows="50, *" border="0">
<frame name="nav" scrolling="no" src="http://www.naver.com
">
<frameset cols="200, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
</frameset>

 

--------------------------------------------------------------------


  <frameset rows="50, 100, *" border="0">
<frame name="nav
" scrolling="no" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>

 
--------------------------------------------------------------------


<frameset cols="200, *" border="0">
<frame name="nav" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>



--------------------------------------------------------------------


<frameset rows="*, 100" border="0">
<frameset cols="200, *">
<frame name="nav" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
 


--------------------------------------------------------------------


<frameset cols="200, *" border="0">
<frame name="nav
" scrolling="auto" src="http://www.naver.com
">
<frameset rows="100, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
</frameset>

 

--------------------------------------------------------------------


<frameset rows="50, *" border="0">
<frame name="nav
" scrolling="no" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
 

--------------------------------------------------------------------


<frameset rows="75, *, 75" border="0">
<frame name="nav" scrolling="no" src="http://www.naver.com
">
<frameset cols="190, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
<frame name="
da" scrolling="no" src="http://www.
daum.net">
</frameset>



--------------------------------------------------------------------

<frameset cols="*, 190" border="0">
<frameset rows="100, *">
<frame name="nav
" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>

--------------------------------------------------------------------
직접 해보시면서...
연구 해보셨는지요...


오늘도 수고하셨습니다~^^;;/

'html 태그 배우기' 카테고리의 다른 글

html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
Posted by 승호/

댓글을 달아 주세요

드디어 프레임셋까지왔군요,,,

지금까지 배웠던것부터 오늘의 프레임셋까지 완전히 다 배우셨다면..
웬만한 홈페이지는 만들기 가능할듯,, 싶네요;; ㅎㅎ///




html 프레임셋에 대해서...
일단은 개념부터 알아보죠,,<<
home.html, index.html, main.html  등과 같이...
페이지가 적어도 3개 이상은 되야 프레임셋을 쓸수있겠죠;;???
일단은...
올리시려는 웹호스팅 사이트에서 어느 파일명이 페이지의 메인이 되느냐..
그것부터 알아놓으시길..
드림위즈는 index.html 이 메인이 되구요,, (확실..)
컴내꺼에서는 hame.html 이 메인이 되는걸로 기억하고있습니다...;;

일단은 따라해봅시다...

<head> </head> 사이에 넣어주세요<<
<frameset cols="350, 100">
<frame name="left" src="http://www.naver.com">
<frame name="right" src="http://jihansome.tistory.com">
</frameset>


위의 프레임셋 예제소스에 대해서 설명부터 해보겠습니다..
첫번째 줄...
프레임셋 시작됬다......
<frameset cols="350, 100"> 은 프레임셋을 가로로 나누어라.. (cols)
그리고 왼쪽의 절대적 크기는 350 픽셀,, 그리고 나머지값 입니다,,

두번째줄...
프레임 이름은 left 로 지정하고 이 프레임의 문서는 네이버.. 를 나타내라.
라는 뜻이죠...
마찬가지로

세번째줄에서
프레임 이름은 right 로 지정하고 이 프렘의 문서는 제 블로그.. 를 나타내라.
라는 뜻이 되죠..

마지막 네번째줄은 프레임셋이 끝났다<<
라는 뜻이죠,,


좀 더 알아보겠습니다..
아래 태그는 <body> </body> 사이에 들어가야되는 소스입니다..
따로 html 기본 형식 잡아주시고,,
연습해보세요..

<a href="http://www.naver.com" target="right">네이버 메인</a>
<p>
<a href="http://jihansome.tistory.com" target="right">
승호의 블로그
</a>

.. 아까 저~기 위에서 프레임 이름... frame name 을 지정해주었죠..??
left는 네이버로,,
right 는 제 블로그로요...
그리고 여기에서 target 는 위에서 지정해준 이름을 써넣는겁니다..
네이버 메인이라는 문자를 클릭하면 제 블로그에서 링크가 열리게 되구요,,
승호의 블로그 라는 문자를 클릭하면 target 를 right 로 지정했기때문에 역시 제 블로그 페이지가 프레임셋에서 열리게 되겠죠<<
그럼 target 를 left 로 지정했었던 네이버 메인 페이지는 어떻게되느냐..
target 를 right 로만 지정해서 링크해놨기때문에 문자를 클릭하면 left 프레임은 네이버 메인인채로 가만히 있게되겠죠<<


ㅠㅠㅠㅠㅠㅠ
너무 횡설수설하는것같은;;;;; ㅈㅅㅇ.. ㅠㅠㅠ///
제 어휘력으로는;;? 설명하기가 좀 어려운부분이라서요/;;ㅠㅠ ㅈㅅㅇ;;//

일단은
프레임의 속성에 대해서 알아봅시다..

속성

설명

border="숫자"

중간선 두께. 0 추천합니다,,<<

cols="150, *"

가로로 나눌 때의 속성. 왼쪽몇.오른쪽몇. 이런식.(숫자,%,* 들로 씀)
숫자는 픽셀값(권장) 퍼센트는 창의 몇%로 할 것인가, *는 남는대로.

name="이름. 꼭! 영어로..."

메뉴에서 링크시킬 때 타겟(target="")에 적을 이름이 됩니다.

rows="숫자 또는 퍼센트 또는 *

세로로 나누겠다는 속성.

scrolling="셋중하나"

그 프레임칸에 스크롤바를 있게할지 없게할지 auto/yes/no 중 선택. [auto=알아서선택(초기값), yes=무조건보임 no=무조건없앰]

src="주소"

그 프레임에 처음에 나타나게 될 페이지의 주소.


대충 이런 속성들이 있습니다,,,,
예를 들어보죠,,

<head> </head> 사이에 넣어주세요~<<!

<frameset cols="200, *" border="0">
<frame name="
abc" scrolling="no" src="주소1
">
<frame name="bcde
" scrolling="auto" src="주소2
">
</frameset>

,,이렇게라던가...

 <frameset rows="50, *" border="0">
<frame name="
abc" scrolling="no" src="index.html">
<frameset cols="200, *">
<frame name="
bcdefg" scrolling="auto" src="menu.html">
<frame name="
cdef" scrolling="auto" src="home.html">
</frameset>

... 등과같이 여러개의 프레임을 넣을 수도 있습니다<<



프레임....
그냥 보시면서 이해간다...시는 분들도 많이 계실텐데요..
저도 여러번 연습해보면서 겨우 이해했습니다...
직접 연습 해보시면서...
이해 안가시는분들 덧글 달아주세요~^^

수고하셨습니다~<<

'html 태그 배우기' 카테고리의 다른 글

html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
Posted by 승호/

댓글을 달아 주세요

이미지맵이란<<???

이미지 맵은 하나의 그림에 부분적으로 링크를 걸어서 각각 다른 경로로
링크시키는 것을 말합니다.

저번에 배웠던 이미지에 링크걸기 태그와는 꽤 많이 다르죠;;
훨씬 업그레이드됐다..;;
라고해야될까요;;?


아래 표는 이미지 맵에서 사용되는 영역 ( Area ) 을 정의하는 형태 ( Shape ) 의 속성입니다..
잘 기억해두시길....

shape="rdct"

 사각형

shape="circle"

 원

shape="poly"

 다각형


예를 들어보겠습니다..
보라색 글씨부분만 바꿔서 사용하세요<<

 <img src="이미지 파일 주소" usemap="이미지 맵">
   
<map name="이미지 맵">
          <area shape="rect" coords="
181, 176, 387, 273" href="http://jihansome.tistory.com/" target="_blank">
          <area shape="circle" coords="
284, 65, 56" href="http://www.naver.com" target="_blank">
          <area shape="poly" coords="
131, 26, 169, 25, 209, 128, 35, 101, 63, 21" href="http://www.tistory.com/" target="_blank">
   </map>
    


이렇게 좌표를 적어서 태그를 만들수도 있는데요;;
이미지에 섬세하게 좌표를 적어서 링크걸기는 아무래도 손도 많이가는 그런 번거로움도 있겠네요..

개인적으로 나모웹에디터나 드림위버를 완전추천합니닷<<<

나모웹에디터에서 이미지맵 삽입방법은..

삽입 -> 그림요소 -> 이미지맵 - ......
이렇게 하시면 됩니닷,,,


이미지맵에대해서는...
설명할부분이 그렇게 많지는 않네요;;;;;;;

간단해도..
복습은 잊지마시길<<ㅎㅎ;;

'html 태그 배우기' 카테고리의 다른 글

html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
Posted by 승호/

댓글을 달아 주세요

중간잡담,,,

잡담....... 2008.03.30 21:45

html 태그 배우기 잘 따라와주신분들 고맙습니닷<< 꾸벅<<< ㅠㅠ

태그 올리니까 방문자수가 30분이나 늘어난;;;



오랜만에??

스킨 끄적끄적 해봤습니다..

결과는 일단 성공으로보이는데...



자바스크립트만 두개 추가시켰습니다...

이거 그대로 복사, 붙여넣기해서..
스킨바꾸려고했다가;;

잘못되면....진짜.. 일 커집니다;;;;;

일단은...
스크립트에는 이런것들이 있다...
이렇게만 봐두셨으면 좋겠네요,,,

나중에..
스크립트 태그에 대해서...
꾸준히 올려보도록 하겠습니닷,,,


▽이 태그는 제 블로그 왼쪽 상단에 있는 메뉴바<
입니다...
참고하시길.....


<!-- 왼쪽 상단 태그배우기 메뉴바 스크립트 시작 //-->
<body onLoad="initiateticker();" scroll="yes">


<style>
<!-- :*: Happyscript :*: //-->
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
//-->
</style>
<!-- open menu 부분 //-->
<DIV CLASS="menbar1" ID="menbar1" STYLE="position:absolute;top:1;visibility:hide;" zIndex="1000">
<table border="0" width="120">
<tr>
<td align="center" bgcolor="#dfdfff">
<A HREF="javascript:change(1)" onfocus="this.blur()"><font size="4" color="red" face="안상수중간">태그배우기 메뉴열기</font></A>
</td>
</tr>
</table>
</DIV>
<!-- close menu 부분 //-->
<DIV CLASS="menbar2" ID="menbar2" STYLE="position:absolute;top:1;visibility:hide;display:none;" zIndex="1001">
<table border="0" width="120">
<tr>
<td align="center" bgcolor="#dfdfff">
<a href="javascript:change(2)" onfocus="this.blur()"><font size="3" color="red" face="안상수중간">메뉴닫기</font></a>
</td>
</tr>
<tr>
<!-- 메뉴 구성 부분 //-->
<td bgcolor="#ffffff">
&nbsp;<a href="http://jihansome.tistory.com/entry/html-기본-태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">태그의 기본</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-문자-크기-바꾸기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">문자 크기 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-마퀴태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">마퀴 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-이미지-태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">이미지 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-링크-태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">링크 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-테이블태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">테이블 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-음악태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">음악 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-배경-태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">배경 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-프레임" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">프레임 태그</font></a><br>

</td>
</tr>
</table>
</DIV>
<script language="Javascript">
<!--
// 이 자스 소스는 메뉴 구성 소스 밑에 있어야 한다
// 메뉴 구성 소스 위에 있으면 스크립트 에러가 남..
var JX = 0;
var JY = 0;
var wm;
if (document.layers){
wm = document.menbar1;
}
if (document.all) {
wm = document.all.menbar1;
}
function change(wow) {
 if (document.layers){
 if (wow == 1) {
 wm.visibility = "hide";
 wm = document.menbar2;
 }
 if (wow == 2) {
 wm.visibility = "hide";
 wm = document.menbar1;
 }
 }
 if (document.all){
 if (wow == 1) {
 wm.style.display = "none";
 wm = document.all.menbar2;
 }
 if (wow == 2) {
 wm.style.display = "none";
 wm = document.all.menbar1;
 }
 }
}
function menbar() {
 if (document.layers){
 JX = window.pageXOffset;
 JY = window.pageYOffset;
 wm.visibility = "hide";
 wm.top = JY;
 wm.left = JX;
 wm.visibility= "show";
 }
 if (document.all){
 if (navigator.appVersion.indexOf("Mac") == -1){
 wm.style.display = "none";
 JX = document.body.scrollLeft;
 JY = document.body.scrollTop;
 wm.style.top = JY;
 wm.style.left = JX;
 wm.style.display = "";
 }
 }
}
setInterval("menbar()",100);
//-->
</script>
<input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>

<!-- 왼쪽 상단 태그배우기 메뉴바 스크립트 마침 //-->


<!-- 타이틀부분 알림 스크립트 시작 //-->
<script language=javaScript>
// 메세지 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var message=new Array()
message[0]="블로깅 꾸준히하겠습니닷<<<."
message[1]="안부글좀 써주세요,,,, ㅠㅠ."
message[2]="태그 배우려면~~~~ >~클릭~<."

// 메세지 링크 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var messagelink=new Array()
messagelink[0]="http://jihansome.tistory.com/"
messagelink[1]="http://jihansome.tistory.com/guestbook"
messagelink[2]="http://jihansome.tistory.com/category/html%20태그%20배우기"

// 타겟 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var linktarget=new Array()
linktarget[0]="_self"
linktarget[1]="_self"
linktarget[2]="_self"

var leftposition=160 // 브라우저 왼쪽과 스크롤 텍스트와의 거리
var topposition=16 // 브라우저 위쪽과 스크롤 텍스트와의 거리
var tickerwidth=250 // 테이블 가로크기
var tickerheight=37 // 테이블 세로크기
var tickerpadding=10 // 테이블과 글자사이 공간
var borderwidth=1 // 테이블 테두리 두께
var fnt="Verdana" // 글자체
var fntsize=12 // 글자크기
var fntsizelastletter=10
var fntcolor="aaffcc" // 글자색
var fntcolorlastletter="red"
var fntweight=4
var backgroundcolor="black" // 배경색
var standstill=3000 // 완성된 글자가 보여지는 시간 (1000 = 1초)
var speed=77 // 작히는 속도 - 작을수록 빠르다
var i_substring=0
var i_presubstring=0
var i_message=0
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function initiateticker() {
 getmessagebackground()
 if (document.all) {
  document.all.ticker.style.posLeft=leftposition
  document.all.ticker.style.posTop=topposition
  document.all.tickerbg.style.posLeft=leftposition
  document.all.tickerbg.style.posTop=topposition
  tickerbg.innerHTML=messagebackground
  showticker()
 }
 if (document.layers) {
  document.tickerbg.document.write(messagebackground)
  document.tickerbg.document.close()
  document.ticker.left=leftposition
  document.ticker.top=topposition
  document.tickerbg.left=leftposition
  document.tickerbg.top=topposition
  showticker()
 }
}

function getmessagebackground() {
  messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
  messagebackground+="hello</td></tr></table>"
}

function getmessagecontent() {
  messagepresubstring=message[i_message].substring(0,i_presubstring)
  messageaftersubstring=message[i_message].substring(i_presubstring,i_substring)
  messagecontent="<table border=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
  messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"
  messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
  messagecontent+="<font color='"+fntcolor+"'>"
  messagecontent+=messagepresubstring
  messagecontent+="</font>"
  messagecontent+="</a>"
  messagecontent+="</span>"
  messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"
  messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
  messagecontent+="<font color='"+fntcolor+"'>"
  messagecontent+=messageaftersubstring
  messagecontent+="</font>"
  messagecontent+="</a>"
  messagecontent+="</span>"
  messagecontent+="</td></tr></table>"
}

function showticker() {
 if (i_substring<=message[i_message].length-1) {
   i_substring++
   i_presubstring=i_substring-1
   if (i_presubstring<0) {i_presubstring00}
   getmessagecontent()
  if (document.all) {
   ticker.innerHTML=messagecontent
   var timer=setTimeout("showticker()", speed)
  }
  if (document.layers) {
   document.ticker.document.write(messagecontent)
   document.ticker.document.close()
   var timer=setTimeout("showticker()", speed)
  }
 }
 else {
  clearTimeout(timer)
  var timer=setTimeout("changemessage()", standstill)
 }
}

function changemessage() {
 i_substring=0
 i_presubstring=0
 i_message++
 if (i_message>message.length-1) {
  i_message=0
 }
 showticker()
}

document.write('<DIV ID="tickerbg" style="position:absolute"></DIV>')
document.write('<DIV ID="ticker" style="position:absolute"></DIV>')
document.write('<DIV id="deletethisblock" style="position:absolute;top:10px;left:180px;"></DIV>')
//-->
</script>
<!-- 타이틀부분 알림 스크립트 마침 //-->



왜 <!-- 타이틀부분 알림 스크립트 시작 //-->
<!-- 타이틀부분 알림 스크립트 마침 //-->

이렇게 자세하게 써놨을까요;;???


스크립트는 정리하기도 힘들고..
수정하는게 더 힘듭니다..
자주 수정을 해줘야될때..
스크립트 어디있는지 찾기 힘들어서..
ctrl + f 의 찾기. 효율성? 을 높이기위해서 저렇게 정리를 해두는게...

아무래도 유리하겠죠<<???

html 웹페이지 제작에있어서 제일 먼저 알아야 할건..
역시 정리라고해도..
과언이 아닐듯 싶네요<<ㅎㅎ;;;


그럼.. 앞으로도 스킨배우러 자주 와주셨으면 좋겠습니다~~<<
------------ 이걸로 저의 횡설수설 마칩니닷..; -------------

'잡담.......' 카테고리의 다른 글

컴퓨터 스킨  (1) 2008.04.11
배너수정  (3) 2008.04.08
두번째 배너,,,  (0) 2008.04.08
블로그 홍보영상?  (6) 2008.04.05
중간잡담,,,  (0) 2008.03.30
저작권 걸렸습니다,.....  (2) 2008.03.27
자작 나노하 매드무비  (8) 2008.03.24
Posted by 승호/

댓글을 달아 주세요

아이프레임(iframe)
홈페이지 제작에 있어서 몰라서는 안되는 태그죠;;;
아이프레임보다는 그냥 프레임태그가 더 많이 쓰이긴 하지만요;; ㅎㅎ

프레임셋 소스<< 라는게 있는데요..
아이프레임 쓰는거보다는
프레임셋 소스로 웹페이지 관리하시는게 제일 수월하다고 하는게 좋을거같네요;


한 페이지 안에 또다른 페이지를 지정한 공간에 넣을 수 있습니다.
네이버 사이트를 아이프레임 시켜보겠습니다<<

<iframe src="http://www.naver.com" width="500" height="300"></iframe>
 



이렇게 페이지 안에 다른 주소의 작은 페이지를 넣게 됩니다.

기본 형식
<iframe src="주소"></iframe>

뒤에 꼭 </iframe>으로 아이프레임의 끝을 정해주어야 합니다.

속성(option)

설명

 src="주소"

 iframe에서 표시할 경로를 지정해 줍니다. "http://..."

 name="a1"

 iframe의 이름을 지정 합니다. 이름을 a1, abcd 등과같이 지정합니다

 width="숫자(픽셀값)"

 frame의 가로길이를 지정합니다.

 height="숫자"

 frame의 세로길이를 지정합니다.

 frameborder="숫자"

 iframe의 경계선 두께입니다. "2"로 하면 깔끔(?)하게 안보이더군요.

 marginwidth="0"

 iframe의 좌우여백입니다.

 marginheight="0"

 iframe의 상하여백입니다.

 scrolling="셋중하나"

 스크롤바 표시 여부를 설정하는거죠<<
yes:무조건생성,no:무조건생성않음,auto:페이지 내용크기에 따라.

 align="셋중하나"

 문장과 상관되는 정렬위치입니다.[left/right/center(왼쪽/오른쪽/중간)] 셋중 하나 선택.


간단하게 소스에 속성을 적용시켜보겠습니다...

<iframe src="http://www.tistory.com" name="tistory" width="500" height="400" frameborder="2" marginwidth="0" marginheight="0" scrolling="auto"></iframe>



아이프레임을 프레임셋과 비슷하게 쓰는 방법.
저기 위에 name="tistory" 한거 보이시는지요...? 아이프레임 name을 tistory 으로 한겁니다.
그럼 이것을 링크태그와 같이 써보면 (한페이지에) 그냥 프레임처럼 사용할 수 있습니다.
링크태그에 타겟.target 을. 이렇게. <a href=http://www... target="tistory">나타낼문자</a>
그럼 이 링크를 클릭하면 나타나게 되는곳은 바로 아이프레임입니다.


저도 설명 이해가 어렵네요;;;
저도 아이프레임은 그리 많이 써보지않아서요;;;
프레임셋이 쉽더라구요<<


프레임셋 기본 소스입니다...
<html>
<head>
</head>

<frameset rows="5%, 95%" border="0">
    <frame src="웹 페이지 주소" name="a1" scrolling="no" marginwidth="10" marginheight="7">
    <frame src="웹 페이지 주소" name="a2" scrolling="auto" marginwidth="10" marginheight="14">
</frameset>

</html>

웹 페이지 주소< 를 name=a1 과 a2 로 지정시켰습니다.
만약 두번째 웹페이지 주소인 name=a2   에서 티스토리로 링크를 걸었습니다.
이 때 링크를 걸면 target="_self" 의 소스가 생깁니다.
여기서 target="_self" 를 target="a1" 으로 지정하면
위쪽의 웹페이지,(a1)에서 링크가 열리게 됩니다.

간단하죠???

예를 들어보겠습니다..

-----------------------------------------------
<html>
<head>
</head>

<frameset rows="50%, 50%" border="0">
    <frame src="http://jihansome.tistory.com/" name="a1" scrolling="no" marginwidth="10" marginheight="7">
    <frame src="http://www.tistory.com" name="a2" scrolling="auto" marginwidth="10" marginheight="14">
</frameset>

</html>
-----------------------------------------------
이렇게 지정을하면 제 티스토리 블로그가 위쪽에, 스크롤바는 없이 나오죠<<???
그리고 티스토리 메인 홈페이지는 아래쪽에, 스크롤바가 나타나있습니다..<<
frameset rows="50%, 50%   <<< 여기서 앞쪽의 50%는 위쪽의 프레임 페이지 크기가되구요
뒤쪽의 50%는 아래쪽의 프레임 페이지 크기가 지정되죠<<

인터넷 창의 크기를 줄여보면 프레임창의 크기들도 화면의 반씩으로 나뉘게 줄어듭니다..



오늘... 프레임 태그 잘 배워보셨는지....
이해 안되시면 제 안부게시판
http://jihansome.tistory.com/guestbook\
에 글 남겨주세요... 성심성의껏 답변해드리겠습니다<<

'html 태그 배우기' 카테고리의 다른 글

html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

배경태그 (background)
 
 
자 이제 홈페이지에 배경색,또는 배경화면을 넣는 태그를 배워봅시다~!!
홈페이지에 흰색 배경화면이라면..
뭔가 허전하겠죠<<???
이거 잘 배워두시면 나중에 티스토리 스킨바꿀때 아~~~~주 많이 도움될껍니닷<<<ㅎ

 

 먼저 배경을 지정하는 태그는 두가지가 있습니다.
 배경 색만 지정하는
bgcolor 와 배경을 이미지로 하는 background  태그입니다.

 1. 그럼 우선 bgcolor 태그를 사용하는 방법을 알아보겠습니다.
 

 HTML 문서에 <body> 라고 되어있는 부분이 있습니다.
 그럼 이제 <body> 부분을 고쳐줍니다.
 <body bgcolor="red"> ㅡ> 배경 색깔이 빨간색(red) 이 됩니다.
 
<body bgcolor="black"> 이렇게하면 검은 바탕이되죠.(black)
 <body bgcolor="0000cc"> 이런식으로 코드를 넣어도 됩니다.(0000cc=진한파랑)
 아무튼,
<body bgcolor="여기에"> 원하는 색깔의 코드나 색명을 적으세요.
코드를 적어주는게 아무래도 유리?하겠죠''';;;
코드는 네이버에서 색상 코드표   라고 치면 나옵니다<<
참고하시길...

 
 2.다음으로 background 태그입니다.
 
 이것도 마찬가지로 <body>에 지정해줍니다.
 <body background="이미지 파일 주소"> 이렇게요.
 아무 그림이든 상관없습니다. (jpg,gif,bmp...등등. 그러나 배경은 gif를 가장 선호)
<body background="이미지 파일 주소">
그냥 기억만 해두세요.......많이 쓰이지는 않습....
배경을 패턴으로 지정해주는것도 보기는 좋겠지만..
역시 이미지를 지정해주는게 보기 좋을듯 하는...

자,,,
제 블로그 배경화면처럼
이미지를 배경화면에 고정시키는태그 가능합니다....
<head> 와 </head> 사이 아무데에다가 붙여주기만 하면 됩니다..


 <style TYPE="TEXT/CSS">
 BODY {background:url(
배경화면 이미지 주소) white fixed no-repeat 100% 100%}
 </style>

 
뒤쪽에 퍼센트는 이미지 위치를 지정하는겁니다...
<<※ 퍼센트에서 왼쪽건 가로, 오른쪽건 세로 이고, 퍼센트가 높을수록 오른쪽으로,아래로 갑니다>>

하지만... 티스토리에서 수정할때는...
위의 방법처럼하시면...
블로그 망가집니다... 배경 바꾸는방법 배웠다고 블로그 스킨 수정하지 마시길...;;;
나중에 제꺼 그대로 가르쳐드리겠습니다<<


덧글 부분의 백그라운드 이미지는 왜 안고정시켰냐,,<<

저도 고정시키고싶지만...
스타일시트에서 배경 고정시키는 태그는 없는걸로 압니다..

티스토리 스킨.html 에서 덧글 부분의 이미지 지정을 할수만있었더라면..
고정 가능했을지도...
 

따로 웹페이지를 만들때에는 그냥 바디 ( body ) 태그로 고정시킬 수도 있습니다!
 
 <body background="이미지 파일주소" bgproperties="fixed">
이렇게 해주시면 되구요. 이 속성을 쓰시면 바둑판식으로 되고, 고정됩니다.

이미지 파일은 되도록이면 크게 저장하세요...

작은 이미지를 배경화면으로 지정하면 이미지파일 그대로 크기에 바둑판식으로 나옵니다;;;
보기 안좋겠죠;;

패턴형식으로 하실꺼면 이미지의 크기는 상관 없지만요...


오늘꺼...
꽤 중요합니다..
잘 외워두시길....

'html 태그 배우기' 카테고리의 다른 글

html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

드디어 음악태그입니다<<
궁금해하시는분들 많겠죠,,
음악태그...
블로그 배경음악으로도 설정할수있고,,
포스팅할때도 속성바꿔서올릴수도있고,,,

음악올리실때 주의할점...
저작권 안걸리게 조심하시길...


그럼 시작합니다<<<



1. <bgsound src="음악주소">


 이건 완전 배경음악전용 태그구요, 음악파일주소 확장자가mp3, mid, wma, wav 등일 경우에 사용하세요.
 
<bgsound src="음악파일 주소">

bgsound    <<<이게 무슨뜻이냐....
그냥 백그라운드 사운드.. 이렇게 기억해두세요...
배경음악에 관련된겁니다,,,,,,<<
앞에서 배웠던 bgcoler (배경 이미지) 랑 비슷한뜻이죠;;;?

 
 음악을 반복재생 하실려면, loop 속성을 추가하시면 됩니다.
 <bgsound src="음악파일 주소" loop="3">
 이렇게요. loop="3"은 3번 반복재생 .이란 뜻이고요,,
 loop="infinite" 으로 하시면 무한반복입니다.

 <bgsound src="음악파일 주소" loop="infinite">
이런식으로요.




2. <embed src="음악 또는, 멀티미디어주소">

 이건 위에서 말씀드렸듯이 동영상, 음악 등을 띄울 수 있는 태그입니다,,,
 멀티미디어 재생기가 뜹니다. (지원하는 파일 - asx, asf, wma 등등..)
 
이건 그냥 이미지 삽입하는것같은거라고할까요,,??
 
<embed src="음악파일 주소">
 
 재생기를 안보이게 하시려면 hidden="true" 속성을 넣으세요.

 <embed src="음악파일 주소" hidden="true">
이렇게요.
 
 embed 태그에서 재생기의 크기를 조절할 수 있는데 값을 width="70" height="25" 로 하면
 
<embed src="음악파일 주소" width="70" height="25"> 이런식.이죠,,??
아주 조그만 재생기가뜨죠,,,
한번 해보시는게 일단은 좋죠,,,,<<~
 

주의점!!
 embed 태그에서는 몇 번씩 반복속성은 적용되지만 무한반복은 안됩니다.

 예) [loop="숫자" (o)적용됨, loop="infinite"(x)적용안됨.]
대신 loop="false" 이면 무한반복 적용됩니다<<
차이점 기억해두세요<<

 
그리고 위에서 말했던 동영상 띄우는 방법은 그냥 동영상 주소를 embed 태그로 사용하시면 됩니다.
픽셀값으로 크기지정도
width="x" height="x" 속성으로 정할 수 있구요. 동영상은 짤리지 않습니다.

'html 태그 배우기' 카테고리의 다른 글

html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

테이블 태그.<table>
태이블 태그는 표를 만드는 태그를 말합니다.
표(table)의 기본구조는,,,,

<table>
<coption>...</coption>
<tr>
<th>...</th>
<td>...</td>
</tr>
</table>


 <table>

 표 작성함을 정의한다 (</table>은 표가 끝남을 정의)

 <tr>

 Table Row의 약자로, 표 안에서 한줄(Row)이 끝났으
 므로 줄바꾸기를 합니다.

 <th>

 Table Heading의 약자로, 표의 머리글 (Header) 임을
 나타냅니다.

 <td>

 Table Data의 약자로,보통체와 왼쪽정렬로 적용됩니다.

 <caption>

 표의 제목을 표화 함께 나타내는 속성입니다.
 align=top -->표의상단
 align=bottom -->표의하단

표에서 사용되는 속성

속성

정의

 width=50%

 표나 셀의 폭(넓이)을 창의 백문율(%)로 지정한다.

 width=400

 표나 셀의 폭을 픽셀 값으로 지정한다.

 height=pixel수

 셀의 높이(세로)를 지정한다.

 cellpadding=10

 셀의 안쪽 여백(셀의 테두리와 문자열 사이의 간격)을 10픽셀로 지한정다.

 cellspacing=5

 셀과 셀 사이의 간격을 5픽셀로 지정한다.

 border=숫자

 표 테두리의 두께를 지정하는 것으로 숫자가 커질수록 두꺼워진다.
 border=0 이면 웹 브라우저에서 표의 테두리가 보이지 않는다.

 colspan=2

 가로의 열(column) 2개를 합치기 한다.

 rowspan=3

 세로의 줄(row)3개를 합치기 한다.

 valign="위치"

 align="left,right,center" -셀 안에서의 가로 위치 정렬

 align="위치"

 valign="top,middle,bottom" - 셀 안에서의 세로위치정렬

 bgcolor="색상"

 표 전체 또는 선택된 셀의 배경 색상을 지정한다.

 backround="주소"

 표 전체 또는 선택된 셀의 배경 이미지를 삽입한다.


위의 표 무조건 외우시는게 좋을듯 싶습니다...
표는 웹에디터로 쉽게 만들수는 있지만...
다른 여러가지 속성을 적용시키려면...
외워야 속성넣기 쉽습니다...;;



<table border="1">
<tr>
  <td bgcolor="yellow"> 일러스트 </td>
  <td> 포토샵 </td>
</tr>
<tr>
  <td> 웹에디터 </td>
  <td> 드림위버 </td>
</tr>
</table>


어떻게한건지 대충 짐작 가시죠???
<td> 를   <td bgcolor="yellow">
이렇게 바꿔주었습니다<<

 

일러스트  포토샵 
웹에디터 드림위버


 

<table border="1" bordercolor="red" cellspacing="0">
<tr>
  <td> 일러스트 </td>
  <td> 포토샵 </td>
</tr>
<tr>
  <td> 웹에디터 </td>
  <td> 드림위버 </td>
</tr>
</table>



<table border="1">   <<< 이것에

<table border="1"> bordercolor="red" cellspacing="0">

이렇게 속성을 추가시켰습니다..

일러스트  포토샵 
웹에디터 드림위버


<table border="0">
<tr>
  <td> 포토샵 </td>
  <td> 플래시 </td>
</tr>
<tr>
  <td> 나모웹 </td>
  <td> 드림위버 </td>
</tr>
</table>

포토샵 플래시
나모웹 드림위버


 

<table background="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMi5naWY=" border="1">
<tr>

    <td> <font color="red">포토샵</font>     </td>
    <td> <font color="red">플래시</font>     </td>
</tr>
<tr>
    <td> <font color="red"> 나모웹</font>     </td>
    <td> <font color="red">드림위버</font>     </td>
</tr>
</table>


포토샵 플래시
나모웹 드림위버

background=" 이미지 파일 주소 " border="1">
이 속성을 추가하니까 보시는것처럼 표 뒤의 배경이 주소의 사진이되네요<<


<table border="1">
  <td rowspan="4"> 웹제작 </td>
     <td>나모웹 에디터</td>
     <tr>
     <td>드림위버</td>
     <tr>
     <td>포토샵</td>
     <tr>
     <td>플래시</td>
</table>

웹제작 나모웹 에디터
드림위버
포토샵
플래시




오늘은 여기까지입니다<<
열심히 공부/연구하시고요~^^
복습 잊지마세요~^^

'html 태그 배우기' 카테고리의 다른 글

html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon 카이♪ 2008.03.30 00:58 신고  댓글주소  수정/삭제  댓글쓰기

    오~다음주부턴 태그나 배워봐야겠다^^
    다음주에도 기대할게~

하이퍼링크.
다른 문서나 미디어 파일을 연결(Link)시켜주는 것으로, 'anchor(닻)'을 의미합니다.
<a href="웹페이지주소">연걸어</a> 의 형식으로 쓰이며, 'href'는 Hyper와 Reference
라는 요소를 뜻합니다. <a>태그를 이용하여 웹하이트의 URL은 물론, HTML문서, 워드프로세서,
압축파일, 실행파일 등을 모든 종류의 파일로 링크시킬 수 있습니다.


<a href="http://www.naver.com">네이버</a>
<a href="http://www.tistory.com/">티스토리</a>


처럼 <a href=" 연결할 웹페이지 주소 "> 나타낼 문자 </a>

이렇게 넣는거죠<<


<a href="http://www.naver.com" target="_blank"> <font color="0000cc"> 네이버 바로가기 </font> </a>
조금 나중에가서 쓰일 태그인데요<<

 target="_blank"
이거는 일단 생각하면 안됩니다.. ㄷㄷ;
_blank 는 새 창에서 열기입니다..
일단 _blank 는 다른 이름으로... 절대 바꾸지 맙시다...

왜냐...
target 여기에 들어가는건 html 프레임셋 배우고 나서 바꾸는거거든요...
프레임셋에서는 _blank 를 a1 이라거나, name 같이....바꿔주는거거든요;;;
... 아무튼... 프레임셋에 대해서는... 나중에 알려드리겠습니다..

종류

기능

  target=xxx

 링크시킨 html 문서를 <frameset>의 name으로 붙여준 프레임에서 열
 게 합니다. 예) target=right / target=main

  target=_top

 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된
 브라우저 화면으로 열도록 합니다.

  target=_blank

 링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고,
 새로운 브라우저(새 창, New Navigator)에서 열게합니다.

  target=_parent

 기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조
로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크합니다.

  target=_self

 하이퍼링크 시킨 문서를 같은 프레임에서 열게합니다.


target=xxx 여기.... 일단은 아무것도 바꾸지 맙시다...
프레임셋은 아직 좀 빠르다..?
라는 느낌이드는...
일단은   target=_top,  target=_blank,  target=_parent, target=_self   이 4가지만 기억해주세요<<


이미지를 클릭하면 링크 바로가기

<a href="http://www.naver.com" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>
이 태그를 넣으면 어떻게될까요>??

당연히..
이미지를 클릭하면.. 새창이 열리면서
http://www.naver.com 네이버 홈페이지...여기로 이동하겠죠<<

참고로...   border="0"  저번에 배운 이미지 삽입하는 태그, 그리고 이미지의 테두리를 지정하는 태그... 0으로 설정한건데 왜 써놓았냐<< 궁금하신지요<<
..... 이미지를 링크시킬때 테두리가 생깁니다.. 그걸 막기위해서 border="0" 속성을 넣어주는거죠<<<<
이해 되시죠<<???

보너스!!
<a href="http://www.naver.com" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>
이렇게 태그를 넣고 이미지를 클릭하면 클릭한 이미지 주변에 검은색으로 점선같은게 생깁니다.
보기 좀 안좋죠<<???
이럴때는..
onfocus="this.blur()" 이 속성을 추가시켜줍니다..
<a href="http://www.naver.com" onfocus="this.blur()" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>

이렇게하면 테두리에 나타나던 검은 선들이 사라집니다..


알아도 되고...
안알아도 되는.. 태그 남았습니다..

      <a href="mailto:jihansome@naver.com"> 메일보내기 </a>
저에게 메일보내는 태그인데요..
이 태그 사용하시면 아웃룩 익스프레스 (메일보내는프로그램)
이 떠서..
그럭저럭 비추합니다...
그래도..
알아두는게 좋겠죠<<???


 <a href="http:// 올린 파일 주소.파일형식 "> 나타낼 문자 </a>   
이렇게 링크를 시키면 주소에 있는 파일을 다운받게되죠<<
여기서 알고갑시다...
http://    <<이렇게 주소를 넣은것들 절대 경로라고합니다...
<a href=" 파일주소.파일형식 "> 나타낼 문자 </a>   
이렇게 짧게 링크를 걸수도 있는데요..
http:// 를 빼고 주소만 넣은것을 상대경로라고하죠,,
이때 주의점은 나타낼 홈페이지와 같은 공간, 폴더일때만 사용가능합니다..
그리고 홈페이지 만들고나서 출판할수 있을때 사용하는겁니다...
홈페이지를 자주자주 바꾸거나,,,
홈페이지에 올릴수있는 용량이 적을때...
이럴때는 절대경로를 써넣는것이 좋겠죠<<???

그냥 기억해두세요<<<



오늘 배운 링크태그 이해 되셨을지모르겠네요;;;
제가 어휘력이딸려서 말을 돌려말한다는;;??
그런습성이.....

html 은 바꿔보면서 복습하는게 좋습니다<<
해보면 무지하게...간단한?? 쉬운...태그,,라고해도될듯...,,,,,


'html 태그 배우기' 카테고리의 다른 글

html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
html 문자 크기 바꾸기  (2) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon 오즈막가 2008.06.27 17:20 신고  댓글주소  수정/삭제  댓글쓰기

    저기요 제가 다음메일을 업로드해서 링크로 올릴건데 어떻게 해야함?? 애니메이션 그냥 주소말고 이것처럼 할려면 !

    • BlogIcon 승호/ 2008.06.28 00:45 신고  댓글주소  수정/삭제

      거의 대부분 메일들에서는 로그인 해야 메일에 있는 파일이 받아집니다.
      외부 링크 걸어놔 봤자 아무것도 안뜨게되고요,,
      한마디로 링크걸어도 아무소용 없습니다...

      메일로 링크거는건 100%불가능합니다..
      애니메이션 파일을 올려서 링크시키시려면...

      계정을 하나 사셔야 할듯 싶네요..
      블로그도 파일 제한용량있는데 분할압축도 안되니...

      답변 도움 되셨으면 좋겠네요

  2. BlogIcon 오즈막가 2008.06.27 17:24 신고  댓글주소  수정/삭제  댓글쓰기

    저기요 외부 멀티미디어 링크 어캐하죠?

    • BlogIcon 승호/ 2008.09.18 18:41 신고  댓글주소  수정/삭제

      외부링크는 파일 형식별로 모두 다릅니다.
      플래시 미디어 링크는 몇백자의 소스가 필요합니다..
      미디어, 이미지 링크 등.. 모두 다릅니다..

  3. BlogIcon zzz 2010.04.26 21:48  댓글주소  수정/삭제  댓글쓰기

    우와... 프레임셋을 나눠놔서 자꾸 메뉴에서 이동되서 어찌하나 찾았는데 찾았네요 ㅎㅎ
    감사합니다.
    그런데 되지를 않네요...
    이건 프레임셋 나눠논 소스인데.. 프레임네임이 뭐지요..?

    <html>
    <head>
    <title>김용래의 홈페이지에 오신것을 환영합니다!</title>
    <META HTTP-EQUIV="keywords" CONTENT="김용래의홈페이지,김용래의 홈페이지,김용래의 홈페이지에 오신것을 환영합니다!,김용래의홈페이지에오신것을환영합니다!,김용래의홈페이지에오신것을환영합니다,김용래의 홈페이지에 오신것을 환영합니다.">
    <META HTTP-EQUIV="Description" CONTENT="김용래의 홈페이지입니다. 어서오세요!">
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function pop() {
    window.alert("/n김용래의 홈페이지에 오신것을 환영합니다!/n");
    }
    //-->
    </SCRIPT>
    <FRAMESET ROWS="130,*">
    <FRAME SRC="top.html"NORESIZE SCROLLING="no">
    <FRAMESET COLS="225,*">
    <FRAME SRC="menu.html"NORESIZE SCROLLING="no">
    <FRAME SRC="main.html"NORESIZE SCROLLING="auto">
    </FRAMESET>
    </FRAMESET>
    <BODY onload="pop()">
    <P ALIGN="center">
    </P>
    </BODY>
    </html>

    • BlogIcon 승호/ 2010.04.26 21:54 신고  댓글주소  수정/삭제

      안녕하세요~ 들러주셔서 감사합니다~

      프레임 네임이라..

      일단 프레임 네임을 지정하셔야 사용이 가능합니다..
      예를 들어
      <FRAME SRC="menu.html"NORESIZE SCROLLING="no">
      의 소스에 네임 속성을 추가..
      <FRAME SRC="menu.html" name="hellow" NORESIZE SCROLLING="no">
      하시는 겁니다.

      그리고 다른 프레임에서 링크의 타겟을 hellow 로 지정하면 menu.html 페이지 부분의 프레임에서 이동되게 하는 원리이지요~/

      도움이 되었으면 좋겠습니다~
      질문해주시면 가능한한 빨리 답해드릴수 있도록 하겠습니다~
      좋은하루되세요~

  4. BlogIcon 잿빛위묘 2013.10.16 19:38 신고  댓글주소  수정/삭제  댓글쓰기

    표에 target=xxx에 있는 예에서 오타가 생겼네요... ㅋㅋ target을 targer이라고 치셨다는!!

    포스팅 잘보고갑니다! ㅋㅋ 그런데 embed로 된 음악 소스에서 링크로 파일을 다운로드 받게 하려고 하니까 안되네요 ㅋㅋ

    • BlogIcon 승호/ 2013.10.16 22:21 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      앗, 감사합니다~! 수정했습니다~^^

      음/... embed.. 글세요 무슨말씀이신지 잘 모르겠어요^^

    • BlogIcon 잿빛위묘 2013.11.10 22:47 신고  댓글주소  수정/삭제

      음... 그러니까 <embed> 태그로 입력된 주소로 음악파일이 있는데요 그걸 <a href> 태그로 링크해서 공유하려니까 그냥 embed로 연결된것처럼 되버리네요... 'ㅅ'... 뭐 방법 없을까요...?

    • BlogIcon 승호/ 2013.11.11 21:51 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      음,, 그게 브라우저&사이트에 따라 다를겁니다..; 네이버에 올리신 음악들인가요? 티스토리인가요..?

      별도 스크립트를 써야되는걸로 알고있습니다,,,
      (아니면 링크로 들어가진 화면에서 마우스 우클릭, 다운로드하면 됩니다...)

    • BlogIcon 잿빛위묘 2013.11.13 20:56 신고  댓글주소  수정/삭제

      네이버도 그렇고 다음도 그렇고 이글루스도 그렇고 티스토리도 그렇네요...

      음악이 저작권법 때문에 다운로드를 받을 수 없도록 조취를 해놔서 저작권에 자유로운 음악도 공유가 불가능해지다니...

    • BlogIcon 승호/ 2013.11.14 08:39 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      뭐든 구하려고 마음만 먹으면 어떻게든 구할수 있는데 굳이 이렇게까지 해야되는건지 모르겠네요 ㅎㅎ...
      랄까 한국음악 안듣는 1인...;;
      요즘엔 어찌돌아가고있는지 전혀모르겠네요 ㅎㅎ;;;

    • BlogIcon 잿빛위묘 2013.11.18 11:47 신고  댓글주소  수정/삭제

      킁... html은 점점 발전하는데 제 두뇌는 열심히 퇴보중이네요...ㅠㅂㅠ

    • BlogIcon 승호/ 2013.11.21 08:29 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      그러고보니 HTML 5가 나온지 꽤 됐었죠아마..;;??

      진짜 매일같이 다뤄주지않는이상 뒤쳐질수빆에 없는것같아요... ㅡㅁㅡ

    • BlogIcon 잿빛위묘 2013.11.22 22:48 신고  댓글주소  수정/삭제

      그러게요... 저도 HTML4로 공부했었는데... 요즘은 5가 대세라죠? (키득)

    • BlogIcon 승호/ 2013.11.24 22:44 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      예전에 대충 봤었는데 저게 정말 HTML 맞는지 싶었어요 ㅠㅠ...
      책도 사뒀는데 너무 난해해서 방치중이네요ㅋ;;;

    • BlogIcon 잿빛위묘 2013.11.30 13:34 신고  댓글주소  수정/삭제

      저는... 사이트에서 공부한지라...

    • BlogIcon 승호/ 2013.12.02 00:11 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      저도 책사보는건 처음인데 책체질이 아닌지 돈낭비만해버린것같더라구요 ㅎㅎ..;;
      컴퓨터공부는 역시 컴퓨터로해야 정석이죠 ㅎㅎ

    • BlogIcon 잿빛위묘 2013.12.13 17:44 신고  댓글주소  수정/삭제

      하핳 해보지 않고는 어떤건지 알기 힘들죠!

    • BlogIcon 승호/ 2013.12.14 11:55 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      컴퓨터보다는 영어공부가 더 시급할것같아서 틈틈이 영어 좀 듣기 시작했습니다..;;;

      빠득빠득.. 영어... 빠득빠득...

    • BlogIcon 잿빛위묘 2013.12.16 11:31 신고  댓글주소  수정/삭제

      이;;;이갈이;;; 허허

이번에는 html 에서 대충배워서는 안되는..
이미지 태그에 대해 알아보겠습니다<<


  • 이미지태그는 기본 <img src="그림주소">가 됩니다.




1. 이미지 크기 정하기▶

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" width="500" height="100"> ▶ 가로500, 세로100 크기 입니다.
크기는 퍼센트% 로 적어도 됩니다. (%로 지정하면 해당페이지 크기가 100%기준이 됩니다)
실행 결과)-


2. alt문자열 넣기

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" alt="승호의 블로그 - 마비노기 이미지"> ▶ 그림에 마우스를 가져가면 "승호의 블로그 - 마비노기 이미지"라는문자가 뜹니다.
결과)-마비노기


3. 테두리 넣기

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" border="7"> ◀ 이 숫자 "7" 이 테두리 굵기가 7이라는 겁니다.
링크태그에 그림을 링크한다면 border="0" 으로 해줘야 깔끔하게 나옵니다;
결과)-


4. 문장의 위치 정렬하기

 
<img src=" http:// 이미지 주소 " align="top"> 문장이 이미지의 상단 부분에 정렬됩니다.
<img src=" http:// 이미지 주소 " align="middle"> 문장이 이미지의 중간 부분에 정렬됩니다.
<img src=" http:// 이미지 주소 " align="bottom"> 문장이 이미지의 하단 부분에 정렬됩니다.




나중에 배워도 되는 부분들인데요<<

많이 참고될듯 하네요<<


좌, 우 바꾸기                          <img src="이미지 주소" style="filter:fliph()">

상, 하 바꾸기                   <img src="이미지 주소" style="filter:flipv()">

이미지를 흑백으로             <img src="이미지 주소" style="filter:gray()">

이미지에 물결효과             <img src="이미지 주소" style="filter:wave(strength=5,freq=3,lightstrength=10,phase=25,add=0)">

중심부터 원 모양으로 이미지 보이기                                                      
<img src="이미지 주소"
 style="filter:alpha(opacity=100, style=2, finishopacity=0)">

이미지 색 반전                  <img src="이미지 주소" style="filter:invert()">

흐음... 햇살효과 <<???       <img src="이미지 주소" style="filter:blur(direction=135,strength=100)">

이미지를 흑백으로             <img src="이미지 주소"
 style="filter:xray()">


style 뒤쪽의 숫자들<<
이걸 바꿔서 효과 설정하는거죠<<
숫자가 바뀌면 이미지도 적용되는 효과가 달라진다는말<<

편하겠죠;;???     힘들게 포토샵 안써도되는..
jepg 말고도 gif 등의 움직이는 이미지 파일도 적용됩니다<<



이미지 태그에는 여러가지 속성들이 많이붙는데요..
제 블로그 뒤의 이미지가 화면에 고정되는 태그...
이것도 이미지태그에 스타일 <style> 이걸 써먹은거죠<< ㅎㅎ//

배경 안움직이게하는 이미지 style 태그..
나중에 가르쳐드리겠습니다<<< ㅎㅎ///

일단은..
오늘 배운것들을 복습해보시길...........

'html 태그 배우기' 카테고리의 다른 글

html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
html 문자 크기 바꾸기  (2) 2008.03.29
html 기본 태그  (2) 2008.03.29
Posted by 승호/

댓글을 달아 주세요

  1. BlogIcon 카이♪ 2008.04.03 21:12 신고  댓글주소  수정/삭제  댓글쓰기

    근데..말이지..
    이미지 주소는 어떻게 아는거야???
    그리고 웹에 올려진 것만 가능한거야?

    • BlogIcon 승호/ 2008.04.03 21:56 신고  댓글주소  수정/삭제

      만약에 티스토리에 하스군이 이미지를 올리면은..
      포스트에 이미지가 뜨잖아<<
      그 이미지에서 마우스 오른쪽 클릭하고 속성...
      보면은 주소 있어...

      네이버는 주소 짧게 .jpg 이렇게 나오는데...
      티스토리에 이미지 파일 올리면 이름이 좀 길어져서... 헷갈리긴 하지;; ㅎㅎ///
      그 주소 복사,붙여넣기 하면 되<<<


      ㅠㅠㅠ 답글 늦어서 미안.. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

  2. BlogIcon Syl 2008.04.15 00:08 신고  댓글주소  수정/삭제  댓글쓰기

    저기요~ 궁금한게 있는데요.. 이렇게 댓글 다는곳에 그림넣는건 어떻게 하죠 ㅇㅅㅇ?

    • BlogIcon 승호/ 2008.04.15 00:47 신고  댓글주소  수정/삭제

      블로그 들러주셔서 감사합니다~^^//
      덧글부분에 이미지 넣는거 간단한 방법은 아니지만..

      일단 가르쳐드릴께요<<
      성공하시길 바랄께요<<
      일단 제 글 끝까지 보시고 나서 수정바랍니다<<

      티스토리 스킨관리 페이지 들어가시면 html 과 스타일시트 수정부분이 있을껍니다..
      아래쪽. 스타일시트 수정부분으로 가셔서요..
      거의 아래쪽에 아래와 같이...
      .comment { width:/*@post-width:-98=*/ 700px /*@*/; margin-left: 15px; overflow: hidden; }
      .comment p { margin:3px 0 0 0; padding:0;}
      .comment h3 { display:none; }
      .comment ol,
      .comment ul { padding: 0; margin: 0; }
      .comment ol li { padding: 3px 0; border-bottom:1px solid #fff; }
      .comment li ul li { padding:5px 10px 5px 35px; background:url("images/iconReComment.gif") no-repeat 12px 6px; border:none;}

      !여기까지는 절대로 건드리지 마시길 바랍니다<<!
      !이미지 삽입 후에 크기조절해주세요<<!


      이 부분 있을껍니다... 확실히 있습니다<<
      이 밑부분에 수정/추가시킵니다....
      .commentWrite 나 .commentWrite input 부분이 없으면 추가시켜주세요<<
      아래와 같이요<<


      /* 댓글부분 백그라운드 ( 배경 ) 이미지 부분 */
      .commentWrite { padding-top:10px; }
      .commentWrite input { width:100px; font:1em Dotum, Arial, sans-serif; padding:7px 0 0 7px;line-height:30px; height:18px;}
      .commentWrite .homepage { width:300px; font:1em Dotum, Arial, sans-serif; line-height:30px; margin-bottom:2px;}
      .commentWrite textarea { background:url( 이미지 파일 주소 );
      andle=; width:/*@post-width:-22=*/ 500px /*@*/; padding:0px; position:relative; font:1em Dotum, Arial, sans-serif; line-height:18px;}
      .commentWrite .submit { background:url(./images/btn_comment.gif) no-repeat; width:150px; height:23px;
      .commentWrite label { position:absolute; margin-top:5px;}
      .commentWrite .secretWrap label { position:absolute; margin-top:1px;}
      .commentWrite .checkbox { border:none; padding:0; margin:0; width:25px;}
      .commentWrite label { padding-bottom:3px;}


      맨 위의
      /* 덧글부분 백그라운드 ( 배경 ) 이미지 부분 */
      이부분은 써넣으시지 않으셔도 됩니다<<
      저는 나중에 수정하기 쉽도록 정리해둔것뿐이라는... ㅎㅎ;;;


      .checkbox 나 label 부분이 이미 있으면 그부분들은 바꾸지 마세요<<
      블로그 기본스킨 에 따라서 덧글쓰는 부분은 크기차이가 있습니다<<
      스타일시트 파일이 다르기때문이라죠,,,
      덧글부분에 맞춰서 이미지를 제작해주시던가,,
      이미지에 맞춰서 덧글부분 크기를 바꿔주셔야할겁니다<<
      syl 님의 댓글부분은 높이만 좀 줄이시면 되겠네요<<
      이 크기에 맞춰서 이미지제작하시는게 가장 무난하실겁니다<<


      !!!!!!!!주의사항!!!!!!!!!
      스타일시트 파일 수정하시기 전에!!<<
      메모장 파일에 통째로 붙여넣기, 저장시켜놓고 수정하세요!!/
      잘못되면 스킨 통째로 날아가서 다른 추가부분 다 잃어버리게된다는<< ㅎㅎ;;;
      도움 되셨는지요<<???
      성공하시길 바라구요~<<^^<<
      잘 안되시면 제 블로그에 안부글로 부탁드릴께요~^^//

      링크 가져가겠습니다~<<

  3. BlogIcon wannapeace 2013.07.23 00:19 신고  댓글주소  수정/삭제  댓글쓰기

    이미지 안에있는 버튼을 누르면 원하는 링크로 이동하게하는건 어케하는건가요???

    • BlogIcon 승호/ 2013.07.23 19:10 신고  댓글주소  수정/삭제

      wannapeace 님//
      혹시 이미지맵태그찾으시나요~? 이미지맵은 나모웹에디터 등 프로그램 쓰셔야 쓰기 편하답니다 ㅎㅎ,,

이번에는 글씨를 움직이게하는..
marquee   (마퀴태그) 배워보겠습니다<<



<marquee> 움직이는 글씨태그... </marquee>

움직이는 글씨태그...

이렇게쓰면 됩니다만 마퀴태그를 더 다양한 방법으로 쓰고 싶다면
태그에 속성을 추가 시키시면 됩니다

※속성은 붉은색으로 표시.

<marquee direction=right> 오른쪽으로 가자</marquee> ▼

오른쪽으로 가자

<marquee direction=left> 왼쪽으로 가자</marquee> ▼
왼쪽으로 가자

위의 direction=right   direction=left 처럼 right   left 만 바꿔주면
글씨가 움직이는 방향이 달라져요<<

<marquee direction=up> 글씨가 위로~</marquee> ▼

글씨가 위로~

<marquee direction=down> 글씨가 아래로~</marquee> ▼

글씨가 아래로~

※이 속성은 글씨가 이동하는 "속도" 인데요, 붉은색 숫자가 높을수록 더 빠릅니다.

<marquee scrollamount=70>속도 70!! </marquee> ▼

속도 70!!

<marquee behavior=alternate> ◀왓다갓다 좌우왕복▶</marquee> ▼

◀왓다갓다 좌우왕복▶

<marquee behavior=alternate direction=up> 아래위 왕복</marquee> ▼

아래위 왕복

왕복에는 behavior=alternate 이 태그가 붙었습니다.

  • 태그에 배경을 넣습니다."FFFF99" 코드를 바꾸면 다른 색의 배경으로 변합니다.
    <marquee bgcolor=ffff99> 마퀴태그에 배경넣기</marquee> ▼
    마퀴태그에 배경넣기



    오늘 마퀴태그 잘 배워보셨는지요<<

    html 태그는 복습이중요해요<<
    한번봐서 외웠다 하지 마시고 붉은색으로 표시된 속성 바꿔가면서 연습하세요~^^

  • 'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:37 신고  댓글주소  수정/삭제  댓글쓰기

      이건 좀 복잡한데..;;;
      근데..배경 넣은상태에서 방향까지 집어넣을려면 어떻게 해야되는거야?
      (두개이상 명령을 입력할때..말이지..^^)

    2. BlogIcon 승호/ 2008.04.03 15:45 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎㅎ;

      늦은시간까지,,, ㅠㅠ/
      하스군 수고했어연~<<

    3. BlogIcon zzzj 2008.12.06 11:34 신고  댓글주소  수정/삭제  댓글쓰기

      왼쪽으로 가셔야되는데 오른쪽으로 가는 시츄에이션..;; 뭐어쨋든 잘보고 갈께요^^

    h는 크기를 뜻하는거구요..

    h뒤의 숫자가 작을수록 글씨는 커집니다..

    view-source:      

    결과

    <h1> 크다 </h1>

    크다

     <h3> 중간 </h3>

    중간

     <h5> 작다 </h5>

    작다

     <h1> 부터~ </h6> 까지 있습니다>>!!! ( font태그와는 반대!!! ) !!!   꼭! 기억해둡시다..!!

    2.문자 크기를 굵게 만들기...

    <b> 음냐 </b> 음냐

    <b> ☆나타낼 문자를 써주세요☆ <b>



    3.문자를 이탤릭체로 나타내기.

    <l> 이탤릭체 </l>

    이탤릭체


    이건 특별히 기억해두지 않아도 됩니다..
    나중에 여러가지 폰트로 나타낼수있는 태그 가르쳐드릴께요<<


    4.문자에 밑줄치기.

    <u> 중요함!~ </u>

    중요함 !~


    <u> ☆나타낼 문자를 써주세요☆ </u>



    5.문자를 주변문자보다 크게하기.

    으<big>으하하</big>하

    으하하

    문자를 적어넣고
    주변문자보다 크게 적용하고싶은 문자 사이에
    그냥 문자...   <big>   크게적용할문자   </big>   그냥 문자...




    6.문자를 아래첨자,윗첨자로 표현하기.

    아<sub>래첨</sub>자

    래첨

     윗<sup>첨</sup>자



    <sub> 와 <sup> 입니다.
    sub 는 글씨를 아래로 가게 만들고요<<
    sup 는 글씨를 위로 가게 만듭니다<<


    8.문자를 주변문자보다 작게넣기.

    주변보다<small> 작게..</small>훗

    주변보다 작게..

    문자를 주변보다 작게 넣는 태그..

    <small> </small>
    입니다..
    보통크기의 문자   <small>   작게 넣을 문자   </small>   보통크기의 문자

    big 태그와는 반대죠<<<<



    자,, 문자태그공부는 여기서 끝~!<<

    'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:34 신고  댓글주소  수정/삭제  댓글쓰기

      문자태그 완료~!!

    2. BlogIcon 승호/ 2008.04.03 12:23 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎ;

      엄청빨리배우넴;;; ㄷㄷ;;; ㅠㅠㅠㅠㅠㅠㅠㅠ

    html 문서의 기본 속성입니다<<
    이 속성은 꼭 들어가야..
    html 페이지가 만들어지는거죠<<<

    <html>
    <head>
    <title>문서의 제목이 들어가는 곳 </title>
    </head>
    <body>
    웹 브라우저의 화면에 보여지는 내용


    </body>
    </html>


    나중에배울 스크립트나...
    그런것들은 모두 <head>   </head>
    사이에 들어가는거구요<<
    <body>   </body> 사이에는
    출력할 화면이 나타나는거니까..
    이것들만 잘 기억해두면 됩니다<<

    < > 사이의 슬래시 ( / ) 의 의미는....
    <html> = html이 시작되었다. [열다]
    </html> = html이 끝났다. [닫다]

    <head> = <head>가 시작되었다. [열다]
    </head> = </head>가 끝났다. [닫다]


    이런개념이죠<<

    일단 오늘은 여기까지...

    모두 외우도록합시다,<< ㄷㄷ;;;;

    'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:31 신고  댓글주소  수정/삭제  댓글쓰기

      이건 쉽구나~

    2. BlogIcon 승호/ 2008.04.03 12:21 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎ///
      설명 엄청 이상하게해버렸는데;;; ㅠㅠ/
      설명 괜찮았어;;??? ㅠㅠ;;???