글꼴 관련 CSS 속성

Articles

CSS 소개

글꼴 관련 CSS 속성

이 글은 글꼴 관련 CSS 속성에 대해 설명합니다.

font-style 및 font-family와 같은 속성을 사용하는 방법과 사용 사례에 대해 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML 생성

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

타이포그래피 (폰트 관련)

`font-size` 속성

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size는 요소 내 텍스트의 크기를 지정하는 데 사용되는 CSS 속성입니다. 텍스트의 시각적 중요성을 조정하고 가독성을 향상시키는 데 사용됩니다. font-size는 다양한 단위와 방법으로 지정할 수 있습니다.

값을 지정하는 주요 방법

절대값(px, pt)

브라우저나 장치와 무관한 고정 크기를 사용하려면 픽셀(px)이나 포인트(pt)와 같은 절대 단위로 글꼴 크기를 지정하세요.

1p {
2    font-size: 16px;
3}

px: 픽셀은 가장 일반적으로 사용되는 단위입니다. 크기를 1픽셀 단위로 지정합니다.

1p {
2    font-size: 12pt;
3}

pt: 포인트는 인쇄에 일반적으로 사용되는 단위입니다. 1포인트는 1/72인치입니다.

상대값(em, rem, %)

부모 요소나 루트 요소의 글꼴 크기를 기준으로 상대적인 글꼴 크기를 지정할 수도 있습니다. 이는 반응형 디자인에 적합합니다.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em은 부모 요소의 글꼴 크기를 기준으로 하는 상대적 단위입니다. 부모 요소의 font-size가 16px인 경우, 1em은 16px과 같습니다.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem은 루트 요소(보통 <html> 요소)의 글꼴 크기를 기준으로 하는 상대 단위입니다.

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: %는 부모 요소의 글꼴 크기를 기준으로 비율(백분율)로 지정합니다.

키워드

키워드를 사용하여 사용자 친화적인 크기를 쉽게 지정할 수도 있습니다.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: 이러한 키워드는 브라우저에 따라 다르지만 사용하기 쉬운 기본 글꼴 크기를 정의합니다.

상대 키워드

부모 요소나 주변 텍스트 크기에 따라 키워드를 사용해 상대적인 글꼴 크기를 지정할 수 있습니다.

1p {
2    font-size: larger;
3}

larger: larger는 부모 요소보다 더 큰 글꼴 크기를 만듭니다.

1p {
2    font-size: smaller;
3}

smaller: smaller는 부모 요소보다 더 작은 글꼴 크기를 만듭니다.

일반적인 사용 예

반응형 디자인에서는 em과 rem을 사용하여 부모 또는 루트 요소 크기에 따라 유연한 글꼴 크기를 지정하는 경우가 많습니다.
고정형 디자인 또는 정밀한 디자인에서는 px를 사용하여 크기를 고정하는 것이 일반적입니다.

글꼴 크기 조정 예제

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

결론

font-size는 텍스트의 시각적 중요성과 가독성을 조정하는 데 중요한 속성입니다. 디자인 목적에 맞거나 유연한 반응형 디자인을 위해 단위와 키워드를 적절히 사용하는 것이 중요합니다.

`font-family` 속성

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

font-family 속성은 주로 다음 두 가지 유형의 값을 지정할 수 있습니다:.

특정 폰트 이름: 특정 폰트의 이름을 지정하세요. 시스템에 설치되었거나 웹 폰트로 사용할 수 있는 폰트를 지정하세요.
- 예제:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
일반 폰트 패밀리: 특정 폰트를 사용할 수 없을 때 사용할 폴백 폰트 그룹을 지정하세요.
- 예제:
  - serif: 세리프 (예: Times New Roman, Georgia)
  - sans-serif: 산세리프 (예: Arial, Verdana)
  - monospace: 모노스페이스 (예: Courier New, Lucida Console)
  - cursive: 필기체 (예: Comic Sans MS)
  - fantasy: 판타지 (예: Papyrus, Impact)

`font-family` 지정 방법

여러 폰트를 지정할 때는 콤마로 폰트 이름을 구분하고, 마지막에 일반 폰트를 폴백으로 설정하는 것이 좋습니다.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

이 경우, Times New Roman을 사용할 수 없으면 Georgia가 사용되고, 둘 다 없으면 serif 폰트가 사용됩니다.

`font-weight` 속성

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight는 텍스트의 굵기를 지정하는 CSS 속성입니다. 이는 텍스트의 시각적 강조와 스타일에서 중요한 역할을 하며 폰트 스타일을 변경하는 데 사용됩니다. font-weight는 숫자 또는 키워드로 지정할 수 있으며 얇은 것에서 굵은 것까지의 두께 범위를 나타냅니다.

`font-weight`의 주요 값

키워드

1p {
2    font-weight: normal; /* Default thickness */
3}

normal은 표준 글꼴 두께를 나타냅니다. 일반적으로 400에 해당합니다.

1p {
2    font-weight: bold; /* Bold */
3}

bold는 볼드체(굵은 텍스트)를 나타냅니다. 일반적으로 700에 해당합니다.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder는 부모 요소보다 굵은 텍스트를 나타냅니다.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter는 부모 요소보다 더 얇은 텍스트를 나타냅니다.

숫자 값

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight는 100에서 900까지의 숫자로도 지정할 수 있습니다. 숫자가 작을수록 텍스트가 얇아지고, 숫자가 클수록 텍스트가 굵어집니다. 일반적으로 폰트 패밀리는 특정 두께 범위를 지원하지만, 모든 숫자가 모든 폰트에 대해 사용 가능한 것은 아닙니다.

