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

---

Q2: `text-shadow` 속성의 기본 문법은 어떻게 되나요?
A2:
```css
text-shadow: 수평오프셋 수직오프셋 블러반경 색상;
```
- 수평오프셋: 그림자의 X축 위치 (px, em 등 단위 사용).
- 수직오프셋: 그림자의 Y축 위치 (px, em 등 단위 사용).
- 블러반경: 그림자의 흐림 정도 (선택사항).
- 색상: 그림자의 색상.

예)
```css
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
```

---

Q3: 그림자를 여러 개 줄 수 있나요?
A3: 네, 쉼표(,)로 구분하여 여러 개의 그림자를 겹쳐 줄 수 있습니다.
예)
```css
text-shadow: 1px 1px 2px black, 0 0 5px red;
```

---

Q4: `text-shadow`에서 블러 반경은 어떤 역할을 하나요?
A4: 블러 반경은 그림자의 흐림 정도를 조절하며, 값이 커질수록 그림자가 더 부드럽고 퍼져 보입니다. 0이면 선명한 그림자가 됩니다.

---

Q5: 수평/수직 오프셋 값이 음수일 경우 어떻게 되나요? A5: 수평 오프셋이 음수면 그림자가 텍스트의 왼쪽, 수직 오프셋이 음수면 그림자가 텍스트 위쪽에 위치합니다. 음수 값으로 위치를 자유롭게 조정할 수 있습니다.

---

Q6: `text-shadow`가 지원되는 브라우저는 어디까지인가요?
A6: 대부분의 현대 브라우저(크롬, 파이어폭스, 엣지, 사파리 등)에서 지원됩니다. 매우 오래된 브라우저에서는 지원되지 않을 수 있으나, 현재는 큰 문제가 없습니다.

---

Q7: 예시를 통한 기본 사용법을 보여주세요.
A7:
```css
h1 {
text-shadow: 3px 3px 4px gray;
}
```
이 코드는 h1 텍스트에 오른쪽 아래 방향으로 약간 흐릿한 회색 그림자를 만듭니다.

---

Q8: 투명도 조절은 어떻게 하나요?
A8: `rgba()` 색상 모드를 사용하면 투명도를 지정할 수 있습니다. 예) `rgba(0, 0, 0, 0.4)`는 40% 불투명 검정색 그림자입니다.

---

Q9: 그림자 색상을 스타일에 맞게 조절하는 팁이 있나요?
A9: 배경색과 대비가 높은 색상 또는 투명도가 있는 색상을 사용하면 가독성을 높일 수 있습니다. 또한 여러 색상을 겹쳐서 입체감이나 네온 효과를 낼 수도 있습니다.

---

요약 :
- 텍스트 그림자는 `text-shadow` 속성으로 설정
- `수평오프셋 수직오프셋 블러반경 색상`의 형식
- 쉼표로 여러 그림자 겹치기 가능
- 투명도는 `rgba()`로 조절
- 대부분의 최신 브라우저에서 지원

이를 통해 간단하게 텍스트에 입체적이고 멋진 그림자 효과를 줄 수 있습니다.

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

이 속성은 텍스트에 그림자를 추가하여 시각적으로 더 매력적이고 입체감 있는 효과를 줄 수 있습니다.

`text-shadow` 속성은 다음과 같은 구문을 사용합니다: ```css text-shadow: h-shadow v-shadow blur-radius color; ``` 각각의 매개변수는 다음과 같은 의미를 가집니다: 1. h-shadow : 수평 그림자의 위치를 설정합니다.

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



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

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



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

값이 클수록 그림자가 더 흐릿해집니다.

이 매개변수는 선택 사항입니다.



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

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

예제 다음은 `text-shadow` 속성을 사용한 간단한 예제입니다: ```html

그림자 효과가 있는 텍스트

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

그림자는 오른쪽 아래로 2픽셀 이동하고, 4픽셀의 흐림 효과를 주었습니다.

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

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

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

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

5); ``` 위의 코드에서는 두 개의 그림자가 적용됩니다.

첫 번째 그림자는 검은색으로, 두 번째 그림자는 빨간색으로 설정되어 있습니다.

활용 팁 1. 대비와 가독성 : 그림자 효과를 사용할 때는 배경색과 텍스트 색상 간의 대비를 고려하여 가독성을 유지하는 것이 중요합니다.

너무 흐릿하거나 비슷한 색상은 텍스트를 읽기 어렵게 만들 수 있습니다.



2. 적절한 흐림 효과 : 그림자의 흐림 효과는 디자인의 느낌을 크게 좌우합니다.

너무 강한 흐림은 텍스트의 선명도를 떨어뜨릴 수 있으므로 적절한 값을 선택하는 것이 좋습니다.



3. 반응형 디자인 : 다양한 화면 크기에서 텍스트의 크기와 그림자 효과가 잘 어울리도록 미디어 쿼리를 사용하여 조정할 수 있습니다.



4. CSS 애니메이션 : `text-shadow` 속성을 애니메이션과 결합하여 동적인 효과를 줄 수도 있습니다.

예를 들어, 마우스를 올렸을 때 그림자의 위치나 색상이 변하도록 설정할 수 있습니다.

결론 CSS의 `text-shadow` 속성은 웹 디자인에서 텍스트에 깊이와 매력을 추가하는 강력한 도구입니다.

적절하게 사용하면 사용자 경험을 향상시키고, 시각적으로 더 매력적인 웹 페이지를 만들 수 있습니다.

다양한 조합과 실험을 통해 자신만의 독창적인 스타일을 찾아보세요!