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

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

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

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

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

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

공부를 하다보니 이 [글자-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 속성별 내용에 대해서는 다음에 다시 자세히 살펴보도록 하겠습니다.^^

지난 글을 통해 iNove_tyzen 스킨을 소개해 드렸는데요.

적용해 보셨나요? 어떠셨어요?

저는 본문 글씨가 너무 작아서 방문자들이 눈이 아프지 않을까 하는 걱정이 들더라구요.

물론 제가 보는데도 좀 불편하기도 하구요.

시력이 별로 좋은 편이 아니라서...ㅠㅜ

그래서 혹시 저처럼 폰트 사이즈에 만족치 못하시는 분들이 계시다면, 폰트를 수정하는 방법에 대해서도 안내해 드려야 제가 소개해 드린 스킨에 대한 책임을 완수하는 거라 생각해서 이렇게 바로 글을 쓰게 됐습니다.

기특하죠?

토닥 토닥~~~

궁디 팡팡~~~ ㅋㅋ

자 그럼 또 저를 따라 가보실까요?

먼저 글자가 얼마나 작은지 보시죠.

제 블로그 글인데요.

원본 100% 크기로 크롭만 한 상태입니다.

취향에 따라 작은 글씨가 깔끔하고 예쁘다고 느끼시는 분도 계실테지만,

어떤 분은 눈이 아플 수도 있겠다고 생각이 들더라구요.

물론 스킨을 디자인 하신 분이 가장 잘 어울린다고 생각되는 font-size를 설정하신 거라,

폰트를 수정한다는 것이 실례가 될 수도 있겠지만,

또 한편으론 작은 글씨 때문에 블로거가 전하고자 하는 정보 전달에 방해가 될 수도 있을 거라고 생각합니다.

암튼 수정해 보죠.

일단 관리 페이지로 가야겠죠?

아래 그림의 (1) 버튼을 클릭하시면 오른쪽에 HTML/CSS를 수정 또는 파일을 추가 할 수 있는 화면이 나옵니다.

우리가 수정할 곳은 아래쪽에 있는 (2) style.css에 있습니다.

그런데 화면이 굉장히 작죠?

(3) 에 화살표를 누르시면 창이 커지니까 참고하시구요.

style.css의 내용들이 쫙 펼쳐져 있죠.

저도 처음엔 도대체 이게 뭔가 싶을 정도로 눈이 빙빙 돌더라구요.

알아 볼 수 없는 이상한 글자만 잔뜩 써있고, 기호도 막~ 있고...ㅠㅜ

하지만 우리가 오늘 수정할 곳은 아~~~~~~~~주 간단하답니다. ^^

우선 본문에 적용되는 font가 어디에 정의 되어 있는지 찾아야 하는데요.

제가 확인해 보니 body 태그에 정의 되어 있더군요.

그림을 보시면서 따라 하시면 쉬울테니 일단 body 태그를 찾아 주세요.

font-family가 정의 되어 있고, 그 바로 아래에 font-size:0.75em; 이라고 되어 있는 걸 찾으셨다면 이미 성공하셨다고 보셔도 됩니다.

0.75em 이라고 되어 있는 걸 1em 으로 바꿔 주세요.

em 이 의미하는 건 나중에 html 기초에 대해 말씀 드릴 기회가 된다면 설명 드리기로 하구요.

여기선 걍 PASS 할께요. ^^ (귀찮... ㄷㄷㄷ)

암튼 이 것만 수정하면 글자 크기가 아래 그림처럼 커진답니다.

어떤가요?

이 정도 크기면 보기에도 편안하지 않나요?

저는 이 정도 크기면 될 것 같아요.

조금 더 크게 하고 싶으시면 1.2em 정도로 하셔도 되구요.

너무 크다 싶으신 분은 0.9em 정도로 수정하시면 됩니다.

참고로 이 스킨(iNove_tyzen)에만 적용하는 font-size 수정 방법입니다.

다른 스킨에서 똑 같이 따라 하시면 스킨 전체의 글자 크기가 틀어져 버릴 수도 있으니,

주의하세요.

각 스킨들 마다 폰트를 적용하는 방법들이 전부 다르니 꼭 신중하게 확인하셔야 합니다.

[수정1] 여러분께서 보고 계신 지금 이 글은 1em 에서 0.9em 으로 추가 수정한 화면입니다.

글을 다 쓰고서 봤더니 너무 큰 것 같은 감이 있어서 수정했습니다. ^^

[수정2] 스킨 우측 하단에 있는 mail 버튼과 twitter 버튼을 클릭 했을 때 javascript 가 스킨 원본 그대로 적용되어 있더군요. 사용자 분에게 맞도록 수정해야 할 듯합니다. 내일 수정하는 법도 글을 올리겠습니다.

스킨을 바로 적용하면서 글을 썼더니 수정할 게 많네요. Sorry~!

글은 여기까집니다.

도움이 되셨는지...?

도움이 되셨다면~ 버튼을~ 눌러주세요. (요건 신동엽 불후의 명곡2 버전입니다. 자체 음성 지원 좀.... ㅋㅋㅋ)