CSS에서 글꼴을 변경하는 방법은 무엇인가요?

Q1: CSS에서 글꼴을 변경하려면 어떤 속성을 사용하나요?
A1: 글꼴을 변경하려면 `font-family` 속성을 사용합니다. 예를 들어,
```css
p {
font-family: Arial, sans-serif;
}
```
이렇게 하면 문단의 글꼴이 Arial로 설정되며, Arial이 없으면 기본 sans-serif 글꼴을 사용합니다.

---

Q2: 여러 글꼴을 지정할 때 왜 콤마로 구분하나요?
A2: 브라우저가 첫 번째 글꼴을 찾지 못할 경우를 대비해 대체 글꼴을 지정합니다. 예:
```css
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
```
이 경우 Helvetica Neue가 없으면 Helvetica, 그 다음 Arial, 마지막으로 기본 sans-serif를 사용합니다.

---

Q3: 웹에서 제공되는 폰트를 사용하려면 어떻게 하나요?
A3: 웹폰트는 `@font-face` 규칙을 사용하거나, Google Fonts 같은 외부 서비스를 통해 가져올 수 있습니다. 예:
```css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}
```

---

Q4: 글꼴 크기도 함께 변경하려면 어떻게 하죠?
A4: `font-size` 속성을 사용합니다. 글꼴 이름과 함께 크기를 설정할 수 있습니다. 예:
```css
body {
font-family: 'Times New Roman', serif;
font-size: 16px;
}
```

---

Q5: 글꼴 스타일과 굵기는 어떻게 조정하나요?
A5: 글꼴 스타일은 `font-style` (예: normal, italic), 글꼴 굵기는 `font-weight` (예: normal, bold, 숫자값 100~900) 속성으로 조정합니다.
예:
```css
h1 {
font-family: 'Georgia', serif;
font-style: italic; font-weight: 700;
}
```

---

Q6: 시스템 기본 글꼴을 사용하는 게 좋은 이유는?
A6: 시스템 기본 글꼴은 사용자의 운영체제에 최적화되어 있어 렌더링 속도가 빠르고 읽기 쉽습니다. `font-family`에 `system-ui`를 지정하면 시스템 글꼴을 사용합니다.
예:
```css
body {
font-family: system-ui, sans-serif;
}
```

---

Q7: 글꼴 이름에 공백이 있을 때는 어떻게 해야 하나요?
A7: 공백이나 특수 문자가 들어간 글꼴 이름은 큰따옴표("")나 작은따옴표('')로 묶어야 합니다. 예:
```css
font-family: "Times New Roman", serif;
```

---

Q8: 특정 요소에만 글꼴을 적용하려면 어떻게 할까요?
A8: CSS 선택자를 사용해 원하는 요소에만 `font-family`를 지정합니다. 예:
```css
h2 {
font-family: 'Courier New', monospace;
}
```

---

Q9: CSS에서 기본 글꼴을 글로벌하게 설정하려면?
A9: 보통 `body` 또는 `html` 태그에 기본 글꼴을 지정하면 자식 요소들이 상속받습니다. 예:
```css
body {
font-family: Arial, sans-serif;
}
```

---

Q10: 글꼴 변경 시 주의할 점은 무엇인가요?
A10:
- 글꼴을 너무 많게 지정하면 로딩 속도가 느려질 수 있습니다.
- 웹폰트를 사용할 때는 라이선스를 반드시 확인하세요.
- 대체 글꼴을 꼭 지정해 호환성을 높이세요.
- 사용자 경험을 고려해 가독성이 좋은 글꼴을 선택하세요.

CSS(캐스케이딩 스타일 시트)는 웹 페이지의 스타일을 정의하는 데 사용되는 언어로, 글꼴을 변경하는 방법도 다양하게 제공됩니다.

글꼴을 변경하는 것은 웹 페이지의 디자인과 사용자 경험에 큰 영향을 미칠 수 있기 때문에, 적절한 방법을 선택하는 것이 중요합니다.

아래에서는 CSS에서 글꼴을 변경하는 방법에 대해 자세히 설명하겠습니다.

