1. 타이포그래피(typography)

이름	설명
em	폰트의 전체 높이
ex ( = x-height )	해당 폰트의 영문 소문자 x의 높이
Baseline	소문자 x를 기준으로 하단의 라인
Descender	소문자에서 baseline 아래로 쳐지는 영역
Ascender	소문자 x의 상단 라인 위로 넘어가는 영역

---

2. font-family

• font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한다.
• 글꼴을 지정

/* 사용법 */
font-family: family-name | generic-family ( | initial | inherit );

• family-name : 사용할 폰트의 이름
• generic-family : family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 한다.

serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있다.

/* 사용 예시 */
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; 

마지막에는 반드시 generic-family를 선언 해주어야 한다. -> 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.

---

3. line-height

• 장문의 글에서는 가독성을 위해서 행간을 조정한다.
• 숫자만 입력가능!

line-height: normal | number | length | initial | inherit ;

줄간격이 아니라 em 박스 + 상하단의 여백까지를 의미한다!

※ 주의할 점

line-height의 값으로 1. number를 선언할 때와 2. %로 선언할 때의 차이를 알아야 한다.

number	%
부모 요소의 숫자 값이 그대로 상속	%에 의해 이미 계산된 px값이 상속

body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                                  /* line-height = 20px; */


body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                                          /* line-height = 40px; */