FONT의 모든 것

2. 글자폰트의 모든 것

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

① 글자크기 태그

글자크기 태그
글자에 관련된 태그는 font 입니다. 여기에 크기, 색상, 모양 등을 각각 size, color, face라고 지정하고 그에 맞는 이름을 따옴표 안에 넣어주면 됩니다.
크기는 h1, h2, h3...라고 할 경우 h1이 가장 크고 숫자가 커질 수록 글자는 작아집니다.
그러나 보통 크기는 그냥 1, 2, 3...이라고 하거나 8pt, 10pt, 12pt... 등 두가지를 많이 쓰는데 그냥 숫자만 적는 것은 쓰기에 편리하고 pt로 하는 것은 일반적으로 한글에서 말하는 글자크기와 같기 때문에 크기를 조정하기가 편리합니다.
그러면 아래에서 몇가지 크기들을 보여드리겠습니다.

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

큰글자 - 큰글자

② 글자색상 태그

글자색상 태그
글자색상을 바꾸고 싶을 때에는 글자크기 태그처럼 font를 사용하는데 size 대신 color를 써주고 따옴표 안에 색상명이나 색상코드를 넣어주면 됩니다.
색상의 경우에도 크기처럼 방법이 여러가지 있는데 white, black, pink, blue, green, brown...과 같이 색상이름을 영문으로 쓰는 경우에는 코드를 외우지 않아도 되므로 편리하긴 하지만 세분화된 여러가지 색상들을 다양하게 쓰기는 어렵습니다.
반면 색상표(클릭!!)와 같이 숫자와 영문조합의 코드가 가장 많이 쓰이는데 이 경우 앞에 #이 붙기도 하나 안붙여도 무방하며 대소문자는 혼용해도 상관없습니다.
그 밖에도 숫자와 세미콜론으로 이루어진 코드가 있는데 이것은 보기 드물기 때문에 신경 안쓰셔도 됩니다.

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

③ 글자모양 태그

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

굴림체 - 굴림체
돋움체 - 돋움체
궁서체 - 궁서체
바탕체 - 바탕체
이솝체 - 이솝체
엽서체 - 엽서체

④ 글자변형 태그

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

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

⑤ 움직이는 글자 태그

<marquee direction="방향">움직이는 글자 태그</marquee>
글자움직임은 글자를 상하좌우 등으로 움직여 주는 것입니다.
여기서 direction이라 지정하고 따옴표 안에 up, down, right, left.. 등의 방향을 주는데 방향이 한쪽으로만 움직이지 않을 경우에는 direction 대신 behavior라 지정하고 움직임의 종류를 따옴표 안에 넣어주면 됩니다.
그리고 scrolldelay="속도"를 해주어 움직이는 속도를 조정할 수 있고 두가지 이상의 움직임을 한꺼번에 적용할 수도 있습니다.
아래의 예를 참고하세요~

<marquee direction="right">오른쪽으로 움직임</marquee>

오른쪽으로 움직임

<marquee direction="left">왼쪽으로 움직임</marquee>

왼쪽으로 움직임

<marquee behavior="alternate">좌우로 움직임</marquee>

좌우로 움직임

<marquee behavior="alternate" scrollamount="1000">좌우로 빠르게</marquee>

좌우로 빠르게

<marquee direction="up" scrolldelay="200">위로 올라감</marquee>

위로 올라감

<marquee direction="down" scrolldelay="200">아래로 내려감</marquee>

아래로 내려감

<marquee>한<ul>글<ul>자<ul>씩<ul>움<ul>직<ul>임<ul></marquee>

한
글
자
씩
움
직
임

<marquee behavior="alternate" direction="up">두개이상 적용</marquee>

두개이상 적용

⑥ 참고사항

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

★예제소스★

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