글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

 

font-family:<글꼴 이름> ¦ [<글꼴 이름>, <글꼴 이름>]

 cf) 기본형 기호 이해하기
      1. ¦ 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미

font-size: 값1 ¦ 값2 ¦ 값3

      2. 속성 값을 나열할 때 키워드는 그대로 나열한다.

font-variant: normal ¦ small-caps

      3. 속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶는다. 이때 다른 속성을 유형처럼 사용할 수 있다.

font-size: <절대 크기> ¦ <상대 크기> ¦ <크기> ¦ <백뷴율>

font: <font-style><font-variant><font-weight>

 

글자 크기를 지정하는 font-size 속성

 

font-size: <절대 크기> ¦ <상대 크기> ¦ <크기> ¦ <백뷴율>

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

• 키워드를 사용하여 글자 크기 지정하기
  - 미리 약속해 놓은 키워드 중에서 하나를 사용할 수 있다.
  - xx-small < x-small < small < medium < large < x-large < xx-large
• 단위를 사용하여 글자 크기 지정하기
  - 음숫값은 사용 불가
  - 과거 절대 크기 단위인 px이나 pt를 많이 사용했지만 모바일 기기까지 고려해야 하는 요즘에는 상대 크기 단위인 em이나 rem을 많이 사용한다.
  - 1em = 16px, 12pt
  

  종류	설명
  em	부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로(1em)으로 한 후 비율 값을 지정한다.
  rem	문서 시작 부분(root)에서 지정한 크기를 기준(1 rem)으로 한 후 비율 값을 지정한다.
  ex	해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정한다.
  px	모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정한다.
  pt	포인트라고 하며, 일반 문서에서 많이 사용한다.

• 백분율을 사용하여 글자 크기 지정하기
  - 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방범

 

이탤릭체로 글자를 표시하는 font-style 속성

 

font-style: normal ¦ italic ¦ oblique

- normal
  : 기본값으로 일반적인 형태로 표시

- italic
  : 이탤릭체로 표시

- oblique
  : 이탤릭체로 표시

 

글자 굵기를 지정하는 font-weight 속성

 

font-weight: normal ¦ bold ¦ bolder ¦ lighter ¦ 100 ¦ 200 ¦ ... ¦ 800 ¦ 900

- normal
  : 기본값, 보통 굵기

- bold
  : 굵게

- bolder
  : 원래보다 더 굵게

- lighter
  : 원래보다 더 가늘게

- 100, 200, 300, ... , 900
  : 100~900 사이의 굵기를 표현하며 100은 가장 가늘게, 900은 가장 굵게