Q1: CSS에서 텍스트에 그림자 효과를 주려면 어떤 속성을 사용하나요?
A1: 텍스트 그림자 효과는 `text-shadow` 속성을 사용하여 적용할 수 있습니다.

---

Q2: `text-shadow` 속성의 기본 문법은 어떻게 되나요?
A2: `text-shadow`의 기본 문법은 다음과 같습니다.
```css
text-shadow: 수평거리 수직거리 그림자흐림거리 색상;
```
예)
```css
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
```

---

Q3: `text-shadow` 속성에서 각 값의 의미는 무엇인가요?
A3:
- 수평거리 (Horizontal offset) : 그림자가 오른쪽으로 얼마나 이동할지 결정 (음수 값일 경우 왼쪽으로 이동)
- 수직거리 (Vertical offset) : 그림자가 아래로 얼마나 이동할지 결정 (음수 값일 경우 위로 이동)
- 그림자흐림거리 (Blur radius) : 그림자의 흐림 정도를 결정 (0으로 설정하면 그림자가 선명)
- 색상 (Color) : 그림자의 색상을 지정

---

Q4: 여러 개의 그림자 효과를 겹쳐서 적용할 수 있나요?
A4: 네, `text-shadow` 속성에 여러 그림자를 쉼표(,)로 구분하여 동시에 적용할 수 있습니다.
예)
```css
text-shadow: 1px 1px 2px black, 0 0 5px red;
```

---

Q5: 텍스트 그림자를 통해 어떤 효과를 줄 수 있나요?
A5: 텍스트 그림자를 사용하면 텍스트에 깊이감, 입체감, 빛번짐, 네온 효과 등을 줄 수 있습니다. 디자인에 따라 어둡거나 밝은 그림자를 적절히 조합해 시각적 효과를 연출합니다.
---

Q6: `text-shadow`는 모든 브라우저에서 지원되나요?
A6: 대부분의 최신 브라우저에서 `text-shadow`를 지원합니다. 구형 브라우저에서는 지원하지 않을 수 있으니 호환성 검토가 필요합니다.

---

Q7: 예시 코드로 간단한 텍스트 그림자 효과를 보여주세요.
A7:
```css
h1 {
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7);
}
```
위 코드는 `h1` 요소에 오른쪽 아래로 3픽셀씩 이동하고, 4픽셀 흐림이 적용된 검은색 반투명 그림자를 만듭니다.

---

Q8: 투명도를 조절하려면 어떻게 하나요?
A8: `rgba()` 색상 값을 사용하여 알파(투명도)값을 지정할 수 있습니다. 예: `rgba(0,0,0,0.5)` 는 50% 불투명한 검은색 그림자입니다.

---

Q9: `text-shadow`와 `box-shadow`의 차이는 무엇인가요?
A9:
- `text-shadow`는 텍스트 글자에만 그림자를 적용합니다.
- `box-shadow`는 요소의 박스(배경, 테두리 포함)에 그림자를 적용합니다.

---

Q10: 그림자의 위치를 글자 내부로 적용할 수 있나요?
A10: CSS 표준의 `text-shadow`는 내부 그림자는 지원하지 않습니다. 내부 그림자 효과를 내려면 별도의 방법(예: SVG 필터, 웹폰트 사용)이나 JavaScript가 필요합니다.

---

요약하자면, CSS 텍스트 그림자 효과는 `text-shadow` 속성을 통해 간단하게 적용 가능하며, 위치, 흐림 정도, 색상을 다양하게 조절하여 원하는 시각 효과를 만들 수 있습니다.

CSS에서 텍스트 그림자 효과를 주는 방법은 `text-shadow` 속성을 사용하는 것입니다.

이 속성은 텍스트에 그림자 효과를 추가하여 시각적으로 더 매력적이고 입체감 있는 디자인을 구현할 수 있게 해줍니다.

`text-shadow` 속성은 다음과 같은 형식으로 사용됩니다: ```css text-shadow: horizontal-offset vertical-offset blur-radius color; ``` 각각의 매개변수는 다음과 같은 의미를 가집니다: 1. horizontal-offset : 그림자의 수평 위치를 설정합니다.

양수 값은 오른쪽으로, 음수 값은 왼쪽으로 그림자를 이동시킵니다.



2. vertical-offset : 그림자의 수직 위치를 설정합니다.

양수 값은 아래쪽으로, 음수 값은 위쪽으로 그림자를 이동시킵니다.



3. blur-radius : 그림자의 흐림 정도를 설정합니다.

값이 클수록 그림자가 더 흐릿해지고, 값이 0이면 그림자가 날카롭게 나타납니다.



4. color : 그림자의 색상을 설정합니다.

색상은 이름, HEX 코드, RGB, RGBA 등 다양한 형식으로 지정할 수 있습니다.

예제 아래는 `text-shadow` 속성을 사용하여 텍스트에 그림자 효과를 주는 간단한 예제입니다: ```html

안녕하세요, CSS 텍스트 그림자!

``` 위 예제에서 `h1` 요소에 `shadow-text` 클래스를 적용하여 흰색 텍스트에 검은색 그림자를 추가했습니다.

그림자는 오른쪽 아래로 2픽셀 이동하고, 흐림 정도는 5픽셀로 설정했습니다.

배경색은 어두운 회색으로 설정하여 텍스트가 더 잘 보이도록 했습니다.

여러 개의 그림자 효과 `text-shadow` 속성은 여러 개의 그림자를 동시에 적용할 수 있습니다.

각 그림자는 쉼표로 구분하여 추가할 수 있습니다.

예를 들어: ```css text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.

5), 2px 2px 5px rgba(0, 0, 0, 0.

7); ``` 위와 같이 설정하면, 두 개의 그림자가 텍스트에 적용되어 더 깊이 있는 효과를 줄 수 있습니다.

주의사항 1. 접근성 : 텍스트에 그림자를 추가할 때는 가독성을 고려해야 합니다.

그림자가 너무 강하거나 색상 대비가 낮으면 텍스트가 읽기 어려울 수 있습니다.



2. 브라우저 호환성 : 대부분의 현대 브라우저에서 `text-shadow` 속성을 지원하지만, 구형 브라우저에서는 지원하지 않을 수 있습니다.

따라서 사용 시 브라우저 호환성을 확인하는 것이 좋습니다.



3. 성능 : 많은 수의 그림자 효과를 사용하면 렌더링 성능에 영향을 줄 수 있으므로, 필요에 따라 적절히 사용해야 합니다.

결론 CSS의 `text-shadow` 속성을 사용하면 텍스트에 다양한 그림자 효과를 쉽게 추가할 수 있습니다.

이를 통해 웹 페이지의 디자인을 더욱 풍부하고 매력적으로 만들 수 있으며, 사용자에게 시각적으로 더 나은 경험을 제공할 수 있습니다.

다양한 조합과 색상을 실험하여 자신만의 독특한 스타일을 만들어보세요!