블로그에 유용한 태그 2 - 글자 스타일 지정하기 (2) : 마우스 오버 글자 스타일 적용

2010. 8. 28. 17:01IT/Tistory Tips


지난번에 글자에 간단한 스타일을 적용하는 것에 대해 살펴봤다. <span style="">로 적용한 스타일은 영구적인 속성이다. 쉽게 이야기해서 한 번 지정하면 계속 그 상태로 유지된다. <span style="color: tomato;">글자 색을 토마토색으로 바꾸기</span>와 같이 지속적으로 유지되는 속성이 부여된다. 그러나 style 대신 OnMouseOverOnMouseOut을 사용하면 커서 위치에 따라 글자의 스타일을 바꿀 수 있다.

태그 사용 방식은 이전과 비슷하다. 기본 형식은

<span OnMouseOver="this.style.속성='속성값'" OnMouseOut="this.style.속성='속성값'">

이며 OnMouseOver는 마우스 커서를 글자 위에 올렸을 때의 스타일이고 OnMouseOut은 마우스 커서를 글자에서 내렸을 때의 스타일이다. OnMouseOut은 속성 이름만 입력하고 속성값을 비워두면 마우스 커서를 글자에서 내렸을 때 원래 글자의 속성으로 되돌아간다. 여러 속성을 함께 사용할 땐 ;(세미콜론)으로 구분하고 글자 스타일을 지정할 문구가 끝나면 꼭 </span>를 입력해서 태그를 닫는다.

그런데 OnMouseOver와 OnMouseOut을 사용할 땐 주의해야 할 사항이 있다. 보통 태그는 소문자로 사용하며 특별히 대소문자를 구분하지 않는다. 그러나 OnMouseOver와 OnMouseOut을 사용할 때 this.style. 뒤의 속성값에서는 반드시 대소문자를 구분해야 한다. onmouseover 자체는 대소문자 구별없이 써도 되지만, this.style.fontSize의 대문자 S를 this.style.fontsize와 같이 소문자 s로 기록하면 태그가 적용되지 않을 수도 있다. 단, 첫 번째 글자는 대소문자 상관없이 사용할 수 있어서 FontSize나 fontSize 모두 태그가 제대로 동작한다. 말로 설명하면 복잡하니 아래 예를 보고 글자에 마우스 커서를 올려보자.

[예제 1 - 태그를 바로 사용했을 때]

<span style="color: deeppink" onmouseover="this.style.fontSize='18pt'" onmouseout="this.style.fontSize=''">
마우스를 올려보세요. 글자가 커집니다.

</span>

[예제 2 - 태그를 잘못 사용했을 때]

<span style="color: deeppink" onmouseover="this.style.fontsize='18pt'" onmouseout="this.style.fontsize=''">
마우스를 올려보세요. 글자가 커지지 않습니다.
</span>

첫 번째 예는 fontSize라고 올바르게 입력해서 마우스 커서를 올렸을 때 글자 크기가 변하지만, 두 번째 예는 fontsize라고 잘못 입력했으므로 마우스 커서를 올려도 글자 크기가 변하지 않는다. 이제 실제로 사용할 수 있는 속성 종류를 살펴보자.

▽ 각 칸의 속성 글자에 마우스 커서를 올려보세요. ▽
글자 크기 this.style.fontSize='16pt' 글자 크기는 pt(point), % 등을 사용할 수 있다.
글자 색 this.style.color='deeppink' 글자 색은 색 이름이나 html 코드, rgb 값 - rgb(xx, xx, xx) - 을 입력한다.
배경 색 this.style.backgroundColor='tomato' 배경 색은 색 이름이나 html 코드, rgb 값 - rgb(xx, xx, xx) - 을 입력한다.
글꼴 this.style.fontFamily='궁서' 글꼴 전체 이름을 입력한다.
굵기 this.style.fontWeight='900' normal, bold, 100~900 사이 숫자를 입력한다.
꾸미기 this.style.textDecoration='none' none, underline, overline, line-through, blink를 사용한다.
응용하면 두 줄이나 세 줄, 두 줄+깜빡임 등 여러 효과를 함께 사용할 수 있다. 또 글씨와 줄 색을 다르게도 할 수 있다. 아래 글자에 마우스 커서를 올려보자.
<span OnMouseOver="this.style.textDecoration='line-through'; this.style.color='red'" OnMouseOut="this.style.textDecoration=''; this.style.color=''">
<span OnMouseOver= "this.style.color='blue'" onmoouseout="this.style.color=''"> 입력할 내용 </span></span>
this.style.textDecoration='underline'
this.style.textDecoration='overline'
this.style.textDecoration='line-through'
this.style.textDecoration='blink'
기울임 this.style.fontStyle='italic' normal, italic, oblique를 사용한다.

