작성일자
카테고리 CSS/CSS기초
웹사이트에서 폰트의 사용은 아주 중요합니다. 폰트의 모양과 크기는 디자인에서 가장 중요한 역할을 하고 검색엔진은 글내용을 기준으로 검색을 해서 캐시에 저장을 해놓기 때문에 어떤 폰트를 사용하든 상관없지만 이것은 컨텐트에 해당하고 디자인을 위한 프리젠테이션을 담당하는 CSS는 모양을 결정하기 위해서 다양한 폰트중에 하나를 선택하고 크기를 결정하기 위해서 CSS의 폰트 속성을 사용합니다. 

웹페이지는 픽셀기준이기 때문에 폰트로 표현하는데 한계가 있어서 좋은 디자인을 위해서는 포토샵에서 폰트로 이미지를 만들어 글자 대신에 사용하기도 합니다. CSS3가 지원되지 않는 웹브라우저에서도 원하는 효과를 내기 위해서는 글자의 그라데이션이라든가 그림자효과를 포토샵을 이용해서 이미지를 만들어 사용하더라도 텍스트는 반드시 포함시켜야하죠. 그래서 이미지 대체 테크닉 을 사용하기도 합니다. 이번글에서는 여러가지 폰트 속성에 대해서 알아봅니다.

index.html



첨부파일을 열면 나눔고딕 웹폰트를 사용할 수 있도록 링크가 있으며 2의 폰트이름을 폰트패밀리에 입력하면 나눔 고딕으로 나오게 됩니다. 웹폰트를 사용하면 내 컴퓨터에 이 폰트가 없더라도 나눔고딕으로 나오게 되고 방문자의 컴에 이 폰트가 없어도 나눔고딕으로 나오게 됩니다. 설정방법은 이곳 을 참고하세요. 3과 4의 각 요소에 대해서 폰트 속성을 적용해 보는 것이 좋습니다.

1. 폰트 속성의 단축형(Font Property Shorthand)


font:italic small-caps bold 12px/30px Georgia, serif;

폰트속성은 단축형을 많이 사용하는데 위와같은 순서로 나와야합니다. 즉 font-style font-variant font-weight font-size/line-height font-family 의 순서입니다. 폰트 사이즈와 폰트 패밀리는 항상 포함되어야 하지만 없는 경우 기본폰트를 상속(inherit)받습니다. 또한 font-style, font-variant, font-weight 가 생략된 경우 기본 값으로 설정됩니다. 기본값은 모두 normal입니다. 개별 속성에 대해서 알아봅니다.

2. 폰트 패밀리(font-family)


font-family:"Times New Roman",Georgia,Serif;

폰트 속성은 위와같이 개별적으로 사용할 수도 있습니다. 폰트패밀리는 폰트의 이름을 사용하는데 같은 폰트 패밀리라도 이름이 다양하게 있습니다. 예를들어 디자인에 많이 쓰이는 Helvetica 폰트도 백여가지의 폰트가 있습니다. 모두 다른 이름이 있죠. 이런 폰트 집합체를 폰트 패밀리라고 하는 것이 아니라 font-family 다음에 여러가지 폰트를 설정한 경우 방문자의 컴퓨터에 첫번째 폰트가 없는 경우 두번째 폰트를 사용하고 그래도 없는 경우 마지막으로 세리프 폰트를 사용하는 것이죠. 그래서 이 모두를 합쳐서 폰트 패밀리라고 합니다. Times New Roman과 같이 폰트 이름이 두개 이상인 경우 항상 쌍따옴표를 사용해서 묶어줘야합니다.
폰트 이름 다음에는 콤마가 필요합니다.

폰트 패밀리의 마지막에 오는 단어는 모든 종류의 폰트이름을 지정할 수 없기 때문에 총괄적인 이름을 사용합니다.

Serif는 글자의 선 끝에 장식을 말합니다. 영문폰트의 Serif 폰트의 예는 Times체가 있습니다. 한글의 경우 바탕체에 해당합니다.

