2. 폰트 관련 속성
1) font 속성
✔ font - size, style, weight
- font-size : 글자의 크기
- 대부분의 브라우저는 16px를 기본으로 함
- font-style : 문자의 변화
- normal(default), italic, oblique...
- font-weight : 굵기
- normal - 400
- bold - 700...
- 폰트에 따라 지원 폭이 다름(넘어가면 최대치 적용)
✔ font - family
- 글꼴 선택 속성
- 여러 개의 글꼴을 나열해서 사용
'맑은고딕', sans...- 앞에서부터 사용 가능한 폰트인지 판단 후 적용 됨
✔ line-height
- 줄의 높이
- 글꼴마다 기본값이 차이가 있음 (line-height으로 통일 가능)
- 부모 요소의 height = 자식 요소의 line-height으로 주면 행 높이 중간으로 맞춰짐
✔ font와 단축속성(shorthand)
앞서 나온 font의 속성들을 단축해서 표현 가능하다.
- font-size와 font-family는 반드시 포함해야 함
```css
.text {
font: 20px 'Times New Roman', 맑은고딕, serif...;
} - font-style, font-weight는 순서대로 가장 앞에 적어줘야 함
.text { font: italic 100 20px 'Times New Roman', Times, serif; } - line-height는 size 뒤에
/를 붙이고 사용함.text { font: italic 100 20px/1.7 'Times New Roman', Times, serif; }
✔ letter-spacing, word-spacing
여백, 폰트마다 간격이 다르다.
- letter-spacing
- 글자 사이 간격
- 음수도 가능
- word-spacing
- 단어 사이 간격
- % 사용 가능
2) text 속성
✔ text-align
정렬
left,center,right- 블록 크기에 맞춰서 정렬
- 따라서 span, inline 요소에 적용 안됨
✔ text-indent
들여쓰기
- text-align과 마찬가지로 inline 요소에 적용 안됨
✔ text-decoration
글자 장식
- 대부분 shorhand로 작성함
- 순서는 상관이 없음
- text-decoration-line은 필수
- none, underline, overline, line-through
- 여러 개 동시에 지정 가능
- text-decoration-color, text-decoration-style, text-decoration-thickness...
span { text-decoration: line-through red 3px double; }
✔ word-break
텍스트가 자기 콘텐츠 밖으로 overflow할 때 줄을 바꿀 지 지정(box wrap같은 느kkim). 한중일 텍스트와 일반 텍스트 차이가 있음
- break-all: overflow를 방지하기 위해 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있음
- keep-all: 한중일 텍스트에선 줄을 바꿀 떄 단어를 끊지 않음
✔ text-transform
한국어엔 적용 불가능, 상속됨
- 대표적으로 쓰이는 속성
- capitalize: 각 단어의 첫 문자를 대문자로 만듦
- uppercase: 모든 문자를 대문자로 바꿈
- loswercase: 모든 문자를 소문자로 바꿈