✅ font(text)

▲ font-size와 font-family는 필수값

▲ font 속성 default 선언법

.default{
  font-size:20px;
  font-family:'Times New Roman', Times, serif;
}

▲ 이렇게도 선언 할 수 있음

.text{
  color:red;
  font: italic bold 20px/1.7 'Times New Roman', Times, serif;
}

이 방식으로 속성을 나열할 땐, 꼭
1. font-style과 font-weight는 font-size보다 앞에 선언되어야하고,
2. 사이즈 뒤에 / 하고 line-height를 작성해줘야 함.
3. 그리고 맨 뒤에 font-family 작성

▲ font-color/color : 글씨 색깔

▲ font-size : 글씨 크기

▲ font-family : 글꼴 지정하는 속성

▲ line-height : 폰트의 위아래 여백

▲ letter-spacing : 문자와 문자 사이의 간격(한글로치면 한 글자와 글자 사이의 간격)/음수도 사용 가능

▲ word-spacing: 단어와 단어 사이의 간격/음수도 사용 가능

▲ text-align

• 텍스트의 위치를 지정
• text-align : left, center, right 값이 있음
• 블록요소에 스타일 가능
• 인라인요소같은 경우 그 요소를 감싸고있는 부모에 text-align을 주면 스타일 적용됨

▲ text-indent : 글 앞부분 들여쓰기 속성(px, %로 값 줌)/블록요소에만 스타일 가능

▲ text-decoration : line, style,

▲ word-break

• 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 정함
• word-break : normal(기본값), break-all, keep-all 속성이 있음
• break-all은 주로 영어에서 사용
• keep-all은 한중일 텍스트에서 사용

▲ text-transform

• 한글에는 적용할 수 없는 속성
• 실제 텍스트가 변하는건 아니고 스타일만 바뀌는 것

✅ 절대길이

▲ 모니터에 보여지는 그 크기로 보여줌(고정값)
▲ 픽셀(px) 사용!! -> css에서는 모든게 px로 계산됨

✅ 상대길이

📌 글꼴 상대길이

▲ em, rem : 주로 font-size에서 사용
▲ 1em : 부모의 font-size(0.5em은 부모 font-size의 절반)
▲ 1rem : root의 font-size(root == 브라우저 기본 설정값)

📌 뷰포트 백분율 길이

▲ vh : 뷰포트의 초기 컨테이너 블록 높이 1%와 같음