font-family

font-family 속성을 사용하면 글꼴을 지정할 수 있다.

띄어쓰기가 있는 글꼴은 쌍따옴표로 감싸야 한다.

형식

font-family:<글꼴1>, <글꼴2>, ...<글꼴 유형>;

예시

p {
  font-family: BatangChe, "Times New Roman";
}

마지막에는 반드시 글꼴 유형(generic-family)을 작성하도록 권장한다.
(사용자 지정 폰트를 가져오지 못했을 때 사용하기 위해서)

글꼴 유형 종류

serif - 삐침이 있는 명조 계열의 글꼴

sans-serif - 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴

monospace - 텍스트 폭과 간격이 일정한 글꼴

fantasy - 화려한 글꼴

cursive - 손으로 쓴 것 같은 필기체 계열의 글꼴

웹 폰트

https://fonts.google.com/

https://noonnu.cc/

---

font-size

텍스트 크기를 변경하고 싶을 때 사용하는 속성

형식

font-size: <크기>;

예시

p {
  font-size: 14px;
}

---

font-weight

텍스트의 굵기를 변경하고 싶을 때 사용한다.

형식

font-weight: <크기> or <속성값>;

예시

p {
  font-weight:100;
  font-weight:600;
  font-weight:900;

  font-weight:normal;
  font-weight:bold;
}

---

font-style

텍스트의 스타일을 지정한다.

형식

font-style: <속성값>;

예시

p {
  font-style:normal;
  font-style:italic;
  font-style:oblique;
}

---

color

텍스트의 색상을 지정한다.

형식

color: <속성값> or <RGB> or <HEX>;

예시

p{
  color:red;
}

---

text-align

텍스트를 정렬할 때 사용한다.

justify는 화면 넓이에 맞춰서 텍스트를 펼친다.

형식

text-align: <속성값>;

예시

p{
  text-align: left;
  text-align: center;
  text-align: right;
  text-align: justify;
}

---

text-decoration

텍스트를 꾸며 주기 위해 사용한다.

형식

text-decoration: <속성값>;

예시

p{
  text-decoration: none;
  text-decoration: line-through;
  text-decoration: overline;
  text-decoration: underline;
}

속성값

line-through - 중간선
overline - 텍스트 위 선
underline - 텍스트 아래 선

---

letter-spacing

자간을 조절할 때 사용한다.

형식

letter-spacing: <크기>;

예시

p{
  letter-spacing:15px;
}

---

line-height

텍스트 한 줄의 높이를 지정한다.

형식

line-height: <크기> or <속성값>;

예시

p{
  line-height: normal;
  line-height: 1;
  line-height: 200%;
  line-height: 16px;
}

---