블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1)

2010. 8. 24. 02:01IT/Tistory Tips

 대부분 블로그는 WYSIWYG(What You See Is What You Get)를 지원하므로 HTML 태그를 몰라도 글을 작성할 수 있다. WYSIWYG는 간단히 생각하면 워드 프로세서를 사용해서 문서를 작성하는 과정과 비슷하다. 그러나 블로그를 계속하다 보면 태그가 필요할 때가 있다. 아니, 필요하다고 할 순 없지만, 태그를 사용하면 좀 더 간결하고 완성도 높은 글을 작성할 수 있다. WYSIWYG를 사용해서 글 서식이나 표, 그림이 복잡하게 구성된 글을 작성하면 그때그때 적용한 태그가 중첩되거나 하나로 통일할 수 있는데 반복적으로 사용되어 복잡해진다. 결과물은 같지만, 거기에 이르는 과정에서 차이가 있는 셈이다. 홈페이지를 만들 때 나모 웹 에디터나 드림위버를 사용하는 것과 메모장을 이용한 것의 차이와 같다. 그래. 최적화라고 하자. 글 다이어트라고 해도 좋다. 복잡하게 얽히고 섥힌 태그를 간결하게 정리하면 그만큼 웹 페이지 불러오기 속도에서도 이득을 볼 수 있다. 뭐 이유야 어찌 되었든, 블로그를 사용하면서 자주 사용하거나 필요한 태그를 정리할 필요가 생겼다. 아무래도 자주 사용하지 않는 것들은 잊기 마련이니까. 포토샵 따라잡기에 뒤이은 두 번째 프로젝트다. 역시 둘 다 나중에 내가 필요할 때 찾아 쓰기 쉽게 하기 위함이다.

글자 스타일 지정하기!!

블로그에 글을 쓸 때 가장 자주 사용하는 것이 글자 스타일 지정이다. 스타일이란 글자 크기, 글꼴, 밑줄, 문단 정렬 상태, 글자색 등을 이야기한다. 글자 스타일은 span이라는 태그를 사용해서 조정할 수 있다. font라는 태그도 있지만, span이 훨씬 다양한 기능을 제공한다. span은 그 자체만으론 시각적인 변화를 주지 않는 태그다. 그러나 span 태그에 스타일을 적용함으로써 span 태그로 둘러쌓인 글자에 다양한 효과를 줄 수 있다.

span 태그에 스타일을 적용하려면 style=" "과 함께 사용한다.

기본 형식은 <span style="">이며 각 속성 값엔 :(콜론), 다른 속성과 함께 사용할 땐 ;(세미콜론)으로 끝낸다. 또 글자 스타일을 지정할 문구가 끝나면 꼭 </span>를 입력해서 태그를 닫는다.

글자 크기 font-size: 14pt 글자 크기는 pt(point), % 등을 사용할 수 있다.
글자 색 color: deeppink 글자 색은 색 이름이나 html 코드를 입력한다.
배경 색 background-color: #ff6347 배경 색은 색 이름이나 html 코드, rgb 값 - rgb(xx, xx, xx) - 을 입력한다.
글꼴 font-family: 궁서 글꼴 전체 이름을 입력한다.
굵기 font-weight: 900 normal, bold, 100~900 사이 숫자를 입력한다.
꾸미기 text-decoration: none none, underline, overline, line-through, blink를 사용한다.
응용하면 두 줄이나 세 줄, 두 줄+깜빡임 등 여러 효과를 함께 사용할 수 있다.
또 글씨와 줄 색을 다르게 <span style="text-decoration: line-through; color: red;"><span style="color: black;">입력할 내용</span></span> 할 수 있다.
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
기울임 font-style: italic normal, italic, oblique를 사용한다.

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

<span style="font-family: 바탕; font-size: 19pt; color: olive; background-color: khaki; font-weight: bold; font-style: italic; text-decoration: underline;">스타일을 적용할 내용</span>