100: 얇은
200: 매우 얇은
300: 얇음
400: 보통
500: 중간
600: 약간 굵음
700: 굵음
800: 매우 굵음
900: 가장 굵음

`font-weight` 사용 예시

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

실제 사용 예시

표준 텍스트는 보통 400 (normal)을 사용합니다.
헤딩이나 강조된 부분에는 보통 700 (bold)을 사용합니다.
디자인에 따라 500 또는 600과 같은 중간 두께를 사용하여 과도한 강조를 피할 수도 있습니다.

요약

font-weight는 normal 또는 bold와 같은 키워드나 100에서 900까지의 숫자를 사용하여 텍스트의 두께를 지정하는 속성입니다.
lighter와 bolder는 부모 요소의 두께를 기준으로 상대적으로 조정됩니다.
디자인과 가독성을 기반으로 적절한 font-weight를 선택하는 것이 중요합니다.

`font-style` 속성

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style은 문자의 스타일을 지정하는 CSS 속성으로, 특히 기울임꼴 또는 보통 스타일을 적용하는 데 사용됩니다. 이 속성은 텍스트 강조와 디자인, 특히 제목과 인용문에서 자주 사용됩니다.

`font-style`의 주요 값

`normal`

1p {
2    font-style: normal;
3}

normal은 표준 문자 스타일입니다 (보통은 직립 문자).

`italic`

1p {
2    font-style: italic;
3}

italic은 텍스트를 기울임꼴(슬랜트)로 만듭니다. 이 스타일은 폰트 패밀리가 기울임꼴을 지원하는 경우에 적용할 수 있습니다.

`oblique`

1p {
2    font-style: oblique;
3}

oblique는 텍스트를 기울어지게 만듭니다. italic과는 달리, 폰트에 기울임꼴 버전이 없는 경우 텍스트를 인위적으로 기울일 수 있습니다.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

oblique에 각도를 지정하여 텍스트를 해당 각도만큼 기울이도록 지정할 수 있습니다. 이 사양은 oblique를 추가로 커스터마이징하기 위한 것입니다. 현재 대부분의 브라우저는 기울기 각도 지정을 지원하지 않지만, 일부는 지원합니다.

`font-style` 사용법

**italic**은 흔히 강조, 인용문 및 책 제목에 사용됩니다.
**oblique**는 폰트가 이탤릭 스타일을 포함하지 않을 경우, 텍스트를 인위적으로 기울이기 위해 종종 사용됩니다.
**normal**은 일반 텍스트 스타일로 되돌릴 때 사용됩니다.

요약

**font-style**은 텍스트의 기울기를 제어하기 위해 사용되며, 주요 값은 normal, italic, oblique입니다.
디자인에서 이탤릭 스타일은 텍스트를 강조하기 위해 자주 사용되며, 폰트가 이를 지원하지 않을 경우, oblique를 사용해 텍스트를 기울일 수 있습니다.

`color` 속성

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

color 속성은 CSS에서 텍스트의 색상을 지정하는 기본 속성입니다. HTML 요소의 텍스트 색상을 변경하는 데 사용되며, 다양한 형식으로 색상을 지정할 수 있습니다.

설명:

color-red 클래스는 키워드를 사용해 텍스트 색상을 빨간색으로 지정합니다.
- red, blue, green처럼 CSS에 정의된 색상 이름을 지정할 수 있습니다.
color-hex 클래스는 16진수 색상 코드를 사용해 색상을 지정합니다.
- #F00처럼 3자리 숫자로 지정할 수 있습니다. 이 경우, #F00은 #FF0000과 동일한 색상입니다.
color-rgb 클래스는 RGB 형식을 사용해 색상을 지정합니다.
- RGB: 빨강, 초록, 파랑 구성 요소를 0에서 255 범위 내에서 지정합니다.
color-rgba 클래스는 RGBA 형식을 사용해 투명도를 추가로 지정합니다.
color-hsl 클래스는 HSL 형식을 사용해 색상을 지정합니다.
- 색상은 색상(hue), 채도(saturation), 명도(lightness)로 지정할 수 있습니다. 색상(hue)은 0도에서 360도 사이로 지정하고, 채도와 명도는 0%에서 100%로 지정합니다.
color-hsla 클래스는 HSLA 형식을 사용해 투명도를 추가로 지정합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

CSS `@` 규칙 텍스트 관련 CSS 속성

글꼴 관련 CSS 속성

YouTube Video

미리보기를 위한 HTML 생성

타이포그래피 (폰트 관련)

font-size 속성

값을 지정하는 주요 방법

절대값(px, pt)

상대값(em, rem, %)

키워드

상대 키워드

일반적인 사용 예

글꼴 크기 조정 예제

결론

font-family 속성

font-family 지정 방법

font-weight 속성

font-weight의 주요 값

키워드

숫자 값

font-weight 사용 예시

실제 사용 예시

요약

font-style 속성

font-style의 주요 값

normal

italic

oblique

oblique <angle>

font-style 사용법

요약

color 속성

설명:

YouTube Video

`font-size` 속성

`font-family` 속성

`font-family` 지정 방법

`font-weight` 속성

`font-weight`의 주요 값

`font-weight` 사용 예시

`font-style` 속성

`font-style`의 주요 값

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` 사용법

`color` 속성