브라우저는 기본적으로 html 적용 된 font-size 는 16px 이다.
* em : 실제로 적용된 font-size 기준으로 1 em 이라고 본다.
ex) font-size: 24px == 1em.
width : 20em;
20em 은 얼마인가 ? ->
20*24 => width: 480;
*rem : root
root: html 자체 (뿌리)
* line height (줄 높이) 즉, 줄 간격
line height 줄 경우 em 을 많이 사용.
font-size에 비례해서 값을 줄 경우 em 을 생략한다 ★ 관례 ★
line-height : 24px;
*letter spacing 글자 간격
마찬가지로 em 자주 사용 em 생략 하면 안 된다.
글자 = 100
글자에 비례해서 1% 줄이고 싶다면 ? -1/100 -> - 0.01em
글자에 비례해서 1.5% 줄이고 싶다면 ? -1.5/100 -> - 0.015em
글자에 비례해서 5% 줄이고 싶다면 ? -5/100 -> - 0.05em
* text-transform :
* text-decoration :
@font-face{ }
font-face 의 규칙 : 커스텀한 폰트를 나아가서 웹페이지에 로드한다.
the @font-face rule allows custom fonts to be loaded on a webpage.
css-tricks.com/snippets/css/using-font-face/
Using @font-face | CSS-Tricks
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from
css-tricks.com
Light(300),
Regular(400),
Bold(700),
Extra Bold(800)
라이브러리 제작.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'HTML & CSS' 카테고리의 다른 글
| box-shadow (0) | 2021.04.13 |
|---|---|
| Background (0) | 2021.04.12 |
| 반응형 (0) | 2021.04.09 |
| display:flex,none (0) | 2021.04.09 |
| transform: translate || scale || rotate (0) | 2021.04.07 |
