HTML5 매뉴얼

8-1-4.글꼴

페이지의 외관과 가독성을 결정하는 가장 큰 요소는 글꼴이다. 브라우저의 디폴트 글꼴과 다른 모양으로 출력할 때는 태그의 속성으로 글꼴의 이름과 크기, 색상을 지정한다.

속성	설명
face	글꼴의 이름을 지정한다. 사용자 컴퓨터에 이 글꼴이 있어야 한다.
size	크기를 지정한다. 1~7까지 상대적인 크기를 지정하거나 pt 단위로 논리적인 크기를 지정한다. 1이 가장 작고 7이 가장 크다.
color	색상을 지정한다.

세 속성을 다 쓸 필요는 없고 변경하고 싶은 속성만 밝힌다. 태그 안에 내용을 배치하고 태그의 속성으로 원하는 글꼴의 특징을 나열한다. 문단 전체를 태그로 감쌀 수도 있고 문단의 한 단어에 대해서만 태그를 사용할 수도 있다.

font.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

디폴트 글꼴로 출력된다. 파란색으로 출력된다.

작은 글꼴이다.

큰 글꼴이다.

바탕체로 출력된다.

빨간색의 큰 궁서체로 출력된다.

</body>

</html>

문단이나 단어를 태그로 감싸 다양한 글꼴을 적용해 보았다. 마치 워드 프로세서에서 블록을 선택하여 글꼴을 지정하는 것과 유사하다.

굵게, 밑줄, 이탤릭 등의 모양은 , , 등의 태그로 지정한다. 글꼴에 관련된 속성이지만 자주 사용되므로 별도의 태그가 정의되어 있다. 모양을 변경하고 싶은 부분에 대해 태그로 감싼다.

biu.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

강조하고 싶은 부분은 굵게 표시할 수도 있고 밑줄을

그을 수도 있고 기울여 쓸 수도 있다.

크고 굵은 모양이다.

</body>

</html>

글꼴과 모양을 동시에 지정하고 싶으면 태그와 , , 등의 태그를 중첩해서 사용한다. 중첩 순서나 깊이는 상관없되 태그끼리 교차되지만 않으면 된다. 이 방법은 워낙 간편하기 때문에 HTML5에서도 아직까지 유효하다.

이상으로 HTML 태그와 속성으로 문서를 꾸미는 대표적인 방법 몇 가지에 대해서 실습해 보았다. 이 외에도 도표나 목록, 수평선 등의 태그에 대해 모양을 지정하는 많은 속성이 정의되어 있으나 지금은 이 속성에 대해 굳이 몰라도 상관없다. CSS에 대체되는 장식 기능이 제공될 뿐만 아니라 훨씬 더 섬세한 지정이 가능하다.