CSS에서 텍스트 강조를 위한 스타일링 방법은 무엇인가요?

Q1: 텍스트를 강조하는 기본적인 CSS 속성은 무엇이 있나요?
A1: 텍스트를 강조할 때 흔히 사용하는 CSS 속성은 `font-weight`, `color`, `background-color`, `text-decoration`, `font-style` 등이 있습니다. 예를 들어, `font-weight: bold;`는 글자를 굵게 만들고, `color`는 글자 색상을 변경하며, `background-color`는 글자 뒤 배경색을 지정해 강조할 수 있습니다.

---

Q2: 특정 단어나 문장에 밑줄이나 취소선을 넣어 강조할 수 있나요?
A2: 네, `text-decoration` 속성을 사용합니다.
- 밑줄: `text-decoration: underline;`
- 취소선: `text-decoration: line-through;`
- 강조선(오버라인): `text-decoration: overline;`
이 속성으로 텍스트에 다양한 라인 효과를 줄 수 있습니다.

---

Q3: 텍스트 강조를 위해 글자색과 배경색을 같이 적용하는 방법은?
A3: `color`와 `background-color` 속성을 함께 사용합니다.
예:
```css
.highlight {
color: white;
background-color: orange;
}
```
이렇게 하면 텍스트는 흰색이고, 배경은 주황색으로 강조됩니다.

---

Q4: 텍스트를 기울이거나 굵게 만들려면 어떻게 하나요?
A4:
- 굵게: `font-weight: bold;` 혹은 숫자 값(예: `700`)
- 기울임체: `font-style: italic;`
이 두 속성은 강조 효과를 주기에 유용합니다.

---

Q5: CSS에서 텍스트 음영(그림자)을 이용해 강조할 수 있나요?
A5: 네, `text-shadow` 속성을 사용합니다. 예:
```css
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
```
이는 텍스트 뒤에 그림자를 만들어 입체감을 주고 강조 효과를 줍니다.

---
Q6: `::selection` 가상 요소를 이용한 텍스트 강조란 무엇인가요?
A6: `::selection`은 사용자가 드래그로 텍스트를 선택했을 때의 스타일을 정의합니다. 예를 들어:
```css
::selection {
background: yellow;
color: black;
}
```
이는 텍스트 선택 시 사용자 경험을 향상시키는 방법입니다.

---

Q7: HTML5의 `` 태그와 CSS 강조 스타일은 어떻게 다르나요?
A7: `` 태그는 기본적으로 브라우저가 노란색 배경으로 강조하는 의미적 태그입니다. CSS는 자유롭게 스타일을 변경 가능하며, ``에 스타일을 추가해도 됩니다. ``는 시맨틱한 의미를 주고, CSS는 시각적 디자인을 담당합니다.

---

Q8: 텍스트 강조에 사용할 수 있는 CSS 단축 속성이 있나요?
A8: 텍스트 관련 단축 속성은 제한적이나, 예를 들어 `font` 속성으로 폰트 크기, 스타일, 굵기 등을 한번에 지정할 수 있습니다.
예:
```css
font: italic bold 16px/1.5 Arial, sans-serif;
```

---

Q9: 접근성 측면에서 텍스트 강조 시 주의할 점은?
A9:
- 충분한 대비 대비율(색상 대비)을 유지해야 함
- 지나치게 많은 강조를 하면 가독성 저하 가능성
- 단순 색상 변경뿐 아니라 굵기, 밑줄 등 다양한 방법 혼합 권장
- 스크린 리더에서 강조 의미가 전달되도록 HTML5 시맨틱 태그 활용 고려

---

Q10: 예를 들어 "중요"라는 단어를 빨간 굵은 글씨와 노란 배경으로 강조하고 싶을 때 CSS 코드는?
A10:
```css
.important {
color: red;
font-weight: bold;
background-color: yellow;
}
```
그리고 HTML에서 `중요` 형태로 사용합니다.

