텍스트에 그림자 효과 넣기 (text-shadow)

텍스트에 그림자 효과를 넣으면 평범한 텍스트에 깊이와 동적인 느낌을 줄 수 있습니다. text-shadow 속성을 사용하여 그림자의 위치, 색상 및 흐림 효과를 조정할 수 있습니다.

기본 구문

text-shadow: h-shadow v-shadow blur color;

h-shadow: 그림자의 가로 위치를 지정합니다. 음수 값은 그림자를 텍스트의 왼쪽으로 이동시킵니다.
v-shadow: 그림자의 세로 위치를 지정합니다. 음수 값은 그림자를 텍스트의 위쪽으로 이동시킵니다.
blur: 그림자의 흐림 효과를 조정합니다. 값이 클수록 흐리게, 작을수록 선명하게 표현됩니다. 생략 가능하며, 생략할 경우 기본값은 0입니다.
color: 그림자의 색상을 지정합니다. 색상 값을 RGB, HEX, HSL 등의 형식으로 입력할 수 있습니다.

예제

### 그림자 효과 예제

흐림 효과가 있는 붉은색 그림자를 텍스트에 추가하는 예제입니다.

```css
h1 {
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7);
}

위 예제에서 2px 2px 4px는 그림자의 위치 및 흐림 효과를 나타내며, rgba(255, 0, 0, 0.7)은 그림자의 색상을 나타냅니다. 이 코드를 적용하면 <h1> 태그 안에 있는 텍스트에 붉은색 그림자가 추가됩니다.

다양한 효과 조합

text-shadow 속성을 여러 번 사용하여 다양한 그림자 효과를 적용할 수도 있습니다. 예를 들어, 다음과 같은 예제는 텍스트에 두 개의 그림자를 추가하는 방법을 보여줍니다.

h2 {
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7),
               4px 4px 6px rgba(0, 0, 255, 0.5);
}

위 예제에서 첫 번째 text-shadow는 붉은색 그림자를 나타내고, 두 번째 text-shadow는 파란색 그림자를 나타냅니다. 이렇게 여러 개의 text-shadow 속성을 조합하여 다채로운 그림자 효과를 만들 수 있습니다.

요약

text-shadow 속성을 사용하면 텍스트에 그림자 효과를 쉽게 적용할 수 있습니다. h-shadow, v-shadow, blur, color 값을 조정하여 다양한 그림자 효과를 생성할 수 있으며, 여러 번 사용하여 다채로운 효과를 만들 수도 있습니다. 이를 통해 텍스트에 깊이와 동적인 느낌을 줄 수 있습니다.
```

yynt

텍스트에 그림자 효과 넣기 (text-shadow)