Sans는 None을 의미하며 sans-serif는 장식이 없는 글자이며 대표적으로 Helvetica가 있습니다. 한글의 경우 굴림, 돋움에 해당합니다.

Cursive는 필기체를 의미합니다. 한글의 경우 궁서체에 해당합니다.

Fantasy는 틀에 얽메이지 않은 다양한 형태의 글자인데 한글의 경우 아주 많죠. 이 폰트 패밀리 이름만 입력하면 한글부분은 굴림으로 나오지만 영문부분은 한양 헤드라인체가 나옵니다.

Monospace는 글자의 폭이 일정한 폰트를 말합니다. 예를 들어 영문 소문자 i 나 l은 폭이 좁지만 Monospace를 사용하면 폭이 일정한 폰트가 나오게 됩니다. 대표적인 폰트로 Times New Roman이 있죠. 폭이 일정하기 때문에 알아보기 쉬워서 개발자용 코딩폰트로 많이 사용합니다. 한글로는 굴림체, 돋움체, 바탕체, 궁서체가 있습니다. 한글의 폰트 이름에 ~체가 들어가면 Monospace 폰트입니다. 첨부파일을 웹에디터에 열고 직접 실험해보시는 것이 좋습니다. 

이러한 폰트 패밀리를 지정하지 않으면 기본으로 Sans-serif 폰트로 나오게 됩니다. 

3. 폰트 사이즈


폰트 사이즈의 단위는 대부분 픽셀(px)을 사용하지만 사용하는데 편리한 것은 em입니다. 이것은 body 태그에 기본 폰트 사이즈를 픽셀로 입력해두고 헤드의 타이틀이나 본문의 제목글, 본문글의 사이즈 단위를 em으로 설정하면 body의 폰트 크기만 변동시켜도 em으로 설정한 곳은 모두 비율적으로 변동됩니다. 


우선 body 태그에 12px/1.5 를 입력합니다. 1.5는 line-height로 단위가 em이며 생략가능합니다. 기본 폰트 사이즈에 비율적으로 줄넓이가 변동되는 것입니다. 3의 h1태그에는 폰트 사이즈를 입력하지 않아도 사용하는 웹브라우저의 CSS에 따라서  h1태그 자체에 기본적으로  폰트 사이즈가 2em으로 설정되어있습니다. 4의 p 태그는 body 태그의 폰트 사이즈를 상속받습니다. 이대로 저장하고 웹에서 보면 5처럼 나옵니다. h1태그에 2em을 p태그에 1em을 입력해도 같은 모양으로 나옵니다. 그러면 h1태그에 3em, p태그에 1.2em을 입력하면 6처럼 글자가 조금 커져서 나옵니다. em을 사용하는 편리한 점은 다음 단계입니다. 7의 수치를 15픽셀로 하고 웹에서 보면 모든 글자의 사이즈가 아래 이미지처럼 모두 변경됩니다. 만일 모든 글자의 사이즈를 픽셀로 지정했다면 일일히 픽셀 수치를 변경해줘야 가능한 일이죠.

4. 줄높이(line-height)


line-height는 글의 가독성에 큰 영향을 미치므로 특히 본문 글에는 반드시 적절한 line-height를 설정해두는 것이 좋습니다. 단위없이 사용하면 배율을 의미하고 퍼센트(%)를 사용해도 됩니다. 현재 설정된 폰트 사이즈를 기준으로 합니다. 

line-height:normal; 

대부분의 경우 line-height를 설정하지 않으면 기본적인 줄높이가 설정되지만 위와 같이 사용하는 경우는 부모요소로부터 상속받지 않고 기본 line-height로 설정할때 사용합니다.

line-height:3; 

단순히 숫자만 있는 경우는 배율을 의미합니다. 폰트 사이즈를 기준으로 합니다. 폰트사이즈가 12픽셀이라면 line-height는 36픽셀이 됩니다.

line-height:30px; 