CSS에서 컨테이너의 최대 너비를 설정하는 방법은 무엇인가요?

CSS에서 요소의 위치를 절대적으로 설정하는 방법은 무엇인가요?

CSS에서 텍스트 강조를 위한 스타일링 방법은 다양합니다.

텍스트 강조는 웹 페이지에서 중요한 정보를 부각시키고, 사용자에게 시각적으로 더 매력적인 경험을 제공하는 데 중요한 역할을 합니다.

다음은 CSS를 사용하여 텍스트를 강조하는 여러 가지 방법입니다.

1. 폰트 스타일 변경 - 굵게(Bold) : `font-weight` 속성을 사용하여 텍스트를 굵게 만들 수 있습니다.

```css .highlight { font-weight: bold; } ``` - 기울임(Italic) : `font-style` 속성을 사용하여 텍스트를 기울일 수 있습니다.

```css .highlight { font-style: italic; } ``` - 폰트 크기 조정 : `font-size` 속성을 통해 텍스트의 크기를 조정하여 강조할 수 있습니다.

```css .highlight { font-size: 1.5em; /* 기본 크기보다 1.5배 크게 */ } ```

2. 색상 변경 - 텍스트의 색상을 변경하여 강조할 수 있습니다.

`color` 속성을 사용하여 텍스트의 색상을 설정합니다.

```css .highlight { color: red; /* 텍스트를 빨간색으로 강조 */ } ```

3. 배경색 추가 - 텍스트의 배경색을 변경하여 강조할 수 있습니다.

`background-color` 속성을 사용합니다.

```css .highlight { background-color: yellow; /* 배경을 노란색으로 강조 */ } ```

4. 텍스트 장식 - 밑줄(Underline) : `text-decoration` 속성을 사용하여 텍스트에 밑줄을 추가할 수 있습니다.

```css .highlight { text-decoration: underline; } ``` - 취소선(Strikethrough) : 취소선 효과를 주고 싶다면 `text-decoration: line-through;`를 사용할 수 있습니다.

```css .highlight { text-decoration: line-through; } ```

5. 텍스트 그림자 - `text-shadow` 속성을 사용하여 텍스트에 그림자를 추가하여 입체감을 줄 수 있습니다.

```css .highlight { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.

5); } ```

6. 애니메이션 효과 - CSS 애니메이션을 사용하여 텍스트 강조 효과를 줄 수 있습니다.

예를 들어, 텍스트가 깜박이는 효과를 줄 수 있습니다.

```css @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .highlight { animation: blink 1s infinite; } ```

7. 상자 효과 - 텍스트 주위에 테두리를 추가하여 강조할 수 있습니다.

`border` 속성을 사용하여 상자 효과를 줄 수 있습니다.

```css .highlight { border: 2px solid blue; padding: 5px; display: inline-block; /* 상자가 텍스트에 맞게 조정되도록 */ } ```

8. 여백 및 패딩 - 텍스트 주위에 여백(`margin`)이나 패딩(`padding`)을 추가하여 강조할 수 있습니다.

```css .highlight { margin: 10px; padding: 5px; background-color: lightgray; } ```

9. 사용자 정의 클래스 - 여러 가지 스타일을 조합하여 사용자 정의 클래스를 만들어 사용할 수 있습니다.

```css .custom-highlight { font-weight: bold; color: white; background-color: blue; padding: 5px; border-radius: 3px; /* 모서리를 둥글게 */ } ``` 이와 같이 CSS를 활용하여 텍스트를 강조하는 다양한 방법이 있습니다.

강조하고자 하는 텍스트의 중요성이나 맥락에 따라 적절한 스타일을 선택하여 사용하면 됩니다.

강조된 텍스트는 사용자에게 중요한 정보를 효과적으로 전달하고, 웹 페이지의 가독성을 높이는 데 기여할 수 있습니다.