CSS에서 폰트 패밀리를 설정하는 방법은 무엇인가요?

Q1: CSS에서 폰트 패밀리를 설정하는 기본 문법은 어떻게 되나요?
A1: CSS에서 폰트 패밀리를 설정하려면 `font-family` 속성을 사용합니다. 예를 들어:
```css
selector {
font-family: "Helvetica Neue", Arial, sans-serif;
}
```
쉼표로 구분하여 여러 폰트 이름을 나열할 수 있으며, 브라우저는 앞에서부터 순서대로 폰트를 적용하려 시도합니다.

---

Q2: 폰트 이름에 공백이 포함되어 있으면 어떻게 작성해야 하나요?
A2: 폰트 이름에 공백이나 특수 문자가 포함되어 있으면 반드시 큰따옴표(" ")나 작은따옴표(' ')로 감싸야 합니다.
예:
```css
font-family: "Times New Roman", serif;
```

---

Q3: 여러 폰트 이름을 왜 순서대로 나열하나요?
A3: 사용자의 시스템에 첫 번째 폰트가 없을 경우 대비해 대체 폰트를 지정하기 위해서입니다. 브라우저는 첫 번째 폰트부터 차례대로 확인하며, 사용할 수 있는 첫 번째 폰트를 적용합니다.

---

Q4: 웹 안전 폰트(Web Safe Fonts)란 무엇인가요?
A4: 웹 안전 폰트는 거의 모든 운영체제와 브라우저에 기본적으로 설치되어 있는 표준 폰트로, 예를 들어 Arial, Courier New, Georgia, Times New Roman, Verdana 등이 있습니다. 이들 폰트를 지정하면 사용자의 환경에 관계 없이 같은 폰트가 표시될 확률이 높습니다.

---

Q5: 기본 폰트 패밀리(fallback font)에는 어떤 값이 올 수 있나요?
A5: 다음과 같은 기본 폰트 패밀리 키워드를 사용할 수 있습니다:
- `serif` : 명조체 계열
- `sans-serif` : 고딕체 계열
- `monospace` : 고정폭 글꼴
- `cursive` : 필기체
- `fantasy` : 장식적 폰트
대부분의 폰트 목록 맨 끝에 기본 계열 키워드를 넣어 fallback 역할을 하게 합니다.

---
Q6: 구글 웹폰트 같은 외부 폰트를 CSS에서 어떻게 사용하나요?
A6: 외부 폰트는 `` 태그로 불러오거나 `@import` 또는 `@font-face` 규칙을 사용해 불러온 뒤 폰트 이름을 `font-family`에 지정합니다. 예:
```html

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

---

Q7: `font-family`와 `font` 속성의 차이는 무엇인가요?
A7: `font-family`는 폰트 이름만 지정하는 반면, `font`는 폰트 스타일, 두께, 크기, 줄 높이 등 폰트 관련 여러 속성을 한 번에 설정하는 축약형입니다. 예:
```css
font: italic bold 16px/1.5 "Arial", sans-serif;
```

---

Q8: 폰트 이름을 선택할 때 주의할 점은 무엇인가요?
A8: 고유하고 정확한 폰트 이름을 사용해야 하며, 공백이나 특수 문자가 포함되어 있으면 반드시 따옴표로 감싸야 합니다. 또한, 반드시 하나 이상의 대체 폰트나 기본 계열 폰트를 지정해 폰트가 없을 때를 대비해야 합니다.

---

Q9: CSS에서 폰트 패밀리를 설정할 때 성능에 영향을 주나요?
A9: 로컬에 설치된 폰트를 지정하면 성능에 영향이 거의 없으나, 웹폰트 같은 외부 폰트를 많이 불러올 경우 페이지 로딩 속도가 느려질 수 있습니다. 따라서 꼭 필요한 폰트만 최소한으로 사용하는 것이 좋습니다.

---

Q10: 예제: 본문에 ‘나눔고딕’ 폰트를 적용하는 CSS 코드는?
A10: ‘나눔고딕’이 로컬에 설치되어 있으면 아래와 같이 작성할 수 있습니다.
```css
body {
font-family: "Nanum Gothic", "나눔고딕", sans-serif;
}
```
만약 웹폰트로 불러온다면, 반드시 ``로 먼저 불러와야 정상 작동합니다.

CSS에서 폰트 패밀리를 설정하는 방법은 웹 페이지의 텍스트 스타일을 정의하는 데 매우 중요합니다.

폰트 패밀리는 텍스트의 외관을 결정하며, 사용자 경험에 큰 영향을 미칠 수 있습니다.

아래에서는 CSS에서 폰트 패밀리를 설정하는 방법에 대해 자세히 설명하겠습니다.

1. 기본 문법 CSS에서 폰트 패밀리를 설정하는 기본 문법은 다음과 같습니다: ```css selector { font-family: 'FontName', fallback-font, generic-family; } ``` - selector : 스타일을 적용할 HTML 요소를 지정합니다.

예를 들어, `body`, `h1`, `p` 등이 될 수 있습니다.

- FontName : 사용하고자 하는 특정 폰트의 이름입니다.

이 이름은 작은따옴표(`'`) 또는 큰따옴표(`"`)로 감싸야 합니다.

