2010. 8. 24. 02:01ㆍIT/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를 사용한다. |
위 내용을 실제로 적용할 땐 아래와 같이 입력한다.
위 내용만 따라하면 큰 어려움 없이 글자 스타일을 지정할 수 있다. 그러나 글자를 반짝이게 하는 text-decoration: blink 속성은 Firefox와 Opera에서만 작동하고 크롬, IE에서는 아무런 변화가 없다.