정확한 수치를 위해 픽셀을 단위로 설정할 수도 있지만 픽셀을 사용하면 폰트사이즈가 변동될 경우 같은 비율로 늘어나지 않기 때문에 불편합니다.


5. 자간(letter-spacing; Kerning)


letter-spacing:3px; 

글자간의 간격을 조절하여 가독성을 높이게 됩니다. 주로 픽셀을 사용하여 세밀한 조정을 하지만 em을 사용하여 폰트 사이즈가 변경됨에 따라서 비율적으로 변동되도록하는 것이 좋습니다. 이 속성은 단축형에는 사용되지 않습니다. line-height의 경우는 마이너스 값을 갖지 못하지만 이 속성은 마이너스 값을 가질 수 있어서 세밀한 조정이 가능합니다.

6. font-weight


font-weight:bold; 

폰트의 굵기는 기본이 normal이고 굵게하기는 bold입니다. 부모요소보다 더 굵게 하려면 bolder를 사용합니다. 더 가늘게는 lighter라는 값을 사용하지만 실제로 이런 값을 사용해도 변화는 없습니다. 그러니 주로 normal과 bold를 사용합니다. 폰트의 크기가 여러종류라면 어떨지 모르지만 font-weight의 값을 백단위 숫자로도 사용이 가능한데 100이 제일 가늘고 200, 300, 400, 500, 600, 700, 800, 900의 순서대로 굵어집니다. 실제 웹브라우저에 실험을 해보면 100부터 500까지는 normal로 나오고 600부터 900까지는 bold로 나옵니다. 


7. 폰트 스타일(font-style)


font-style:oblique; 

폰트 스타일은 옆으로 기울어진 이탤릭체인가 아닌가의 구별입니다. 속성값으로 normal, italic, oblique가 있는데  oblique는 이탤릭과 같은 의미입니다. 다만 폰트 이름에  oblique가 있을 경우 이를 검색해서 나타내도록 합니다. 결국에는 이탤릭과 같습니다.

8. font-variant


font-variant:small-caps; 

이는 영문에만 해당하는 속성으로 단어의 첫글자를 대문자로 하고 그다음 글자를 소문자로 했을 경우 소문자는 크기는 소문자 크기이지만 글자의 형태는 대문자로 나오게 됩니다. 물론 첫글자를 소문자로 했다면 이 글자도 대문자로 나오면서 크기는 소문자 크기로 나옵니다.


9. text-transform


text-transform:uppercase;

정확하게는 폰트 속성은 아니지만 폰트를 관리하므로 이곳에 포함시킵니다. uppercase는 모든 글자를 대문자로 만들고 lowercase는 소문자로 capitalize는 문장의 단어에서 첫글자를 대문자로 만듭니다.

10. @font-face <css3>


@font-face {
    font-family: 'Museo300';
    src: url('Museo300-Regular-webfont.eot');
    src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo300-Regular-webfont.woff') format('woff'),
         url('Museo300-Regular-webfont.ttf') format('truetype'),
         url('Museo300-Regular-webfont.svg#Museo300') format('svg');
}

영문폰트의 경우 폰트 사이트에서 웹폰트를 다운 받으면 서버에 업로드하여 사용할 수가 있습니다. Myfont.com에서 무료 폰트를 다운받으면 웹폰트로 사용할 수 있는데 위처럼 사용방법도 포함되어있습니다. 여러개의 폰트파일이 있는데 여러가지 웹브라우저에 최적화하기 위한 것입니다. 위 폰트들을 업로드하고 업로드 폴더를 url에 입력합니다. 폰트의 이름은 font-family:다음에 오는 이름으로 관리됩니다. 위 코드는 CSS에 입력하고 일반적인 폰트 사용법처럼 사용하면 됩니다. 다른 서버에 있는 폰트를 사용할 경우 다음과 같이 인터넷 주소를 입력합니다.

src: url('http://www.w3schools.com/css3/Sansation_Light.ttf') 

까움이

아하~! 폰트 없이도 원하는 폰트로 지정해주는 블로거들은..
다 이런 방법을 이용하신 것이었군요!
잘 메모해서 갑니다! 감사합니다.
즐거운 한 주 되셔요~ ㅎㅎ

