Css font

네, 요청하신 내용을 미디어위키 양식으로 아래와 같이 정리해 드리겠습니다.

css font 속성

네, 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;

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) 등 다양한 속성에서 사용됩니다.