블로그에 유용한 CSS 1 - font 속성으로 글자 스타일 지정하기

CSS는 이전에 이야기한 것처럼 HTML 문서를 읽기 쉽게 구성하면서 일괄적으로 글꼴, 배경, 여백 등의 속성을 지정하는 것이다. 예전에 HTML 문서에서 글꼴의 크기, 스타일 등을 바꾸려면 <font> </font> 태그를 사용했지만, 앞으로 언젠가 표준이 될 HTML 5에선 font 태그를 지원하지 않는다. (현재 사용하는 HTML은 HTML 4다.) font를 사용하지 않고 글자 스타일을 바꾸는 방법은 이미 블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1)에서 이야기한 바 있다. 그러나 앞에서 font-family, font-size, font-style 등의 개별 스타일을 사용한 것을 font라는 하나의 스타일로 통합해서 사용할 수 있다. 스타일 시트의 크기도 줄고 물론 로딩 시간도 줄어든다.

먼저 이전의 방법인 HTML만 사용했을 때(<font> 태그)와 HTML, CSS를 함께 사용했을 때 어떤 차이가 있는지 예를 통해 알아보자. 아래는 같은 글꼴 속성을 갖는 문장을 중복해서 사용할 때 HTML만 사용하는 방법과 HTML, CSS를 함께 사용하는 방법의 예다.

<예제 1>

HTML 태그로 글꼴 속성을 지정할 때

<i><b><font size="4" color="#ff0000" face="tahoma">Sample Text 1</font></b></i> <i><b><font size="4" color="#ff0000" face="tahoma">Sample Text 2</font></b></i> <i><b><font size="4" color="#ff0000" face="tahoma">Sample Text 3</font></b></i> <i><b><font size="4" color="#ff0000" face="tahoma">Sample Text 4</font></b></i>

HTML 태그와 CSS로 글꼴 속성을 지정할 때

<style type="text/css"> /*<![CDATA[*/ span.font_ex1{font-style:italic;font-size:18px;font-weight:700;font-family:tahoma;color:#f00} /*]]>*/ </style> <span class="font_ex1">Sample Text 1</span> <span class="font_ex1">Sample Text 2</span> <span class="font_ex1">Sample Text 3</span> <span class="font_ex1">Sample Text 4</span>

HTML과 CSS를 함께 사용했을 땐 위 그림처럼 같은 글꼴 속성을 가진 문장이나 단어가 몇 번이 반복되어 나오더라도 class가 같다면 일괄적으로 적용되므로 문서가 복잡해질수록 효용성이 커진다. (예제 1에서 span 태그를 사용한 이유는 span 태그가 문서에 외형적인 변화를 주지 않기 때문이다. 필요에 따라 span뿐 아니라, p, table, div 등 다양한 태그에 글꼴 속성을 지정할 수 있다.)

그런데 위 예에서 스타일 지정 부분의 span.font_ex1 뒷부분을 살펴보면 font-style, font-size, font-weight 등 글꼴 속성을 정의하는 각 요소가 산발적으로 나열된 것을 확인할 수 있다. 이 모든 요소를 간단히 정의하는 방법이 바로 font 속성이다.

CSS의 font 속성은 글꼴을 표시할 때 사용되는 기울임, 크기, 두께, 글꼴, 글꼴 변형(small-caps) 5가지 속성을 하나로 묶어서 표현할 수 있다.

일단 아래 표를 통해 font에서 사용할 수 있는 속성과 각 속성의 내용을 살펴보자.

<<CSS font 속성>>
<순서>	font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family, generic-family]
<속성>	font-style	normal, italic, oblique, inherit
	font-variant	normal, small-caps, inherit
	font-weight	normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
	font-size/line-height	길이(px, pt, cm, em 등), %, 지정 값, 상대 값, inherit / normal, 숫자, 길이(px, pt, cm, em 등), %, inherit
	font-family	글꼴 이름, 글꼴 형식, inherit
<예>	font:italic small-caps 700 16px/5 tahoma, 'malgun gothic', sans-serif

font에서 사용할 수 있는 스타일은 모두 6가지다. font-style은 기울여 쓰기를 적용할 때 사용한다. italic과 oblique 모두 글자를 기울여 쓴 결과를 보여준다. 둘 사이에 시각적인 차이는 없다.

font-variant는 위 예의 글씨처럼 로마자 알파벳을 표현할 때 보통 글씨보다 크기가 작은 대문자로 모든 문자를 표현하는 것이다. 기능을 사용하려면 small-caps로 지정한다.

font-weight는 글자 굵기다. normal, bold처럼 사용할 수도 있고 100~900까지의 숫자로 표현할 수도 있다. normal은 400과 같고 bold는 700과 같다. 글꼴 대부분이 일반과 굵은 글씨체 두 가지로 구성되므로 normal과 bold를 제외한 값은 제대로 적용되지 않는다.

font-size는 글자 크기로 픽셀(16px), 포인트(12pt), em(1em), 100%, 1cm 등으로 표현한다. 또 지정된 값을 사용할 수 있는데 xx-small < x-small < small < medium(기본값) < large < x-large < xx-large의 지정 값을 사용하거나 smaller, larger처럼 부모 요소에 대한 상대 값을 사용할 수도 있다.