- fallback-font : 특정 폰트가 사용 불가능할 경우 대체할 폰트입니다.

이 또한 작은따옴표나 큰따옴표로 감싸야 합니다.

- generic-family : 일반적인 폰트 패밀리 이름을 지정할 수 있습니다.

예를 들어, `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy` 등이 있습니다.



2. 예제 다음은 CSS에서 폰트 패밀리를 설정하는 예제입니다: ```css body { font-family: 'Arial', 'Helvetica', sans-serif; } h1 { font-family: 'Georgia', 'Times New Roman', serif; } code { font-family: 'Courier New', monospace; } ``` 위의 예제에서 `body` 요소는 Arial 폰트를 사용하며, Arial이 없을 경우 Helvetica로 대체하고, 두 폰트가 모두 없을 경우 sans-serif 계열의 폰트를 사용합니다.

`h1` 요소는 Georgia 폰트를 사용하고, Georgia가 없을 경우 Times New Roman으로 대체합니다.

`code` 요소는 Courier New 폰트를 사용하며, 이 폰트가 없으면 monospace 계열의 폰트를 사용합니다.



3. 웹 폰트 사용 웹 폰트를 사용하면 다양한 폰트를 웹 페이지에 쉽게 적용할 수 있습니다.

Google Fonts와 같은 서비스를 통해 웹 폰트를 가져올 수 있습니다.

웹 폰트를 사용하려면 다음과 같은 절차를 따릅니다: 1. 웹 폰트 선택 : Google Fonts 웹사이트에 접속하여 원하는 폰트를 선택합니다.



2. 폰트 링크 복사 : 선택한 폰트의 링크를 복사하여 HTML 문서의 `` 섹션에 추가합니다.

예를 들어, Roboto 폰트를 사용하고 싶다면 다음과 같이 작성합니다: ```html ```

3. CSS에서 폰트 적용 : CSS 파일에서 `font-family` 속성을 사용하여 선택한 폰트를 적용합니다.

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

4. 폰트 패밀리 우선순위 폰트 패밀리를 설정할 때는 우선순위를 고려해야 합니다.

사용자가 특정 폰트를 가지고 있지 않을 경우를 대비해 대체 폰트를 지정하는 것이 중요합니다.

일반적으로, 특정 폰트 → 대체 폰트 → 일반 폰트 순으로 설정하는 것이 좋습니다.



5. CSS에서 폰트 패밀리를 설정하는 것은 웹 디자인에서 중요한 요소 중 하나입니다.

적절한 폰트를 선택하고, 대체 폰트를 설정함으로써 사용자에게 일관된 경험을 제공할 수 있습니다.

웹 폰트를 활용하면 더 다양한 폰트를 사용할 수 있으며, 이는 웹 페이지의 시각적 매력을 높이는 데 기여합니다.

따라서, 폰트 패밀리 설정에 대한 이해와 활용은 웹 개발자에게 필수적인 기술입니다.