Web
[web][css] typography
winter17
2023. 5. 12. 12:16
- 절대 단위 Absolute unit
- px
- 상대 단위 Relative unit
- em : Equal to capital M
- 실제로 적용된 폰트 사이즈
- 상위 요소에 적용된 폰트 사이즈를 상속
- rem : Root eM
- html에 적용된 폰트 사이즈를 상속
- html에 폰트 사이즈가 20px이 적용되어있고, 내부 p태그에 3rem을 적용하면 p태그의 실제 폰트 사이즈는 20 * 3 = 60px이다.
- em : Equal to capital M
- line-height 줄간격
- em을 많이 사용
- em으로 표현할 때 em단위를 생략함
- letter spacing 자간
- 글자간 간격
- px, em
- font-family 폰트 서체
- font-family: 'Poppins', 'serif', 'sans-serif'; → 앞에 있을 수록 우선순위가 높음
- font-weight 폰트 굵기
- regualr size 400
- bold size 700
- color 폰트 색상
- hex | rgb | rgba
- text-align
- left | center | right
- text-indent
- 들여쓰기
- text-transform 폰트 대소문자
- none | capitalize(space를 기준으로 첫글자가 대문자) | uppercase | lowercase
- text-decoration 폰트 줄 긋기
- none | underline | line-through | outline
- anchor 태그에서 많이 사용
- font-style 폰트 기울기
- normal | italic | oblique
- html의 em태그가 기본값으로 italic이 적용되어 있는데 normal값으로 바꿔줄 때 사용