CSS : Typography

테스트 텍스트 만드는 방법 => lorem*200

⭕️ font-size 3가지 단위(px, em, rem)
: px 절대단위
: em, rem 상대단위(기준에 따라 달라짐)

• em (잘안씀)
  • 실제로 적용된 폰트 사이즈 (parent의 font-size가 20px이면 1em = 20px 이됨)
• ✅ rem (root(html) em) => html의 적용된 font-size를 1rem 으로 봄

html {
	font-size: 20px;
}
.box {
	font-size: 2rem; // 40px;
}

⭕️ line-height 3가지 단위(px, em, rem) em 많이 사용함

.box {
    font-size: 20px;
 	line-height: 1.5; (30px) // px, rem일 경우 단위를 적어줘야 하지만 em 은 생략 가능
}

⭕️ letter-spacing 2가지 단위(px, em) em 많이 사용함
: 글자 사이 간격 조절
: 즉 -5% 로면 / 100 => -0.05em

⭕️ font-weight 숫자별 굵기 기억(100 단위만 가능)
: 100 => Thin, 300 => Light, 400 => Regular, 500 => Medium, 700 => Bold, 900 => Black

⭕️ font-family body에 한번만 적용하면 모두 적용됨
예외) form 태그 관련은 별도로 준다. (button, input 등등)

⭕️ text-indent 들여쓰기
⭕️ text-transform (none, capitalize : 앞자리 대문자, uppercase, lowercase)
⭕️ text-decoration (none, underline, line-through, overline)
⭕️ font-style (normal, italic, oblique)