위 내용만 따라하면 큰 어려움 없이 글자 스타일을 지정할 수 있다. 그러나 글자를 반짝이게 하는 text-decoration: blink 속성은 Firefox와 Opera에서만 작동하고 크롬, IE에서는 아무런 변화가 없다.


  • 프로필사진
    6212010.08.24 09:58

    태그의 매력은 지금보다는 예전이 좋았지요...

    요즘은 지적해 주신대로 알아서 다 해주니 손맛이 없다고 할까요??

    지금은 없어졌지만 초창기 D사 카페 등지에서 닉네임이 이동하거나 각종 그림이나 움짤(?) 등으로 닉네임을 만드는 사람들을 부러워하던 시절이 있었는데...

    물론 다 알아서 해주는 요즘은 편해졌다지만, 자동차로 치면 자동변속기 차량으로 쉽게 운전이 가능할지는 몰라도 수동변속기의 그립감처럼 뭔가 허전한 부분은 어쩔 수 없나 봅니다...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.24 13:10 신고

      수동의 매력이라 ㅎㅎ
      딱 맞는 표현이네요~
      그래도 티스토리는 스킨이나 게시물이나 태그 제한이 적어서 좋습니다 ^^

  • 프로필사진
    Favicon of http://blog.clarcer.com BlogIcon 세이지클라서2010.08.24 10:56

    태그만 알면 더 멋진 포스트를 만들 수 있죠 ㅎㅎㅎ

  • 프로필사진
    Favicon of http://mfod.tistory.com BlogIcon 더머2010.08.24 17:12

    아직 "트랙백이 없고개"가 고쳐지질 않았군요 ;;

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

      넵 ㅠㅠ
      index.xml 파일 수정해도 안되네요
      그냥 당분간 신경 안쓰고 살기로 했습니다 ㅎㅎ

  • 프로필사진
    Favicon of http://nhjung1212.tistory.com BlogIcon 최강미녀2010.08.24 21:10 신고

    예전에는 카페에 이렇게 해서 많이 글쓰기 했는데~~~감회가 새롭네요~~ㅎㅎㅎㅎ

  • 프로필사진
    Favicon of http://blog.naver.com/ufo128 BlogIcon ufo1282010.08.24 21:32

    아~~~~~ 요런것도 공부하고 그래야하는데 ㅋㅋㅋㅋㅋㅋㅋ
    좋은 정보 감사해요 ^^

  • 프로필사진
    Favicon of https://mydascap.tistory.com BlogIcon 마이다스의세상2010.08.24 21:40 신고

    text-decoration: blink 요거는 사용 여하에 따라 매우 유용하겠네요 잘배워가요^^

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

      유용하긴 한데 IE와 크롬에선 적용이 안되요~
      그리고 Firefox에선 빠르게 Opera에선 느리게 깜빡인답니다 ㅎㅎ
      개인적으론 Opera에서 깜빡일 때가 가장 마음에 들더라요^^

  • 프로필사진
    Favicon of http://ventazure.tistory.com BlogIcon VentAzure2010.08.25 11:24 신고

    XHTML이나 HTML 4.01에서 font 태그나 기타 스타일을 지정하던 태그들이 Deprecated(사용중지)로 처리되면서 현재는 CSS 지정을 최우선으로 하고 나머지 스타일은 span style로 적용해야 하겠더군요.
    font 태그에 너무 익숙해져서 span style은 아직 덜 손에 익긴 하지만, HTML도 새로 공부하고 span 태그도 손에 익히기 위해서 스타일 지정에 좀 더 자주 쓸 수 있도록 해야 하겠습니다.
    <HTML 태그를 워낙에 구시대 것으로 배웠더니 요즘 HTML 리스트를 보면 뭔가 멍해지는 기분이 들곤 합니다..;;>

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.08.24 13:11 신고

      네, 저도 요즘 태그 보면 이게 뭔가 싶기도 합니다 ㅎㅎ
      열심히 공부해야겠어요 ㅠㅠ

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

    감사 감사 ^^*