1. CSS 서체/글꼴/폰트 (Font)
ㅇ font 단축형 지정 형식
- { font : font-style font-variant font-weight font-size/line-height font-family; }
. 例) 요소명 { font: italic bold 13px/30px Times, serif }
.. 13px/30px => font-weight/line-height
ㅇ font-family : 글꼴 (서체 유형)
- sans-serif, serif, cursive, fantasy, monospace 등
. 1 이상의 폰트 지정은 콤마(,)로 구분하며,
. 나열된 순서대로 적용
. 폰트명 내 빈 칸있으면, 인용부호(" ")로 감쌈
. 한글 서체인 경우도, 인용부호(" ")로 감쌈
- [참고] 영문 서체 주요 유형
. serif 유형 : Times, Time New Roman, Georgia 등
.. serif : 글자 끝에 삐침 선을 갖는 폰트 유형
. sans-serif 유형 : Arial, Heltvetica, Verdana 등
.. sans-serif : 삐침 선 없는 폰트 유형 (sans : 없음을 뜻함)
. monospace
.. `모양을 살린 텍스트 형태`가 아니고, `프로그램 소스 형태`로 단순하게 보이려면,
.. font-family: monospace 가 바람직
ㅇ font-size : 글꼴 크기
- 키워드 지정 방식
. 절대 크기 지정 : xx-small, x-small, small, medium, large, x-large, xx-large
. 상대 크기 지정 : smaller, larger
- 수치 지정 방식
. 상대 크기 단위 : em (부모 글꼴 크기의 배수, W3C에서 권고하는 방식임),
ex (폰트 소문자 크기와의 상대 값),
% (부모 글꼴 크기의 백분율),
px (화면해상도에 따른 픽셀)
. 절대 크기 단위 : cm, mm, in, pt, pc
- 기본값 : 1em (= 16px)
* 통상,
. 본문 글씨 크기는,
.. PC 화면 : 12~14px 정도, 스마트폰 화면 : 16px 정도
. 기본 크기는,
.. h1 요소 : 32px, p 요소 : 16px 등
ㅇ font-weight : 폰트 굵기
- 키워드 : lighter (얇게), normal (보통), bold (강조,두껍게), bolder (더 두껍게)
- 수치 : 100, 200, ..., 900
ㅇ font-style : 글자 유형/형태 지정
- 키워드 : normal (정상), italic (기울임꼴), oblique (italic과 조금 다른 기울임꼴)
ㅇ font-variant : 작은 크기의 대문자로의 변환 지정
- 키워드 : normal, small-caps
ㅇ @font-face : 사용자 정의 글꼴
- 형식) @font-face { font-family: 사용자정의폰트명; src: url(글꼴파일명); }
- 글꼴파일명 例) *.ttf, *.otf, *.woff 등