Typography:
1. 자주 사용하는 요소
- font-size: 글씨의 크기.
-- px: 절대 단위. 크기 고정.
-- em, rem: 상대 단위. 비례 값.
--- em: equal to capital M. 대문자 M의 크기가 기준. 실제로 적용된 폰트 사이즈가 1em
부모 요소 폰트 사이즈를 20px, 자식 요소 폰트 사이즈를 1.5em으로 하면 30px이 되는 식.
--- rem: root em. html에 적용된 폰트 사이즈를 1rem으로 보겠다는 뜻. 부모 요소를 무시하고 html에 적용된 크기를 따라감. - line-height: 줄 간격
-- em을 많이 사용. em으로 표기할 경우 따로 단위 표시를 하지 않는 게 관례. e.g.,line-height: 1.5;
-- 줄 간격을 아무리 넓혀도 글자는 그 줄 간격의 가운데에 배치된다. 일종의 꿀팁. - letter-spacing: 자간
-- px, em을 주로 사용. rem은 잘 사용하지 않음
-- em을 많이 사용. 단 em 생략하면 안 됨. - font-family: 서체.
-- 없을 땐 콤마로 나열함.
-- e.g.,font-family: "Poppins", "Roboto", sans-serif;. sans-serif는 아무런 산세리프 체나 쓰라는 뜻. - font-weight: 굵기
-- Regular는 400, Bold는 700을 쓰는 게 관례 - color: 색상
-- hex, rgb, rgba.
--#0066ff, rgb(0, 102, 255), rgba(0, 102, 255, 1)
2. 자주 사용하지 않지만 알아둬야 하는 요소
-
text-align: 정렬
-
text-indent: 들여쓰기. +-n px,
-
text-transform: none | capitalize(어절의 첫 자가 대문자) | uppercase(모든 문자가 대문자) | lowercase(모든 문자가 소문자) -
text-decoration: none, underline, line-through, overline
-- a 태그의 밑줄을 없애는 용도로 많이 쓴다! -
font-style: normal, italic, oblique
-- < em > 태그는 기본적으로 italic으로 돼있기 때문에 그걸 돌리는 용도로 쓰곤 한다. 한글 폰트도 적용된다.
3 webfont
- body에다가 webfont 설정하면 일일이 설정 안해도 됨.
