font (글꼴)

font-style

• 글자 기울기 지정
• 속성 값
  • normal : 스타일 없음
  • italic : 이탤릭체
  • oblique : 기울어진 글자

font-weight

• 글자 두께를 지정
• 속성 값
  • normal : 기본 글자 두께, 400과 동일
  • bold : 글자 두껍게, 700과 동일
  • bolder : 부모 요소보다 더 두껍게 (bold보다 두껍다는 개념이 아님)
  • lighter : 부모 요소보다 더 얇게
  • 숫자 : 100부터 900까지의 100단위 숫자 9개

font-size

• 글자 크기를 지정
• 속성 값
  • % : px, em, cm 등 단위로 지정 (기본값 : 16px)
  • xx-small, x-small, small, medium, large, x-large, xx-large
  • smaller : 부모 요소보다 작은 크기
  • larger : 부모 요소보다 큰 크기

line-height

• 줄 간격 지정
• 속성 값
  • normal : 브라우저의 기본 정의 사용 (1 ~ 1.4)
  • 숫자 : 자체 글꼴 크기의 배수로 지정
  • 단위 : px, em, cm 등 단위로 지정
  • % : 자체 글꼴 크기의 비율로 지정
• 두 줄 사이의 간격이 아니라 ✨ 한 줄의 위 아래 여백 ✨

font-family

• 글꼴 지정
• 속성 값
  • 글꼴 이름 : 글꼴 후보 목록 지정
  • serif, sans-serif, monospace, cursive, fantasy : 글꼴 계열
• 사용 법
  • font-family: [글꼴후보1, 글꼴후보2, …], 글꼴계열;
  • 글꼴 계열은 필수로 입력해야 한다.
  • 후보를 작성하는 이유 : 사용자 브라우저마다 존재하는 폰트가 다 다르기 때문에

.box {
    font-family: Arial, "Open Sans", "돋움", dotum, snas-serif;
}

• 글꼴 계열
  • serif : 바탕체 계열
  • sans-serif : 고딕체 계열
  • monospace : 고정 너비 (가로폭이 동등한) 계열
  • cursive : 필기체 계열
  • fantasy : 장식 글꼴 계열