HTML - 글자 폰트의 모든 것

글자 폰트의 모든 것

- 글자크기, 색깔, 모양 , 변형, 움직임 등의 태그와 줄바꿈, 인용구 태그

① 글자크기 태그

예제소스

작은글자 - 작은글자
 작은글자 - 작은글자
 보통글자 - 보통글자
 보통글자 - 보통글자
큰글자 - 큰글자
 큰글자 - 큰글자

② 글자색상 태그

예제소스

예쁜파랑 - 예쁜파랑
 예쁜파랑 - 예쁜파랑
 예쁜분홍 - 예쁜분홍
 예쁜분홍 - 예쁜분홍
 예쁜초록 - 예쁜초록
 예쁜주황 - 예쁜주황
 예쁜노랑 - 예쁜노랑

③ 글자모양 태그
글자모양 태그 - 글자체를 바꾸려면 size 혹은 color 대신에 face를 쓰고 따옴표 안에 글자체 이름을 써주면 됩니다. 그러나 주의해야 할 것은 익스플로러에서 지원하는 굴림체, 돋움체, 궁서체, 바탕체는 자유자재로 바꿀 수 있으나 이솝체, 엽서체, 휴먼매직체.. 등 다양한 글자체는 이것을 지원하는 사이트에서 다운을 받아 zip을 풀어준 후 윈도우의 폰트(제어판에서 바꿔주면 쉽다)에 추가해 줘야지만 사용할 수 있다는 것입니다.

예제소스

굴림체 - 굴림체
 돋움체 - 돋움체
 궁서체 - 궁서체
 바탕체 - 바탕체

④ 글자변형 태그

이것은 글자변형이지만 font를 사용하는 것은 아니고 간단한 명령어만 주면 됩니다. 아래를 참고하세요.

예제소스

진하게 - 진하게
 진하게 - 진하게
 이탤릭체 - 이탤릭체
 밑줄긋기 - 밑줄긋기
 위첨자 - ^위첨자
 아래첨자 - _아래첨자

참고사항

줄바꾸기 - 이것은 시작과 마무리 없이 한번만 쓰면 되는데
 은 줄만 바꾸어주는 것이고 는 줄 바꾸면서 한 줄을 띄어주는 것입니다.
인용구 - <blockquote>인용구</blockquote>로 해주면 태그 사이의 인용구들이 들여쓰기가 되는 것입니다.
앞에서도 말했듯이 HTML은 띠어쓰기가 한 칸이상은 안되기 때문에 유용합니다.

예제소스

<html>
<head><title>글자폰트의 모든 것 예제</title></head>
<body>
글자폰트의 모든 것

<marquee direction="left">어때요?
 글자폰트의 모든 것을 익히셨나요?</marquee>
글자폰트에서 배운 것
<blockquote> 글자크기 태그 
글자색상 태그 
글자모양 태그 
글자형태 태그 
움직이는 글자 태그 
줄바꿈과 인용구 
</blockquote>
</body>
 </html>

예제실행 - 결과를 보시려면 클릭하세요.

'컴퓨터사용팁' 카테고리의 다른 글

HTML - 음악 넣기 (0)	2011.01.05
HTML - 그림 넣기 (0)	2011.01.05
HTML - HTML의 형식 (0)	2011.01.05
윈도우 정품 혜택 알림창 안 뜨게 하기 (8)	2011.01.04
윈도우7 백신 MS Security Essentials 2.0 (2)	2011.01.02

컴퓨터라이프

HTML - 글자 폰트의 모든 것

'컴퓨터사용팁' 카테고리의 다른 글

티스토리툴바

HTML - 글자 폰트의 모든 것

'컴퓨터사용팁' 카테고리의 다른 글

관련글

티스토리툴바