CSS에서 폰트 두께를 설정하는 방법은 무엇인가요?

Q: CSS에서 폰트 두께를 어떻게 설정하나요?
A: CSS에서는 `font-weight` 속성을 사용해 폰트 두께를 설정합니다.

---

Q: `font-weight` 속성은 어떤 값을 가질 수 있나요?
A: `font-weight`는 숫자값(100~900, 100단위), 키워드(`normal`, `bold`, `lighter`, `bolder`)를 사용할 수 있습니다.
- 숫자값: 100(가장 얇음) ~ 900(가장 두꺼움)
- 키워드:
- `normal` (대개 400에 해당)
- `bold` (대개 700에 해당)
- `lighter` (부모 요소보다 얇게)
- `bolder` (부모 요소보다 두껍게)

---

Q: 폰트 두께를 수치로 지정하는 예시는 어떻게 되나요?
A: 예를 들어, `font-weight: 300;`은 가벼운 두께, `font-weight: 700;`은 두꺼운 글꼴을 의미합니다.

```css
p.light {
font-weight: 300;
}

p.bold {
font-weight: 700;
}
```

---

Q: 모든 폰트에서 숫자형 `font-weight`가 실제로 다르게 적용되나요? A: 아니요. 폰트마다 지원하는 굵기(weight)가 다릅니다. 일부 폰트는 400(regular)과 700(bold)만 지원할 수 있으며, 세부 숫자 값(300, 500 등)은 무시될 수 있습니다.

---

Q: `font-weight: lighter`와 `font-weight: bolder`는 어떻게 작동하나요?
A: 이 값들은 부모 요소의 폰트 두께를 기준으로 상대적으로 더 얇거나 두꺼운 폰트 두께를 적용합니다. 부모 요소의 두께에 따라 다르게 나타날 수 있습니다.

---

Q: 웹폰트에서 다양한 굵기를 사용하려면 어떻게 해야 하나요?
A: 웹폰트 로드 시 굵기별 폰트 파일을 각각 불러와야 하며, 그 후 CSS에서 `font-weight`로 해당 굵기를 지정해 사용할 수 있습니다.

---

Q: 기본 폰트 두께 설정 예제는 어떤가요?
A:
```css
body {
font-weight: normal; /* 보통 글꼴 */
}

h1 {
font-weight: bold; /* 두꺼운 글꼴 */
}
```

---

정리:
- 폰트 두께 설정은 `font-weight` 속성을 사용
- 키워드(`normal`, `bold`, `lighter`, `bolder`) 또는 숫자값(100~900) 사용 가능
- 숫자값은 폰트가 지원해야 실제 반영됨
- 웹폰트라면 굵기별 폰트 파일 확인 필수

CSS에서 폰트 두께를 설정하는 방법은 주로 `font-weight` 속성을 사용하여 이루어집니다.

이 속성은 텍스트의 두께를 조정하는 데 사용되며, 다양한 값들을 통해 세밀한 조정이 가능합니다.

아래에서는 `font-weight` 속성의 사용 방법과 함께 폰트 두께를 설정하는 다양한 방법에 대해 자세히 설명하겠습니다.

1. `font-weight` 속성 `font-weight` 속성은 CSS에서 폰트의 두께를 정의하는 데 사용됩니다.

이 속성은 다음과 같은 값들을 가질 수 있습니다: - 정수 값 : 100에서 900까지의 정수 값을 사용할 수 있으며, 값이 낮을수록 얇고, 높을수록 두꺼운 폰트를 나타냅니다.

일반적으로 400은 '보통' 두께, 700은 '굵게'로 간주됩니다.

- 키워드 : `normal`, `bold`, `bolder`, `lighter`와 같은 키워드를 사용할 수 있습니다.

- `normal`: 기본 두께 (400) - `bold`: 굵은 두께 (700) - `bolder`: 부모 요소보다 더 굵은 두께 - `lighter`: 부모 요소보다 더 얇은 두께

2. 사용 예시 ```css h1 { font-weight: 700; /* 굵은 제목 */ } p { font-weight: 400; /* 일반적인 문단 */ } strong { font-weight: bold; /* 강조된 텍스트 */ } .light-text { font-weight: 300; /* 얇은 텍스트 */ } ```

3. 폰트 두께의 범위 CSS에서 사용할 수 있는 폰트 두께의 범위는 일반적으로 100에서 900까지이며, 이 값들은 다음과 같이 구분됩니다: - 100 : Extra Thin (가장 얇은) - 200 : Thin - 300 : Light - 400 : Normal (Regular) - 500 : Medium - 600 : Semi-Bold - 700 : Bold - 800 : Extra Bold - 900 : Black (가장 두꺼운)

4. 웹 폰트와 폰트 두께 웹 폰트를 사용할 때는 해당 폰트가 특정 두께를 지원하는지 확인해야 합니다.

예를 들어, Google Fonts와 같은 웹 폰트 제공 사이트에서는 다양한 두께의 폰트를 제공하며, 이를 사용하기 위해서는 HTML에서 해당 두께를 명시적으로 불러와야 합니다.

```html ``` 위의 예시에서는 Roboto 폰트의 일반 두께(400)와 굵은 두께(700)를 불러옵니다.



5. 상속 및 계층 구조 CSS에서 폰트 두께는 상속됩니다.

즉, 부모 요소에 설정된 `font-weight` 값은 자식 요소에도 적용됩니다.

그러나 자식 요소에서 명시적으로 다른 값을 설정하면 그 값이 우선 적용됩니다.

```css div { font-weight: 600; /* 부모 요소의 두께 */ } span { font-weight: 400; /* 자식 요소에서 다른 두께 설정 */ } ```

6. 접근성 고려 폰트 두께를 설정할 때는 접근성도 고려해야 합니다.

너무 얇은 폰트는 시각적으로 불편할 수 있으며, 특히 시력이 좋지 않은 사용자에게는 읽기 어려울 수 있습니다.

따라서 적절한 두께를 선택하고, 텍스트의 가독성을 높이는 것이 중요합니다.

결론 CSS에서 폰트 두께를 설정하는 것은 웹 디자인에서 중요한 요소 중 하나입니다.

`font-weight` 속성을 통해 다양한 두께를 조정할 수 있으며, 이를 통해 텍스트의 시각적 계층을 만들고, 사용자 경험을 향상시킬 수 있습니다.

적절한 두께를 선택하고, 웹 폰트의 특성을 이해하는 것이 중요합니다.