CSS text-shadow 속성 – 올바른 이해와 사용 방법

`text-shadow` 속성의 이해

text-shadow 속성은
텍스트 문자에 그림자 효과를 적용하는 속성입니다.

이 속성의 특징 및 구현 방법,
특히 여러 개를 사용하는 방법에 대해 다루겠습니다.
그리고, 다양한 예제를 통해 text-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다.

text-shadow 속성의 형식은 다음과 같습니다.

구문

값

text-shadow 속성의 값
`none`	초깃값임. 그림자 효과가 없습니다.
`<color>`	옵션. 그림자 색상 값입니다. 초깃값은 `currentColor`(현재 글자 색)입니다. 속성 값의 맨 앞이나 맨 뒤에 지정할 수 있습니다.
`<offset-x> <offset-y>`	필수. 이 길이 값들은 텍스트로부터 그림자의 거리를 지정합니다. `<offset-x>`는 가로 축의 수평 거리를 지정합니다. 음수 값은 텍스트 왼쪽에 그림자를 배치합니다. `<offset-y>`는 세로 축의 수직 거리를 지정합니다. 음수 값은 텍스트 위에 그림자를 배치합니다. `<offset-x>`과 `<offset-y>`는 띄어 쓰기로 구분하며, 이 사이에는 `<color>`나 `<blur-radius>`가 올 수 없습니다. 이 두 길이 값에는 `%`단위의 길이 값을 사용할 수 없습니다.
`<blur-radius>`	옵션. 흐림 효과를 지정합니다. 크기의 기준은 흐림 효과를 원의 반지름으로 측정하며, 값이 높을수록 흐림 효과가 커집니다. 즉, 그림자가 더 넓어지고 가벼워 집니다. 음수 값이나 `%` 단위의 길이 값을 사용할 수 없습니다. 초깃값은 `0`입니다. 이 값은 반드시 `<offset-y>` 바로 뒤에서 지정해야 합니다.

CSS

/*
 * <offset-x> (필수): x축(가로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <offset-y> (필수): y축(세로 축) 거리(양수, 0, 음수 적용 가능). 길이 값(% 단위 사용 금지)
 * <blur-radius> (옵션): 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0, 음수 없음).
                        초깃값은 0. 길이 값(% 단위 사용 금지)
 * <color> (옵션): 그림자 색상 값. 초깃값은 currentColor(현재 글자 색)
*/

/* 주의! <offset-x>과 <offset-y> 사이에 <blur-radius>나 <color>가 올 수 없습니다. */
/* 주의! <blur-radius>는 반드시 <offset-y> 바로 뒤에서 지정해야 합니다. */
/* 주의! <color>는 <offset-x>, <offset-y>, <blur-radius> 사이에 올 수 없습니다. */

/* <offset-x> | <offset-y> | <blur-radius> | <color> */
text-shadow: 2px 3px 4px red;

/* <color> | <offset-x> | <offset-y> | <blur-radius> */
text-shadow: red 2px 0 4px;

/* <offset-x> | <offset-y> | <color> */
text-shadow: 5px 5px #00a0e9;

/* <color> | <offset-x> | <offset-y> */
text-shadow: green 2px 5px;

/* <offset-x> | <offset-y>
   <color>와 <blur-radius>는 초깃값 적용 */
text-shadow: 5px 10px;

/* 여러 개의 그림자 효과는 값을 콤마(,)로 구분해서 추가
   그림자 효과는 순서대로 앞에서 뒤로 적용. 첫 번째 그림자가 맨 위에 옵니다. */
text-shadow: red 2px 0 4px, blue 4px 0 4px, green 6px 8px;

/* 초깃값 */
text-shadow: none; /* 그림자 효과가 없다는 의미 */

