블로그를 운영하다 보면 이것 저것 참 신경 쓰이는 것이 많습니다.

예쁜 그림도 넣고 싶고, 글자도 예쁘고 눈에 띄게 하고 싶고, 이왕이면 내용도 알차게 하고 싶고 말이죠.^^

저도 처음에 블로그를 시작하면서, 단순히 내가 쓰고 싶은 내용을 나만의 공간에 그냥 표현하고 싶다는 생각으로 쉽게 접근했더랍니다.

근데 점점 시각적인 것들이 신경 쓰이더라구요.

사진도 찍어야하고, 포토샵도 해야하고, 웹 관련 공부도 계속 하게 되더라구요.ㅠㅠ (이게 웬 고생 ㅋㅋ)

그래서 오늘은 블로그의 핵심이 되는 [글자]에 관련된 내용을 써보려고 합니다.

공부를 하다보니 이 [글자-font]에 관련된 내용으로만도 수십 페이지를 써야할 만큼 내용이 방대하더라구요.

모든 내용을 다 알지도 못하고, 또 속속들이 다 쓸 자신도, 시간도 없습니다.ㅋㅋ

다만 가장 많이 사용하고 궁금해하는 내용들로 포스팅을 하려고 합니다.

먼저, 폰트(font)의 속성에는 어떤 것들이 있으며, 그 속성들을 지정하려면 어떻게 해야하는지 살펴보겠습니다.

폰트는 font-style, font-variant, font-weight, font-size, line-height, font-family라는 속성을 가지는데요.

차례차례 그 내용에 대해 알아보면...

font-style

글자의 기울기를 결정하는 속성입니다.

이외에도 oblique / initial / inherit라는 속성이 있는데,
oblique는 이탤릭과 마찬가지로 글자를 기울여주며 시각적인 차이는 없습니다.

initial은 필기체, inherit은 부모요소에서 상속 받는 글꼴입니다.

이 세가지는 그렇다~ 하는 정도로만 알고 넘어 가셔도 무방합니다.

font-variant

영문 소문자를 작은 대문자로 나타내는 속성입니다.

예문에서 보듯이 small-caps는 영문 소문자를 크기가 작은 대문자로 변환해주는 속성입니다.

이 역시 뜻만 알고 넘어 가셔도 됩니다.

font-weight

글꼴의 두께를 결정하는 속성입니다.

특별히 지정을 하지 않는다면 기본값(default)은 다른 속성들과 마찬가지로 nomal이구요.

이 외에 bolder, lighter 등의 속성이 있으나, 저와 같은 초보 블로거들은 굳이 몰라도 될듯 합니다.^^

font-size

글자의 크기를 결정하는 속성입니다.

글자 크기를 지정하는 속성으로는 위의 예처럼 포인트(pt), 픽셀(px), em 등이 있습니다.

아주 전문적인 작업을 하신다거나, 민감한 분이 아니면 무엇을 사용하시던 크게 문제가 되지 않지만, 각 속성마다 차이는 분명히 있습니다.

최근에는 많은 사이트들이 em을 이용해서 텍스트 크기를 지정하는데요. 그 이유는 pt나 px가 절대 단위인 반면, em, %는 상속 받은 크기에 비례해서 변하는 상대 단위라서 화면 크기에 따라 유동적인 디자인이 가능하기 때문에 최근 표준으로 자리를 잡아가고 있다고 합니다.

사실 font-size에 대해서는 따로 포스팅을 해야할 만큼 복잡하고 내용도 방대하지만, 저와 이글을 읽고 계신 분들(?)은 블로그 정도나 남보다 예쁘게 꾸며보고 싶은 정도의 목적을 가지고 있기 때문에 과감히 패~쑤하도록 하겠습니다.ㅋㅋ

이에 대해서는 자세하고 전문적으로 다루고 있는 사이트들이 많으니 참고하실 분은 [font-size]로 검색 신공을 발휘해보시기 바랍니다.^^

line-height

텍스트의 행 높이(간격)을 결정하는 속성입니다.

글자의 모양과 관련해서 직접 영향을 주는 속성은 아니지만 행의 높이(간격)도 가독성이나 기타 시각적인 영향을 많이 주기 때문에 중요한 속성입니다.

line-height는 사실 단순하지가 않습니다.

오히려 매우 복잡하죠.ㅠㅠ

부모 요소로부터 그 값을 상속 받기 때문에, 어떤 요소에 10px/150%라고 값을 정하더라도 무시되는 경우가 허다하죠.

font-size와 line-height는 마음 단단히 먹고 공부하지 않으면 막상 내 블로그에 적용하기가 쉽지 않은 속성이랍니다.

아무튼 line-height가 행 간격을 결정하게 되며, 가독성에 지대한 영향을 준다는 정도는 꼭 알고 있어야 할 것으로 생각됩니다. 행 간격이 너무 좁으면 보기에 답답하고, 다음 줄을 찾기도 어려우니 말이죠.^^

font-family

글꼴의 형태를 결정하는 중요한 속성인데요.

그 이름에서 알 수 있듯 폰트의 가족을 결정 지어주는 속성입니다.

