CSS 글꼴 Font 속성

CSS에서 사용할 수 있는 font 속성

CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font)을 다양하게 설정할 수 있습니다.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size

CSS 글꼴 집합(font-family) CSS에는 두 가지의 글꼴 집합(font family)이 있습니다.

- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)

font-family 속성

font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다.
font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다.
만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다.
이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됩니다.

글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 합니다.
또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓습니다.

1
2
3
4
5
6
7
<style>
    .serif { font-family: "Times New Roman", Times, serif; }
    .sansserif { font-family: Arial, Helvetica, sans-serif; }
 
</style>
Colored by Color Scripter
cs

적용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html lang="ko">
<head> 
<meta charset="UTF-8">
 <title>CSS Fonts</title>
 <style>
  .serif { font-family: "Times New Roman", Times, serif; }
  .sansserif { font-family: Arial, Helvetica, sans-serif; }
 </style>
</head>
<body>
 <h1>font-family 속성 글꼴</h1>
 <p class="serif">Times New Roman 글꼴 적용</p>
 <p class="sansserif">Arial 글꼴 적용</p>
</body>
</html>

cs

font-style 속성

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가집니다.
- normal : 텍스트에 어떠한 스타일도 적용하지 않습니다.
- italic : 텍스트를 이탤릭체로 나타냅니다.
- oblique : 텍스트를 기울입니다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.

3
4
5
6
7
8
9
<style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
 
</style>
cs

적용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html><html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>CSS Fonts</title>
 <style>
  .normal { font-style: normal; }
  .italic { font-style: italic; }
  .oblique { font-style: oblique; }
 </style>
</head>
<body>
 <h1>font-style 속성을 이용한 글꼴의 스타일 설정</h1>
 <p class="normal">이 문단은 normal 스타일이 적용되어 있습니다.</p>
 <p class="italic">이 문단은 italic 스타일이 적용되어 있습니다.</p>
 <p class="oblique">이 문단은 oblique 스타일이 적용되어 있습니다.</p>
</body>
</html>
cs

font-variant 속성

font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.
이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.

1
2
3
4
5
6
7
<style>
    .normal { font-variant: normal; }
    .smallCaps { font-variant: small-caps; }
 
</style>
cs

적용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html><html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>CSS Fonts</title>
 <style>
  .normal { font-style: normal; }
  .italic { font-style: italic; }
  .oblique { font-style: oblique; }
 </style>
</head>
<body>
 <h1>font-style 속성을 이용한 글꼴의 스타일 설정</h1>
 <p class="normal">이 문단은 normal 스타일이 적용되어 있습니다.</p>
 <p class="italic">이 문단은 italic 스타일이 적용되어 있습니다.</p>
 <p class="oblique">이 문단은 oblique 스타일이 적용되어 있습니다.</p>
</body>
</html>

cs

font-weight 속성

font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.
사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.
또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.

3
4
5
6
7
8
9
<style>
    .normal { font-weight: normal; }
    .bold { font-weight: 600; }
    .bolder { font-weight: bolder; }
 
</style>
cs

font-size 속성

font-size 속성은 텍스트의 크기를 설정합니다.

웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다.
하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.
이때에는 제목을 위한 HTML 요소인 <h1>태그부터 <h6>태그를 사용해야 합니다.

font-size 속성값

font-size 속성값은 다음과 같이 두 가지 방식으로 표현할 수 있습니다.

1. 절대적 크기
2. 상대적 크기

절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.

상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.
또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있습니다.

font-size의 크기 단위

font-size 속성값에 자주 사용되는 대표적인 크기 단위는 다음과 같습니다.
백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.

배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다.

4
5
6
7
8
9
10
11
<style>
    body { font-size: 100%; }
    #large { font-size: 2.5em; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>
cs

적용방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html><html lang="ko">
<head> <meta charset="UTF-8">
 <title>CSS Fonts</title>
 <style>
  body { font-size: 100%; }
  #large { font-size: 2.5em; }
  #small { font-size: 0.7em; }
  #fixed { font-size: 20px; }
 </style>
</head>
<body>
 <h1>font-size 속성을 이용한 글꼴의 크기 설정</h1>
 <p id="large">글꼴의 크기를 2.5em 으로 변경합니다.</p>
 <p>글꼴의 기본 크기인 1em 입니다.</p>
 <p id="small">글꼴의 크기를 0.7em 으로 변경합니다.</p>
 <p id="fixed">글꼴의 크기를 20px 로 변경합니다.</p>
</body>
</html>
cs

저작자표시 비영리 변경금지

'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글

html icon 아이콘 적용하기 (0)	2017.11.01
html 주석(comment) (0)	2017.10.11
Html5 표현태그 텍스트서식태그 (0)	2017.07.12
CSS a href 링크 / div 링크 100% 버튼 (8)	2017.07.04
인포그래픽 아이콘사용방법 (2)	2017.06.30

미래디자인 life

CSS 글꼴 Font 속성

CSS에서 사용할 수 있는 font 속성

'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글

티스토리툴바

CSS 글꼴 Font 속성

CSS에서 사용할 수 있는 font 속성

'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글

'홈페이지만들기/Html_css&css3' Related Articles

티스토리툴바