line-height는 글자가 위치한 줄 높이로 normal, 숫자, 길이, 백분율을 사용할 수 있다. normal은 페이지 기본값으로 표시하는 것이고 숫자는 지정된 글자 크기의 배수로 줄 간격을 표시한다. 길이, 백분율은 글자 크기와 같다. font 속성에 font-size와 line-height를 함께 사용할 땐 font-size/line-height처럼 슬러시(/)로 구분한다. 실제로 16px/1.8em처럼 사용한다.

마지막 font-family는 글꼴을 지정하는 속성이다. font-family 속성은 font-family: tahoma, sans-serif 형식으로 사용한다. 여기서 tahoma는 글꼴 이름이고 sans-serif는 글꼴 형식이다. tahoma 글꼴로 표시하고 tahoma 글꼴이 없을 땐 sans-serif 형식의 글꼴을 대신 사용하라는 의미다. 영어로 generic-family라고 부르는 글꼴 형식은 글꼴의 특성에 따라 5가지로 분류한 것이다. serif는 명조처럼 끝이 가늘어지는 글꼴을 의미한다. sans-serif는 그 반대의 의미로 고딕처럼 글자 시작과 끝 두께가 일정한 글꼴을 말한다. monospace는 영문의 Courier New처럼 각 글자의 폭이 일정한 글꼴이다. cursive는 흘려 쓴듯한 필기체, fantasy는 장식체다. 아래 예의 영어 부분을 IE에서 보면 각 글꼴 특징을 알 수 있다. (IE 이외의 브라우저에선 User Agent 선언이나 사용자 선언 때문에 제대로 보이지 않을 수 있다.)

<p style="font-family:serif;">serif, 명조, 바탕</p>

<p style="font-family:sans-serif;">sans-serif, 맑은 고딕, 돋움</p>

<p style="font-family:monospace;">monospace, 모노스페이스</p>

<p style="font-family:cursive;">cursive, 필기</p>

<p style="font-family:fantasy;">fantasy, 장식</p>

글꼴 이름과 글꼴 형식을 함께 사용하면 내가 지정한 글꼴이 없어도 성질이 비슷한 글꼴로 대체하므로 작성자가 의도한 결과와 비슷한 결과물을 얻을 수 있다. 글꼴 이름을 여러 개 지정하면 앞에서부터 순서대로 적용되며 지정한 글꼴이 모두 없을 땐 마지막에 정의된 글꼴 형식이 같은 글꼴로 대체한다. font-family: verdana, 'malgun gothic', dotum, tahoma, sans-serif와 같이 실제로 적용할 수 있다. 의미는 verdana 글꼴을 사용하고 verdana 글꼴이 없거나 verdana에 포함되지 않은 한글이나 한문 등을 표현할 때 맑은 고딕을 사용하라는 것이다. 만약 맑은 고딕이 없다면 영문은 verdana로, 한글은 돋움으로 표시될 것이고 verdana와 맑은 고딕이 둘 다 없다면 돋움으로 모든 문자가 표시될 것이다. 만약 verdana, 맑은 고딕, 돋움이 모두 없다면 글자는 tahoma로 표시되고 tahoma에 없는 한글은 sans-serif 형식의 다른 글꼴로 표시하게 될 것이다. 각 글꼴 이름과 글꼴 형식은 쉼표(,)로 구분하고 글꼴 이름에 공백이 있을 땐 큰따옴표("malgun gothic")나 작은따옴표('malgun gothic')로 글꼴 이름을 감싼다.

각 속성에 있는 inherit은 부모 개체의 속성을 물려받는 것이다. 지금 글꼴을 적용할 항목 상위 요소에 지정된 글꼴 속성을 그대로 사용하겠다는 의미다. 그러나 브라우저에 따라 지원 여부에 차이가 있어서 사용하지 않는 것이 좋다.

이제 font 속성으로 예제 1을 다시 작성해보자.

<예제 2>

HTML 태그와 CSS font 속성으로 글꼴 속성을 지정

<style type="text/css"> /*<![CDATA[*/ span.font_ex2{font:italic 700 18px tahoma; color:#f00} /*]]>*/ </style> <span class="font_ex2">Sample Text 1</span> <span class="font_ex2">Sample Text 2</span> <span class="font_ex2">Sample Text 3</span> <span class="font_ex2">Sample Text 4</span>

복잡하던 스타일 정의 부분이 깔끔하게 정리됐다. 93바이트에서 55바이트로 수치상으로도 확 줄었다. 이는 스타일 시트 안에 글꼴 정의 부분이 많으면 많을수록 그 차이가 벌어진다.

font 속성은 게시물 내용을 강조하거나 특정 글자의 표시 방식을 바꾸는 데 사용할 수도 있지만, 블로그 스킨 전체나 웹페이지 전체의 글꼴을 지정하고 수정할 때 편리하다. 예를 들어 CSS 처음에 body{font:14px/180% 'malgun gothic', '맑은 고딕', dotum, 돋움, sans-serif}처럼 스타일을 지정하면 작성한 HTML 문서 body 부분 전체에 지정한 글꼴을 사용하게 된다.

font 속성은 필요한 속성만 정의하고 필요하지 않은 속성을 생략할 수 있지만, 글꼴 종류나 글꼴 형식이 지정되지 않으면 속성 자체가 적용되지 않을 수 있다. 글자 크기만 바꾼다거나 두께만 바꾸고 싶을 땐 font 속성 대신 font-size나 font-weight를 사용하는 것이 좋다.