CSS 글꼴 속성은 텍스트 모양을 제어하는 데 사용됩니다. CSS 글꼴 속성을 사용하면 텍스트 크기, 색상, 스타일 등을 변경할 수 있습니다. 텍스트를 굵게 표시하거나 밑줄을 표시하는 방법을 이미 연구했습니다. 여기에서는 백분율을 사용하여 글꼴 크기를 조정하는 방법도 알아봅니다.
다음은 몇 가지 중요한 글꼴 속성입니다.
1) CSS 글꼴 색상
CSS 글꼴 색상은 CSS 글꼴의 일부인 것처럼 보이지만 CSS의 독립형 속성입니다. 텍스트의 색상을 변경하는 데 사용됩니다.
색상을 정의하는 데는 세 가지 형식이 있습니다.
- 색상명으로
- 16진수 값 기준
- RGB로
위의 예에서는 이러한 형식을 모두 정의했습니다.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> 지금 테스트해보세요 산출:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) CSS 글꼴 크기
CSS 글꼴 크기 속성은 글꼴 크기를 변경하는 데 사용됩니다.
글꼴 크기를 설정하는 데 사용할 수 있는 값은 다음과 같습니다.
| 글꼴 크기 값 | 설명 |
|---|---|
| xx-소형 | 매우 작은 텍스트 크기를 표시하는 데 사용됩니다. |
| x-소형 | 매우 작은 텍스트 크기를 표시하는 데 사용됩니다. |
| 작은 | 작은 텍스트 크기를 표시하는 데 사용됩니다. |
| 중간 | 중간 텍스트 크기를 표시하는 데 사용됩니다. |
| 크기가 큰 | 큰 텍스트 크기를 표시하는 데 사용됩니다. |
| x-대형 | 매우 큰 텍스트 크기를 표시하는 데 사용됩니다. |
| xx-대형 | 매우 큰 텍스트 크기를 표시하는 데 사용됩니다. |
| 더 작은 | 비교적 작은 텍스트 크기를 표시하는 데 사용됩니다. |
| 더 큰 | 비교적 큰 텍스트 크기를 표시하는 데 사용됩니다. |
| 크기(픽셀 또는 %) | 백분율 또는 픽셀 단위로 값을 설정하는 데 사용됩니다. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>지금 테스트해보세요
산출:
플로피 디스크
이 글꼴 크기는 매우 작습니다.
이 글꼴 크기는 매우 작습니다.
이 글꼴 크기는 작습니다.
이 글꼴 크기는 중간입니다.
이 글꼴 크기는 큽니다.
이 글꼴 크기는 매우 큽니다.
이 글꼴 크기는 매우 큽니다.
이 글꼴 크기는 더 작습니다.
이 글꼴 크기는 더 큽니다.
이 글꼴 크기는 200%로 설정되어 있습니다.
Java의 하위 문자열 예
이 글꼴 크기는 20픽셀입니다.
4) CSS 글꼴 스타일
CSS 글꼴 스타일 속성은 표시하려는 글꼴 유형을 정의합니다. 이탤릭체, 경사체 또는 일반체일 수 있습니다.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 지금 테스트해보세요 산출:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS 글꼴 변형
CSS 글꼴 변형 속성은 요소의 글꼴 변형을 설정하는 방법을 지정합니다. 정상적이고 작은 대문자일 수 있습니다.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 지금 테스트해보세요 산출:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS 글꼴 두께
CSS 글꼴 가중치 속성은 글꼴의 가중치를 정의하고 글꼴의 굵기를 지정합니다. 가능한 글꼴 두께 값은 보통, 굵게, 더 굵게, 더 가늘게 또는 숫자(100, 200...900까지)일 수 있습니다.
이 글꼴은 굵은 글꼴입니다.
이 글꼴은 더 굵습니다.
이 글꼴은 더 밝습니다.
이 글꼴의 두께는 100입니다.
이 글꼴의 무게는 200입니다.
이 글꼴의 두께는 300입니다.
C에서 배열 길이를 얻으십시오
이 글꼴의 무게는 400입니다.
이 글꼴의 무게는 500입니다.
이 글꼴의 무게는 600입니다.
이 글꼴의 무게는 700입니다.
이 글꼴의 무게는 800입니다.
이 글꼴의 두께는 900입니다.
자바 하위 문자열 예제지금 테스트해보세요
산출:
이 글꼴은 굵은 글꼴입니다.
이 글꼴은 더 굵습니다.
이 글꼴은 더 밝습니다.
이 글꼴의 두께는 100입니다.
이 글꼴의 무게는 200입니다.
이 글꼴의 두께는 300입니다.
이 글꼴의 무게는 400입니다.
이 글꼴의 무게는 500입니다.
이 글꼴의 무게는 600입니다.
이 글꼴의 무게는 700입니다.
이 글꼴의 무게는 800입니다.
이 글꼴의 두께는 900입니다.