위 내용을 실제로 적용할 땐 아래와 같이 입력한다.

<span OnMouseOver="this.style.fontFamily='바탕'; this.style.fontSize='19pt'; this.style.color='olive'; this.style.backgroundColor='khaki'; this.style.fontWeight='bold'; this.style.fontStyle='italic'; this.style.textDecoration='underline';" OnMouseOut="this.style.fontFamily=''; this.style.fontSize=''; this.style.color=''; this.style.backgroundColor=''; this.style.fontWeight=''; this.style.fontStyle=''; this.style.textDecoration='';">
스타일을 적용할 내용입니다. 마우스 커서를 올려보세요.
</span>

<span OnMouseOver="" OnMouseOut="">은 글자 스타일 적용하기 (1)에서 다룬 <span style="">에 비해 자주 사용되진 않지만, 특별한 포인트를 줄 때 사용하면 효과가 있다. 위 내용만 따라 하면 큰 어려움 없이 글자 스타일을 지정할 수 있다. 그러나 글자를 반짝이게 하는 this.style.textDecoration='blink' 속성은 Firefox와 Opera에서만 작동하고 크롬, IE에서는 아무런 변화가 없다.

또 OnMouseOver와 OnMouseOut 외에도 마우스 단추를 누를 때와 누른 손을 떼었을 때 적용되는 OnMouseDown과 OnMouseUp으로 마우스 단추를 눌렀을 때 글자 스타일이 바뀌었다가 단추에서 손을 뗐을 때 원래대로 돌아가도록

<span OnMouseDown="this.style.color='deeppink'; this.style.fontWeight='bold'; this.style.fontSize='14pt'" OnMouseUp="this.style.color=''; this.style.fontSize=''; this.style.fontWeight=''">
마우스 왼쪽 단추로 천천히 클릭했다가 손을 떼세요.
</span>

이렇게 글자 스타일을 적용할 수 있다. 비슷한 개념으로 클릭했을 때 적용되는 OnClick과 더블클릭했을 때 적용되는 OnDblClick으로 클릭했을 때 글자 스타일이 바뀌고 다시 더블클릭하면 원래대로 돌아가도록

<span OnClick="this.style.color='deeppink'; this.style.fontWeight='bold'; this.style.fontSize='14pt'" OnDblClick="this.style.color=''; this.style.fontSize=''; this.style.fontWeight=''">
마우스로 글자를 클릭했다가 잠시 후 다시 더블클릭하세요.
</span>