베누시안

안녕하세요. 네 웹폰트를 사용하면 편리하죠. 댓글 감사합니다.~

홈박스

test 라고 위에 오타가 있네요
text라고 고쳐야 할듯 합니다.

베누시안

안녕하세요. 반갑습니다. 오타 찾아주셔서 정말 감사합니다. 댓글 감사드려요.

도토리

웹폰트 편리하네요.. 혹시 영문하고 한글 모두 있을 경우 각각 지정이 될까요? 한글 폰트는 대부분 해외엔 없을것 같아 웹폰트로 해야할것 같은데.. 이 경우는 어떻게 해야 할런지..

입문자

정주행을 끝냈습니다.
써주신 강의를 직접 코딩하고 이리저리 부딪혀 보니 ...
정말 꿈만같은 (비록 허접스럽지만) 홈페이지가 완성되었습니다 ㅠㅠㅠㅠ
감동의 쓰나미
정말 감사합니다!
복받으세요^^

베누시안

안녕하세요. 답변이 늦었습니다. 웹디자인에 관심이 많으시군요. 오랜 시간을 계속하기 힘드실텐데 수고하셨습니다.

jk

안녕하세요 재밌게 공부했습니다.
카테고리 이름이 CSS기초인데 이걸 다 보았으니 기초는 끝난건가요? :)
그렇다면, 중급,고급으로 들어서기위한 정보좀 얻고자 합니다.
괜찮은 서적이나 정보 아시면 추천 해주세요
제가 등록한 유료강의사이트는 여기보다 수업의 양질이 떨어지네요
감사합니다 :)

베누시안

좋게 평가해 주시니 고맙습니다. 사실 기초과정이라고 했지만 그런 제목으로 한 것은 CSS를 처음 하시는 분들을 위해서 자세하게 설명드리느라고 그런 것이고 사실 고급과정의 내용과 같습니다. 기초과정을 다 보셨다면 혼자 힘으로 웹사이트를 만들어보세요. 블로그 스킨이 가장 좋습니다. 그러다 보면 막히는 부분이 있을 겁니다. 다시 보면서 메모하고 하다보면 뭐든 혼자서 할 수 있게 됩니다. 그런 다음에는 다른 복잡한 소스를 보더라도 어떻게 하는지 바로 알 수 있죠. CSS는 어느 정도만 알면 혼자 연습하는게 좋습니다.

따뜻한친구

일단 여기까지 css를 한번 다 보았습니다. 막연하고 나와 무관한 것 같았던 내용을 보고 많이 배운 것 같습니다. 고맘습니다. 초보자도 쉽게 따라하게끔 설명도 차분히 자세하게 해 주셔서 많은 공부가 되었습니다. 아직은 잘 모르지만 또 한번 더 복습하고 하다보면 눈을 뜨게 될겠지요. 모듈화된 방식으로 사이트를 만들고 있지만 레이아웃만은 내것을 만들어 보고싶어 찾았는데 많은 도움이 되었습니다. 강좌가 뒤로 갈 수록 어렵지만 반복학습을 해야 할 것 같네요. 제가 놀던(? ㅋ) 곳과 비교해생소한 것도 많고 뭔가 다른 듯하면서도 유사한 것 같은 느낌을 가지고 여기가지 왔군요. 이제 다시 한번 더 반고 학습을 시간나는대로 해 봐야 할 듯합니다. 물론 강좌가 더 이어지는지 계속 지켜 보고 있어야겠지요. 감사합니다.

베누시안

반복 보다는 한번이라도 스스로 해보는 것이 가장 좋습니다. 하다보면 어디서 안되고 문제점을 찾아서 그 또한 혼자서 해결하다보면 지식은 금방 늘어나더군요. CSS에 관한 제 글은 아주 기초적인 레이아웃 부분만 있지만 이것만이라도 잘 하면 나머지는 다 쉬워집니다.

티스토리 툴바