typography

✅ 크기

/* css*/
font-size: 1px; 
font-size: 1rem; 

/* 
px: 절대값, 고정된 폰트의 크기를 지정할때 사용
    (사용자가 글꼴의 크기를 조정할 수 없다)
rem: 상대값, 브라우저의 설정에 따라 가변적으로 크기 변경 
*/

✅ 색깔

/* css*/
color: color-name; 
color: hex; 
color: rgb;

참고 site https://html-color-codes.info/Korean/

✅ 텍스트 정렬

/* css*/
 text-align: left;
 text-align: right; 
 text-align: center; 
 text-align: justify;

/* justify : 좌우 정렬 같게(양끝에 꽉차게) */

✅ font-family

/* css*/
 font-family: arial, verdana, "Times New Roman", sefif;

/* 
- 왼쪽부터 차례로 글꼴이 나온다(사용자에게 첫번째 글꼴이 없으면 2번째(verdana)가 나오고, 2번째가 없으면 3번째(Times New Roman)가 나오는 순서)
- 즉, 비슷한 폰트들을 우선순위에 따라 왼 -> 오 순으로 놓는다

- "Times New Roman"처럼 글꼴 자체에 띄어쓰기가 있는 이름은 큰따옴표("")로 감싸준다

- 맨 마지막에는 '포괄적 폰트'로 마무리 해주기 
  -> serif : 삐침 있는 명조계열의 글꼴
  -> sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
  -> monospace : 글자 폭과 간격이 일정한 글꼴
  -> cursive : 손으로 쓴 것 같은 필기계열의 글꼴
  -> fantasy : 화려한 글꼴

-글꼴을 여러 개 설정할 때는 쉼표로 구분하며, font-family: Georgia, "Times New Roman", serif; 로 설정했을 때, 제일 먼저 Georgia 글꼴을 적용하는 것이 좋다.(없다면 Times New Roman 글꼴을 사용합). CSS로 설정한 글꼴이 없을 수도 있으므로, 마직막은 generic-family로 정해두는 것이 좋다.
*/

✅ font-weight

/* css*/
 font-weight: bold;
 font-weight: 900; (bold = 900) 

✅ font(종합 표현)

/* css*/
 .body{
   font: font-style  
         font-variant 
         font-weight  
         font-size/line-height  
         font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 
 }
/*
-폰트와 관련된 여러 속성을 축약형으로 표현하는 속성. 순서를 지켜서 기술해야 한다. 
❗ font: font-style  font-variant font-weight  font-size/line-height  font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 
*/

✅ web font 적용하기

/* css */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;600&family=Heebo:wght@100&display=swap');

/*
-각 글씨체를 적용하고 싶은 부분에 id등으로 빼서 넣어주기
font-family: 'Dosis', sans-serif;
font-family: 'Heebo', sans-serif;
*/

참고 site https://fonts.google.com/?authuser=1