@font-face 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성입니다. 기본 값 : 없음 font-family(필수) 글꼴의 이름을 지정 src(필수) 다운로드 받을 글꼴의 경로(URL) font-style(옵션) 글꼴의 스타일 지정, 기본 값은 normal font-weight(옵션) 글꼴의 굵기 지정, 기본 값은 normal vertical-align 속성 요소의 수직 정렬을 지정하는 속성입니다. 기본 값 : baseline length 요소를 지정한 길이만큼 올리거나 내림. 음수 허용 % 요소를 line-height를 기준으로 올리거나 내림. 음수 허용 keyword baseline(기본 값), sub, super, top, text-top, middle, botto..
타이포그래피의 구조 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다. •em 폰트의 전체 높이를 의미합니다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) font-family 속성 글꼴을 지정하는 속성입니다. family-name: 사용할 폰트..