Css font

CSS 폰트 관련 주요 속성 정리

font-family

글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다.

예) font-family: '맑은 고딕', Malgun Gothic, Arial, sans-serif;

font-size

글자의 크기를 지정합니다. px, em, %, rem 등 다양한 단위를 사용할 수 있습니다.

예) font-size: 16px; font-size: 1.2em;

font-weight

글자의 굵기를 지정합니다. normal, bold, 100~900의 숫자 값 등으로 표기할 수 있습니다.

예) font-weight: bold; font-weight: 700;

font-style

글자의 스타일을 지정합니다. 일반적으로 normal(기본), italic(이탤릭체), oblique(기울임체) 등이 있습니다.

예) font-style: italic;

font-variant

글자의 변형을 지정합니다. 주로 small-caps를 사용해 소문자를 작은 대문자로 변환할 때 사용합니다.

예) font-variant: small-caps;

font-stretch

글꼴의 가로 너비를 늘이거나 줄입니다. normal, condensed, expanded 등 다양한 값이 있습니다.

예) font-stretch: condensed;

line-height

줄 간격(행간)을 조정합니다. 숫자, 퍼센트, 단위(px, em 등)로 지정할 수 있습니다.

예) line-height: 1.5; line-height: 24px;

font

위의 여러 속성을 한 줄로 요약해서 지정할 수 있는 단축 속성입니다.

예) font: italic bold 16px/1.5 'Malgun Gothic', Arial, sans-serif;

CSS 길이 및 폰트 크기 단위 설명

px (픽셀)

고정된 크기를 지정할 때 사용하는 절대 단위입니다. 예) font-size: 16px;

font-size 의 em 단위의 의미

의미

em은 CSS에서 폰트 크기를 지정할 때 사용하는 상대적인 단위입니다. 현재 요소의 폰트 크기를 기준으로 배수로 크기를 지정합니다.

예를 들어, font-size: 1.35em이라고 하면, 이 요소의 폰트 크기는 상위 요소 혹은 본문의 폰트 크기에 1.35를 곱한 값이 됩니다.

예시

상위 요소의 font-size가 16px일 때,

font-size: 1.35em;
  

라고 지정하면, 16px × 1.35 = 21.6px이 됩니다.

추가 설명

em 단위는 상속의 영향을 받으므로, 여러 단계로 중첩되면 누적되어 계산될 수 있습니다.

상대적인 크기를 지정하는 데 유용하며, 글자 크기, 여백(margin/padding) 등 다양한 속성에서 사용됩니다.

rem (root em)

최상위 루트 요소(html)의 폰트 크기를 기준으로 하는 상대 단위입니다.

브라우저의 기본 폰트 크기(보통 16px)에 따라 결정됩니다.

예) font-size: 2rem; (html이 16px이면 2rem = 32px)

% (퍼센트)

보통 부모 요소의 크기를 기준으로 상대적으로 지정할 때 사용하는 단위입니다.

예) font-size: 120%; (부모의 크기가 16px이면 120% = 19.2px)

pt (포인트)

인쇄 매체에서 주로 사용하는 단위로, 1pt는 1/72인치입니다.

웹에서 사용 시 모니터 해상도에 따라 차이가 있을 수 있습니다.

예) font-size: 12pt;

vw, vh

뷰포트(화면) 너비(vw), 높이(vh)를 기준으로 하는 단위입니다.

예) font-size: 3vw; (뷰포트 너비의 3%)

ex, ch

ex는 소문자 x의 높이를, ch는 0(숫자 영)의 너비를 기준으로 하는 상대 단위입니다.

예) font-size: 2ex;, font-size: 10ch;