폰트, 텍스트

🏹 타이포그래피의 구조

• em : 폰트의 전체 높이
• ex : 해당 폰트의 영문 소문자 x의 높이
• Baseline : 소문자 x를 기준으로 하단의 라인
• Descender : 소문자에서 Baseline의 아래 영역 (g, j, p, q, y)
• Ascender : 소문자 x의 상단 라인 영역 (b, d, h, l)

---

🏹 폰트, 텍스트 관련 속성

속성	설명
font-family	글꼴을 지정하는 속성
	└ family-name : 사용할 폰트의 이름     한글 폰트의 경우 작은따옴표로 묶어서 선언하며, 영문자를 같이 선언해야 함
	└ generic-family : 지정된 글꼴을 사용할 수 없을 경우     브라우저가 대체 폰트를 선택할 수 있게 함 (상속되지 않음)
font-size	글꼴의 크기를 지정하는 속성
	└ em : 부모 요소의 font-size에 em 값을 곱한 크기 └ rem : 루트의 font-size에 rem 값을 곱한 크기
vertical-align	요소의 수직 정렬을 지정하는 속성
	└ length : 요소를 지정한 길이만큼 올리거나 내림 (음수 허용) └ % : 요소를 line-height 기준으로 올리거나 내림 (음수 허용)
text-align	텍스트의 정렬을 지정하는 속성
	└ justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬
text-indent	텍스트의 들여쓰기를 지정하는 속성
	└ length : px, em 등 고정 수치로 지정 (음수 허용) └ % : 부모 요소의 width를 기준으로 퍼센트로 지정

* generic-family 의 종류

• serif : 문자의 끝 부분에 장식이 있는 글꼴 (바탕체 계열)
• sans-serif : 문자의 끝 부분에 장식이 없는 글꼴 (돋움체 계열)
• monospace : 문자의 가로 폭이 동일한 글꼴
• cursive : 필기체 계열의 글꼴
• fantasy : 화려한 장식이 있는 글꼴

---

🏹 font 속성

font 관련 속성들을 한번에 선언할 수 있는 축약형 속성
제약 사항이 많고 가독성이 좋지 않기 때문에 실무에서 지양

  💥 축약형 선언 시 유의해야 할 점
     ◽ font-size와 font-family는 반드시 선언해야 함
     ◽ 각 속성의 선언 순서를 지켜야 함
     ◽ 빠진 속성이 있다면 기본 값으로 지정

---

🏹 웹 폰트 (@font-face)

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)에 다운로드하여 적용하는 속성
서버에 저장하여 제공하거나, 웹 경로를 통해 사용

속성	설명
font-family	글꼴을 지정하는 속성
src	다운로드 받을 글꼴의 경로(URL)를 지정하는 속성

• 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에
                    기본으로 설치되어 있어 사용할 수 있는 경우
• 이미지 폰트 : 시각적인 요소를 넣고 싶을 때
                    글꼴 대신 이미지를 이용하여 표현하는 경우

---

🏹 단어 관련 속성

속성	설명
white-space	요소 안에 공백을 어떻게 처리할지 지정하는 속성
	└ nowrap : 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음                  말줄임 표현 시 주로 사용
letter-spacing	자간을 지정하는 속성
word-spacing	단어 사이의 간격을 지정하는 속성
word-break	단어가 라인 끝에 나올 경우 어떻게 처리할지 중단점을 지정하는 속성
word-wrap	요소를 벗어난 단어의 줄바꿈을 지정하는 속성

  💥 word-break와 word-wrap은 언어의 종류에 따라 다르게 동작하므로
       어떤 차이를 가지고 동작하는지 이해하고 사용해야 한다.