font-family를 결정하는 속성 값은 family-name과 generic-family로 이루어지는데요.

family-name은 우리가 흔히 알고 있는 굴림, 나눔고딕, verdana, dotum 등 폰트 이름을 말하고,
generic-family는 글꼴의 종류를 말해줍니다.

generic-family는 serif, sans-serif 가 대표적으로 많이 쓰이는데요. 이외에도 monospace, cursive, fantasy 등 총5개의 대표 글꼴이 있습니다.

generic-family는 각각 특성에 따른 폰트들을 포함하고 있구요. 여러개를 묶어서 사용하기도 합니다.

예를 들어, 나눔고딕과 돋움, verdana, Century Gothic 등의 서체를 한번에 지정할 수 있고, 마지막엔 글꼴의 특성인 sans-serif를 선언함으로써 font-family를 지정하게됩니다. 이때 Century Gothic처럼 폰트명이 두 단어 이상으로 된 것은 작은 따옴표(')나 큰 따옴표(")로 묶어 줘야합니다. (ex , font-family : 나눔고딕, "century gothic", verdana, 굴림, sans-serif ; )

근데 serif는 뭐고, sans-serif는 뭐야? 하는 분이 계실 것 같네요.^^

serif는 글자의 끝 부분 모양에 장식이 있는 서체들이구요. 대표적인 폰트로는 한글 바탕체, 궁서체, 영문 Georgia, Time New Roman 등이 있습니다.

sans-serif는 반대로 글자의 끝 부분에 장식이 없는 서체들입니다. sans는 불어로 "없다"라는 뜻이랍니다. 대표적으로는 한글 굴림, 돋움, 영문 Arial, Verdana 등이 있습니다.

이외에 monospace는 글자폭이 일정한 서체를, cursive는 필기체, fantasy는 장식이 화려한 글꼴을 말합니다.

font shorthand : 한줄로 축약하는 법

CSS를 통해 폰트를 지정하다보면 위에서 나열한 속성들을 하나 하나 지정하기가 귀찮아질 때가 있습니다.

그래서 한줄로 축약(shorthand)을 많이 하는데요.

이때는 font : [font-style] [font-variant] [font-weight] [font-size/ling-height] [font-family] ; 의 순서를 지켜서 정의해야 합니다.

이 중에서 앞의 세가지 속성, style, variant, weight는 생략 가능하지만 font-size와 font-family는 반드시 들어가야 합니다.

사실 블로그에 서체를 적용하는데 어려워 하시는 분들을 위해 간단히 포스팅 한다고 시작한 글인데...

쓰다보니 내용이 만만치가 않네요.

조금이라도 도움이 되는 분들이 계셨으면 합니다.^^

추천 버튼 누르는데는 1초도 안걸리는거 아시죠??? ㅋㅋ

유익한 포스팅을 하는데 아주 큰 힘이 된답니다. ^^

div 혹은 p 태그 속에서 폰트 지정하기

div나 p 태그와 함께 폰트를 지정하는 경우가 많이 생기는데, 이때 폰트를 지정하는 방법을 알아보겠습니다.  사실 포스팅하는 글 전체에 대해 미리 폰트를 정해두고 쓰기 때문에 각 글자(단어, 문단 등)에 대해서 별도의 폰트를 지정하는 일은 그리 많지는 않습니다.  하지만 강조를 하고 싶다던지, 예쁘게 꾸미고 싶다던지 하는 경우엔 별도로 폰트를 지정하게 됩니다.

이럴때 폰트를 바꾸는 일은 흔히 알고 있는 것처럼 <font></font>를 이용하면 됩니다.

그렇다면 <div>이나 <p>와 함께 쓰려면 어떻게 할까요?

예를 들어 글 전체의 폰트와 다르게 요소(여기서는 div) 내에서 궁서체를 따로 적용하고 싶다면...

<태그 작성 예문>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font-family:궁서체; font-size:20px; color:red; font-weight:bold; font-style:italic; ">적용된 예문입니다.^^</div>

이렇게 작성하면 됩니다.

<적용된 상태>

음... 예를 들어야 하는데 무슨 문장을 써야할지 모르겠네요. ㅋㅋ

이렇게 작성하면 됩니다.

자~~ 그런데 여기서 혹시 의문이 생기지는 않으셨나요? 위의 예문에서 font-family / font-size / font-weight 등의 속성을 따로 정했는데요.  이것을 한꺼번에 정해주는 방법은 없을까요?

<폰트 속성 한번에 적용하기>

font 속성을 한번에 지정하려면 아래와 같이 속성의 순서를 지켜야 합니다.

그럼 위의 예문을 이용해서 font를 한번에 적용해보겠습니다.

<div style="margin: 0 auto; border: 1px solid #999; padding: 5px 10px 5px 10px; font: italic bold 20px 궁서체; color:red; ">적용된 예문입니다.^^</div>

이렇게 순서를 지켜 작성하면 되구요.

그럼 이렇게 적용됩니다.^^

이해가 좀 되셨나요?

font 속성별 내용에 대해서는 다음에 다시 자세히 살펴보도록 하겠습니다.^^