[CSS] - (13) Typography

Typography 란 ?

텍스트를 보기 좋게, 읽기 쉽게 디자인하는 것

단순히 글자를 적는 게 아니라
크기, 간격, 굵기, 색상 등을 조절해서 가독성을 높이는 작업이다.

---

1. Essentials – 기본이 되는 속성들

① font-size

: 글자의 크기를 정하는 속성

✔ 사용 단위

• px: 절대 단위
• em(equal to capital M): 대문자 M의 크기를 기준으로 계산된다.
• rem(root em): html 태그의 font-size를 기준으로 계산된다.

---

② line-height

: 줄과 줄 사이의 간격

✔ 사용 단위

• px
• em
• rem

line-height: 1.6;

보통 line-height는
line-height(px) ÷ font-size(px) 로 계산해 비율 값을 구하고,
실제 CSS에서는 단위를 생략한 숫자 형태로 작성한다.
줄 간격이 커져도 글자는 그 줄 높이의 가운데에 배치된다.

---

③ letter-spacing

: 글자와 글자 사이의 간격

✔ 사용 단위

• px
• em (많이 사용)

letter-spacing: 0.02em;

line-height 와 다르게 letter-spacing 은 단위를 생략하면 안 된다.

---

④ font-family

: 사용하고 싶은 서체를 나열하면 된다.

font-family: "Poppins", "Roboto", sans-serif;

"Poppins 적용해주고 없으면 Roboto 그것도 없다면 sans-serif 계열 아무거나 적용해줘" 라는 뜻이다.

---

⑤ font-weight

: 글자의 굵기를 정하는 속성

100 단위로 증가하며, 보통 기본 굵기 400을 많이 사용한다.

---

⑥ color

: 글자의 색상를 정하는 속성

✔ 표현 방식
color: #0066ff;             /* hex */
color: rgb(0,102,255);      /* rgb */
color: rgba(0,102,255,1);   /* rgba */

rgba의 a는 alpha(투명도)
: 0 ~ 1 사이 값

---

2. And etc… – 알아두면 좋은 속성들

① text-align

: 정렬 방식

text-align: left;   /* 기본 */
text-align: right;
text-align: center;
text-align: justify;

• left | right | center: 줄 안에서 내용을 왼쪽/ 오른쪽/ 가운데로 정렬
• justify: 여러 줄에서 각 줄의 양쪽 끝이 맞도록 단어 사이 공백을 늘려서 정렬

---

② text-indent

: 문단 들여쓰기 / 내어쓰기

text-indent: 16px;
text-indent: -16px; /* 내어쓰기 */

---

③ text-transform

: 글자 변환

text-transform: none;
text-transform: capitalize; /* 단어 첫 글자 대문자 */
text-transform: uppercase; /* 전체 대문자 */
text-transform: lowercase; /* 전체 소문자 */

---

④ text-decoration

: 밑줄, 취소선 등

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

보통 <a> 태그의 기본 밑줄을 제거할 때 자주 사용한다.

---

⑤ font-style

: 기울기 설정

font-style: normal;
font-style: italic;
font-style: oblique;

<em> 태그를 쓰면 기본적으로 italic이 적용되는데
없애고 싶을 때 normal을 사용한다.