FONT

글꼴 property(속성) = font-family

.fontbox { font-family: "MalgunGothic", "Verdana", "Font1"; }

 *[fallback글꼴] : 해당 글꼴이 미설치된 경우, 순차적으로 뒷 폰트로 적용. 
 				   그마저도 없으면 기본글꼴 (윈도우-맑은고딕 / 맥-apple 산돌 고딕)

 

글꼴의 단위

1. 크기를 절대 사이즈로 고정 (px)
.mainParagraph { font-size: 24px; }

2. 일반적인 상황 (rem)
.mainParagraph { font-size: 1rem; }
> 기본 글자 크기가 1rem. > 2배로 크게하려면 2rem 등 
> root의 폰트 크기에 따라서만 상대적으로 변함

3. 반응형 웹
> 접속한 플랫폼의 너비(width)에 따라 레이아웃이 유동적으로 적용
> pc접속, 스마트폰 접속, 태블릿 접속 등 환경마다 CSS를 달리 적용해야함

4. 화면상의 너비나 높이에 따른 상대적인 크기가 중요한 상황
> vw (viewpoint width) 와 vh (viewpoint height)를 사용
> 보통 화면이 가득 채우고 딱 맞게 스크롤 되는 사이트의 경우 
> 100vw, 100vh사용

절대 단위 - px, pt 등 
상대 단위 - %, em, rem, ch, vw, vh 등

글꼴의 단위는 화면을 구축하는데 있어서 매우 중요하다. 개발 단계에서 다양한 사용자들이 다양한 플랫폼에서 접속 한다는 것을 미리 생각 해놔야 한다. 

 

 

기타

굵기: font-weight

밑줄: text-decoration

글자간 간격: letter-spacing

줄 간격: line-height

텍스트 정렬: text-align="left,right,center,justify(양쪽)"