1. 기본 글꼴 설정 CSS에서 글꼴을 변경하는 가장 기본적인 방법은 `font-family` 속성을 사용하는 것입니다.

이 속성은 텍스트의 글꼴을 지정하는 데 사용됩니다.

예를 들어: ```css body { font-family: Arial, sans-serif; } ``` 위의 코드에서는 `body` 요소의 기본 글꼴을 Arial로 설정하고, 만약 Arial이 사용 불가능할 경우 대체 글꼴로 sans-serif를 사용하도록 지정합니다.



2. 여러 글꼴 지정하기 `font-family` 속성에서는 여러 개의 글꼴을 쉼표로 구분하여 지정할 수 있습니다.

이는 사용자의 시스템에 따라 특정 글꼴이 없을 경우를 대비하기 위함입니다.

예를 들어: ```css h1 { font-family: "Times New Roman", Times, serif; } ``` 위의 코드에서는 `h1` 요소에 대해 "Times New Roman"을 우선적으로 사용하고, 만약 이 글꼴이 없다면 Times, 그 다음으로 serif 계열의 글꼴을 사용하도록 설정합니다.



3. 웹 글꼴 사용하기 웹에서 제공하는 글꼴을 사용하고자 할 때는 Google Fonts와 같은 웹 글꼴 서비스를 활용할 수 있습니다.

Google Fonts를 사용하는 방법은 다음과 같습니다: 1. Google Fonts 웹사이트에 접속하여 원하는 글꼴을 선택합니다.



2. 선택한 글꼴의 링크를 복사하여 HTML 문서의 `` 섹션에 붙여넣습니다.

예를 들어, Roboto 글꼴을 사용하고 싶다면: ```html ```

3. CSS에서 `font-family` 속성을 사용하여 해당 글꼴을 지정합니다.

```css body { font-family: 'Roboto', sans-serif; } ```

4. 글꼴 크기 및 두께 조정 글꼴의 크기와 두께도 CSS에서 조정할 수 있습니다.

`font-size`와 `font-weight` 속성을 사용하여 글꼴의 크기와 두께를 설정할 수 있습니다.

```css p { font-size: 16px; font-weight: bold; } ```

5. 글꼴 스타일 및 변형 CSS에서는 글꼴의 스타일을 변경할 수 있는 여러 속성도 제공합니다.

`font-style`, `font-variant`, `text-transform` 등을 사용하여 글꼴의 스타일을 조정할 수 있습니다.

```css em { font-style: italic; } strong { font-variant: small-caps; } h2 { text-transform: uppercase; } ```

6. 반응형 글꼴 웹 페이지가 다양한 화면 크기에서 잘 보이도록 하려면, 미디어 쿼리를 사용하여 반응형 글꼴 크기를 설정할 수 있습니다.

예를 들어: ```css h1 { font-size: 2em; } @media (max-width: 600px) { h1 { font-size: 1.5em; } } ``` 위의 코드에서는 화면의 너비가 600px 이하일 때 `h1` 요소의 글꼴 크기를 줄입니다.



7. 사용자 정의 글꼴 자체적으로 만든 글꼴 파일을 사용하고자 할 경우, `@font-face` 규칙을 사용할 수 있습니다.

이 방법은 웹 서버에 글꼴 파일을 업로드한 후, CSS에서 해당 파일을 참조하여 사용할 수 있게 해줍니다.

```css @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') format('woff2'), url('mycustomfont.woff') format('woff'); } body { font-family: 'MyCustomFont', sans-serif; } ``` 결론 CSS에서 글꼴을 변경하는 방법은 다양하며, 웹 페이지의 디자인과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

기본적인 `font-family` 속성부터 시작하여 웹 글꼴, 반응형 글꼴, 사용자 정의 글꼴까지, 다양한 방법을 활용하여 원하는 스타일을 구현할 수 있습니다.

글꼴 선택에 있어서는 가독성, 디자인 일관성, 사용자 경험 등을 고려하는 것이 중요합니다.