글꼴 관련 스타일(font-famliy, font-size 등)

 글꼴 지정 (font-famaily)

body {
	font-family: "맑은 고딕", 돋움, 굴림
	}

/* 맑은(v)고딕 처럼 공백이 있는 경우 두 개로 인식할 수 있기 때문에 "" 큰 따옴표로 묶는다. */

/* body 전체에 맑은 고딕을 적용하고 그 폰트가 없으면 돋움, 돋움도 없으면 굴림으로 적용하라. */

글꼴 크기 (font-size)

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

• 절대 크기 : 브라우저에서 지정한 글자 크기
• 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
• 크기 : 브라우저와 상관없이 글자 크기를 직접 지정
• 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%) 표시

키워드를 사용한 글자 크기

xx-small < x-small < small < medium < large < x-large < xx-large

글자 크기의 단위

• em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 값을 지정
• rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 비율값을 지정
• ex : 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
• px : 모니터의 1px을 기준(1px)으로 한 후 비율값 지정
• pt : 포인트. 일반 문서에서 가장 많이 사용

※ 예전에는 절대크기인 px과 pt를 많이 사용했지만 모바일 기기 사용환경까지 고려할 때는 상대크기인 em과 rem을 많이 사용한다.

1em은 16px, 12pt와 같다.

백분율로 글자 크기 표현

부모요소의 글자 크기가 font-size: 16px; 처럼 단위로 표현되어 있어야 한다.

이탤릭체 표현 (font-style)

font-style: normal | italic | oblique

• normal : 기본값. 일반적인 형태로 표시
• italic : 이탤릭체가 폰트에 있는 경우. 이탤릭체로 전환하라는 속성.
• oblique : 이탤릭체가 없는 폰트의 경우 글자를 강제로 기울이는 것.

※ 요즘 대부분의 폰트는 이탤릭체를 지원하기 때문에 웹에서는 주로 italic을 사용한다.

글자 굵기 (font-weight)

font-weight: normal | bold | bolder | lighter | 100~900

• normal : 기본값. 보통 굵기.
• bold : 굵게
• bolder : 원래보다 더 굵게
• lighter : 원래보다 더 가늘게
• 100 ~ 900 : 100 (가장 가늘게) ~ 900 (가장 굵게)