이렇게 글자 스타일을 적용할 수도 있다.

  • 프로필사진
    알 수 없는 사용자2010.08.28 17:23

    위...위대하네요 ^^;;
    나중에 써먹어야겠어요

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.28 23:00 신고

      글자 크기와 밑줄, 글자 색 정도는 일상적으로 사용해도 괜찮을 것 같아요^^

  • 프로필사진
    알 수 없는 사용자2010.08.29 00:13

    태그라는 녀석은 정말 알면 알수록 재미난 녀석임에는 틀림이 없네요...

    아무리 블로그 상에서 알아서 해주는 세상이지만... 자신이 직접 만들어보는 태그도 나름 의미를 부여할 수 있을 듯 하네요...~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.29 00:31 신고

      네, 태그는 정말 끝이 없는 녀석이더라구요 ㅎㅎ
      하나씩 알아가는 재미가 있는 녀석입니다!
      차곡차곡 쌓아뒀다가 다음에 블로그 스킨 바꿀 때 써먹으려구요^^

    • 프로필사진
      알 수 없는 사용자2010.08.29 01:06

      저도 태그를 약간이나마 사용할 수 있지만 지독한 귀차니즘으로 인하여 그냥 있는 스킨만 쓰고 간단히 파비콘이나 얼마전 귀차니즘을 이기고 설정한 tag cloud 까지... 블로그를 유지하는 것은 역시나 부지런함임을 새삼 깨닫고 있네요...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.29 18:27 신고

      네 여러가지로 신경쓸 일이 많네요^^
      그래도 그런 재미에 계속 하게 되는 것 같아요~

  • 프로필사진
    알 수 없는 사용자2010.08.29 12:42

    너무너무 재미있고 쉽고 유용한 강좌였어요.

    금방 딸라할 수 있게 잘 설명해 주셔서 태크만들기 재미가 솔..쏠..해졌어용.. 감사합니당...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.29 18:31 신고

      앗, 다행입니다^^;;
      내용이 한 눈에 안들어오는것 같아서 걱정했는데 다행이네요~

  • 프로필사진
    Favicon of https://ok-dj.com BlogIcon CANTATA2010.08.30 13:30 신고

    태그의 세계 너무 어지럽죠 ㅋㅋ
    여러가지거니와 ,,, ㅎ 기본적인 태그만 알고 지내는게 속편하죠 ㅋ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.30 19:49 신고

      공부해도 끝이 없네요 ㅎㅎ
      태그만으로 재미있게 구성한 블로그나 홈페이지 보면 진짜 궁금하더라구요~

  • 프로필사진
    Favicon of https://wooubistudio.tistory.com BlogIcon wooubi2010.09.10 10:28 신고

    요것두 좋은 정보~
    열씨미 공부 할께요~

  • 프로필사진
    알 수 없는 사용자2011.01.30 14:39

    블로그 글씨체에 대해서 궁금증이 많았는데ㅡ circlash님의 글이 정말 많은 도움이 되네요 ㅎ
    그런데 제가 정말 초보라서 그러는데_
    이 태그를 아무곳에나 붙여넣기 하면 되는건가요??

    어디에 붙여넣기를 해야할지를 모르겠어요^^::

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.02.08 11:57 신고

      티스토리 등에서 게시물을 작성할 때 HTML을 선택하면 흔히 볼 수 있는 에디터 형식(WYSIWYG)이 HTML 입력으로 바뀝니다. 이 상태에서 원하는 글씨체 태그를 입력하면 적용됩니다.

  • 프로필사진
    알 수 없는 사용자2011.06.30 13:02

    안녕하세요!!

    다름이 아니라, 여쭤볼것이 있는데..
    포스팅 제목과 다른 글 보기 목록 마우스 오버시 색상변하게 하려면 어디서 어떻게 해야 하나여?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.06.30 18:32 신고

      스킨마다 차이가 있습니다.
      일단 블로그 센터에서 [스킨] - [HTML/CSS 편집]으로 가서 아래에 있는 style.css 부분으로 이동합니다.

      그다음 다음 내용을 찾으세요.

      .titleWrap h2 a:hover { color:/*@post-title-color=*/#11d8ee/*@*/; }

      여기서 #11d8ee가 블로그 글 제목에 마우스 커서를 올렸을 때 변하는 색입니다. 원하는 색으로 바꿔주시면 됩니다.

      평소의 블로그 글 제목 색도 바꾸려면 다음 내용을 찾습니다.

      .titleWrap h2 a {
      color:/*@post-title-color=*/#347cf2/*@*/;
      font-size:/*@post-title-font-size=*/16px/*@*/;
      line-height:1.3em;
      font-family:/*@post-title-font-family=*/inherit/*@*/;
      }

      여기서 역시 #347cf2가 보통 때 블로그 글 제목입니다. 이 부분을 다른 색으로 바꾸면 됩니다.

      다른 글 보기 목록은 style.css에 다음을 입력하면 됩니다.

      1. 맨 위에 카테고리 나타내는 부분

      .another_category_color_gray h4 a:hover{color:원하는 색!important}

      2. 글 목록 부분

      .another_category_color_gray table th a.current:hover{color:원하는 색!important}

      아마 이렇게 하면 적용될 겁니다. 혹시 안되면 다시 댓글 남겨주세요^^

  • 프로필사진
    알 수 없는 사용자2011.06.30 20:31

    우앜!! 감사합니다!!!
    며칠동안 엄청 끙끙댔는데 이제 해방이네요 ㅠㅠㅠㅠㅠㅠㅠ
    감격의 눈물 흐규ㅠㅠㅠㅠㅠㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.06.30 21:02 신고

      적용하셨나요? 잘 되신것 같아 다행입니다^^
      주말 잘 보내세요~
      비 피해 조심하시구요