이번 포스팅은 font 관련 속성들에 대해 정리해 본다. 😁😁
Typography란?
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. -Wikipedia-
Typegraphy란 한마디로 글자의 배열이나 간격, 글씨체등을 더욱 읽기 쉽게, 예쁘게 만드는 것을 의미한다. 관련 태그를 정리해보자.
em vs rem
1. em
- 크기를 나타내는 상대적 단위
- 0.5em이라 하면 부모의 font-size * 0.5 px이 된다
- 0.5em === 50%, %로 대체해서 쓸 수 있다.
2. rem
- root em으로, 0.5rem이라 하면 root의 font-size * 0.5px이 된다.
- rem의 기본 크기는 html의 font-size(16px)이다.
em과 rem의 사용에 대해서는 조금 더 자세하게 포스팅 할 예정이다.
font에 관련된 설정들
font-size
- 글자 크기에 대한 속성으로 px, em, rem으로 사용 가능하다.
- 반응형 웹사이트를 제작하기 위해서는 px의 사용은 지양하는 것이 좋다!
line-height
- line의 높이에 대한 설정으로 줄 간 거리를 지정한다.
- px, em, rem 사용가능하다.
letter-spacing
- 글자 사이의 간격을 조정한다.
- em을 많이 사용한다.
font-family
- 글씨체 관련 속성으로 최근에 여러 무료 font가 웹 상에 공개되어있다. 대표적으로 google Font가 있다!
text-align
- 글자의 정렬에 관한 속성으로 left, right, center로 설정 가능하다.
- block tag는 영향을 받지 않고, inline tag만 정렬한다.
font-weight
- 글자 두께에 관한 속성으로, 100 단위로 적어줘야 한다. 대표적인 값들은 다음과 같다.
- Thin : 300
- Regular : 400
- Bold : 700
color
글자 색을 나타내는 태그로 3가지 방식으로 표현 할 수 있다.
- hex값으로 표현 :
color : #AABBCC
- rgb로 표현 :
rgb(0,103,305)
- rgba(rgb+투명도) :
rgba(0,102,255,1)
a가 0이면 완전 투명, 0.5면 50% 투명!