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