/* 글로벌 값 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

정의

text-shadow 속성의 공식 정의
초깃값	`none`
길이 값에 퍼센트(`%`) 사용	해당사항 없음
적용 요소	모든 요소
상속	예
애니메이션	예

`text-shadow` 속성의 특징

text-shadow 속성은 다음과 같은 특징이 있습니다.

box-shadow와는 달리 그림자 모양이 잘리지 않습니다.
box-shadow와 마찬가지로 레이아웃에 영향을 주지 않습니다.
text-decoration에 그림자 효과를 줍니다.
text-emphasis에 그림자 효과를 줍니다.

이 네 가지 특징에 대해 자세히 살펴보겠습니다.

`box-shadow`와는 달리 그림자 모양이 잘리지 않습니다.

box-shadow는 요소 박스의 모양으로 그림자가 잘리지만, text-shadow는 그림자 모양으로 잘리지 않으며, 텍스트가 투명하거나 부분적으로 투명한 경우 비쳐 보일 수 있습니다.

CSS box-shadow 속성

다음의 구현 예제으로 살펴 보겠습니다.

HTML

<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: transparent;
        box-shadow: 10px 10px 10px yellowgreen;
    }
</style>
<div class="box">BOX</div>

위 구현 예제를 보면 요소 박스를 투명으로 지정하여 비쳐 보인 box-shadow의 그림자 모양이 박스의 모양으로 잘려 있는 것을 알 수 있습니다. 하지만, 다음의 구현 예제를 보면 text-shadow는 그림자 모양으로 잘리지 않으며, 텍스트가 투명하거나 부분적으로 투명한 경우 비쳐 보이는 것을 볼 수 있습니다.

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: rgba(0, 0, 0, 0.4);
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>

`box-shadow`와 마찬가지로 레이아웃에 영향을 주지 않습니다.

box-shadow나 text-shadow는 그림자가 커서 주변 요소에 닿거나 넘치더라도 레이아웃에 영향을 주지 않습니다. 이는 오버플로(overflow, 경계를 넘어섬)하러다도 스크롤에 영향을 주지 않습니다.

HTML

<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: gold;
    }
    .box-1 {
        margin-bottom: 25px;
    }
    .box-2 {
        box-shadow: 0 -50px 20px rgba(0, 0, 0, 0.7);
    }
</style>
<div class="box box-1">BOX 1</div>
<div class="box box-2">BOX 2</div>

위 구현 예제를 보면 .box-2의 box-shadow가 위에 있는 .box-1를 넘처서 구현되었지만 .box-1이나 .box-2가 밀리거나 벌어지는 등의 현상이 발생하지 않습니다. box-shadow는 주변의 레이아웃에 영향을 주지 않습니다.

아래의 구현 예제에서도 text-shadow가 box-shadow와 마찬가지로 주변의 레이아웃에 영향을 주지 않는 것을 보여줍니다.

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
    }
    .text-1 {
        margin-bottom: 10px;
    }
    .text-2 {
        text-shadow: 0 -50px 10px rgba(0, 0, 0, 0.4);
    }
</style>
<p class="text text-1">텍스트 1</p>
<p class="text text-2">텍스트 2</p>

`text-decoration`에 그림자 효과를 줍니다.

text-shadow는 text-decoration에 영향을 줍니다.

CSS text-decoration 속성

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-decoration: underline;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>

위 구현 예제를 보면 텍스트에 text-decoration: underline;을 지정했을 경우 text-shadow로 그림자 효과를 주었을 때 underline에도 그림자 효과가 적용되는 것을 알 수 있습니다. 이것은 모든 text-decoration-style의 값에서도 동일하게 적용됩니다.

`text-emphasis`에 그림자 효과를 줍니다.

text-shadow는 text-emphasis에 영향을 줍니다.

CSS text-emphasis 속성

HTML

<style>
    .text {
        font-size: 70px;
        font-weight: 900;
        color: gold;
        text-emphasis: dot;
        text-shadow: 5px 5px red;
    }
</style>
<p class="text">텍스트</p>

위 구현 예제를 보면 텍스트에 text-emphasis: dot;을 지정했을 경우 text-shadow로 그림자 효과를 주었을 때 underline에도 그림자 효과가 적용되는 것을 알 수 있습니다. 이것은 모든 text-emphasis-style의 값에서도 동일하게 적용됩니다.

`text-shadow`로 여러 개의 그림자 효과 주기

text-shadow 속성으로 여러 개의 그림자 효과를 주려면 값을 콤마(,)로 구분해서 추가할 수 있습니다.
그림자 효과는 순서대로 앞에서 뒤로 적용되며, 첫 번째 그림자가 맨 위에 옵니다.

HTML

<style>
    .text {
        font-size: 100px;
        font-weight: 900;
        color: gold;
        text-shadow: 7px 7px red,
                     14px 14px green,
                     21px 21px blue;
    }
</style>
<p class="text">가</p>