안녕하세요! 이번에는 텍스트에 입체감과 생동감을 불어넣어 줄 '텍스트 그림자(Text shadows)' 문서를 가져오셨군요! 평밋한 글씨도 이 속성 하나면 순식간에 멋진 로고나 네온사인처럼 변신할 수 있답니다.
공식 문서의 모든 내용을 빠짐없이 번역하면서, 실무에서 바로 써먹을 수 있는 유용한 팁까지 듬뿍 담아 알기 쉽게 설명해 드릴게요. 자, 시작해 볼까요?
텍스트 그림자 시작하기 (Introduction to text shadows)
여러분은 text-shadow 속성을 사용하여 텍스트에 그림자를 적용할 수 있습니다. 이 속성은 쉼표(,)로 구분된 그림자 값들의 목록을 받습니다. 각각의 그림자 효과를 만들기 위해서는 최소 두 개의 <length>(길이) 값이 필수적으로 필요하며, 최대 세 개의 <length> 값과 한 개의 color(색상) 값을 포함할 수 있습니다.
/* 길이 값 2개 (가로, 세로) - 색상은 글자색을 따라갑니다 */
text-shadow: 1px 3px;
/* 길이 값 3개 (가로, 세로, 흐림) + 색상 */
text-shadow: 1px -2px 3px white;
/* 쉼표를 사용해 3개의 그림자를 한 번에 적용 */
text-shadow:
5px 5px mediumblue,
10px 10px magenta,
15px 15px rebeccapurple;텍스트에서 그림자를 완전히 제거하고 싶다면, none이라는 키워드를 사용하세요.
text-shadow: none;이 가이드에서는 텍스트 그림자를 구성하는 요소들이 무엇인지, 그리고 하나의 요소에 여러 개의 텍스트 그림자를 어떻게 적용할 수 있는지 살펴보겠습니다.
💡 강사의 실무 팁 1
text-shadow는 정말 다재다능한 속성입니다! 단순히 그림자를 넣는 용도를 넘어서, 텍스트에 테두리(Stroke)를 만들거나(여러 방향으로 1px씩 그림자를 줘서), 입체적인 3D 텍스트 타이포그래피를 만들 때도 쓰입니다. 나중에 포트폴리오 메인 화면의 메인 카피를 꾸밀 때 이 속성을 꼭 활용해 보세요!
이 문서의 목차 (In this article)
- 텍스트 그림자의 구성 요소 (Components of text shadows)
- 다중 그림자 (Multiple shadows)
- 투명한 텍스트와 다중 그림자 (Multiple shadows with transparent text)
텍스트 그림자의 구성 요소 (Components of text shadows)
각각의 그림자는 가로 오프셋(수평 이동 거리), 세로 오프셋(수직 이동 거리), 그리고 선택 사항인 흐림 반경(blur radius) 순서로 구성됩니다. 그리고 그림자의 색상도 함께 정의할 수 있죠.
가로 오프셋 (Horizontal offset)
text-shadow 값에서 첫 번째로 나오는 <length> 값은 원본 텍스트를 기준으로 그림자가 가로(수평)로 얼마나 떨어질지를 나타냅니다. 양수(Positive) 값을 주면 그림자가 오른쪽으로 이동하고, 음수(Negative) 값을 주면 왼쪽으로 이동합니다. 그림자를 정중앙에 두고 싶다면 0을 사용하는 것도 아주 흔하고 유효한 방법입니다.
아래 예제에서 각 text-shadow 선언들은 가로 오프셋만 다르게 설정되어 있습니다. 첫 번째 <length> 값이 그림자를 왼쪽(-30px)이나 오른쪽(30px)으로 이동시킵니다.
CSS
.negative {
text-shadow: -30px 0 1px red; /* 왼쪽으로 30px 이동 */
}
.positive {
text-shadow: 30px 0 1px red; /* 오른쪽으로 30px 이동 */
}
.zero {
text-shadow: 0 0 1px red; /* 가로 이동 없음 (정중앙) */
}참고 (Note):
text-shadow속성은outline속성처럼 CSS 박스 모델(CSS box model)에 아무런 영향을 주지 않습니다.box-shadow와 마찬가지로, 텍스트 그림자는 레이아웃을 밀어내거나 흩트리지 않고, 스크롤을 발생시키지도 않으며, 스크롤 가능한 오버플로우 영역의 크기에도 영향을 미치지 않습니다. 텍스트 그림자 때문에 요소의 텍스트가 더 커 보일 수는 있어도, 실제 콘텐츠가 차지하는 너비나 높이에는 아무런 물리적 영향이 없답니다!
세로 오프셋 (Vertical offset)
text-shadow 값에서 두 번째로 나오는 <length> 값은 원본 텍스트를 기준으로 그림자의 세로(수직) 오프셋을 나타냅니다. 이 필수 값은 가로 오프셋과 똑같이 작동하지만, 좌우가 아니라 위아래로 그림자를 이동시킨다는 점만 다릅니다.
이 예제에서는 세로 오프셋만 다르게 설정해 보았습니다. 두 번째 <length> 값이 그림자를 위(-30px)나 아래(30px)로 이동시킵니다.
CSS
.negative {
text-shadow: 0 -30px 1px red; /* 위로 30px 이동 */
}
.positive {
text-shadow: 0 30px 1px red; /* 아래로 30px 이동 */
}
.zero {
text-shadow: 0 0 1px red; /* 세로 이동 없음 (정중앙) */
}흐림 반경 (Blur radius)
흐림 반경(Blur radius)은 세 번째 <length> 값으로 정의되며, 이 값은 선택 사항(생략 가능)입니다. 만약 생략하면 흐림 반경은 0이 되어, 가로/세로 이동 거리만큼 텍스트가 픽셀 단위로 똑같이 복사된 것처럼(선명하게) 그려집니다. 이 값은 무조건 0 또는 그 이상의 양수여야 합니다. 값이 클수록 그림자 효과가 더 넓게 퍼지고 흐릿해집니다.
이 예제에서는 흐림 반경만 다르게 설정했습니다. 세 번째 <length> 값에 잘못된 음수 값을 넣거나(-5px), 그림자를 흐리게 하거나(5px), 텍스트를 그대로 선명하게 복사(0)해 보았습니다.
CSS
.negative {
/* 유효하지 않음(invalid) - 음수는 사용할 수 없습니다. 이 선언은 통째로 무시됩니다. */
text-shadow: 30px 30px -5px red;
}
.positive {
text-shadow: 30px 30px 5px red; /* 적당히 흐릿하게 퍼짐 */
}
.zero {
text-shadow: 30px 30px 0 red; /* 퍼짐 없이 완전히 선명하게 복사됨 */
}그림자 색상 (Shadow color)
텍스트에 여러 개의 그림자를 적용할 수는 있지만, 각각의 단일 그림자는 오직 하나의 기본 색상만을 가집니다. 이 색상은 유효한 CSS color 값이면 무엇이든 다 쓸 수 있습니다. 만약 색상 값을 아예 생략한다면, 기본적으로 해당 텍스트의 글자색인 currentcolor를 따라가게 됩니다.
아래의 세 가지 그림자 설정은 색상을 표현하는 방식(키워드, HEX, RGB)만 다를 뿐, 결과적으로 완벽하게 동일한 그림자 색상을 만들어냅니다:
CSS
.shadow-color {
text-shadow:
5px 5px mediumblue,
10px 10px magenta,
15px 15px rebeccapurple;
}
.shadow-color-hex {
text-shadow:
5px 5px #0000cd,
10px 10px #ff00ff,
15px 15px #663399;
}
.shadow-color-rgb {
text-shadow:
5px 5px rgb(0 0 205),
10px 10px rgb(255 0 255),
15px 15px rgb(102 51 153);
}다중 그림자 (Multiple shadows)
그림자 값들을 쉼표(,)로 구분하여 나열하면, 동일한 텍스트에 여러 개의 그림자를 겹쳐서 적용할 수 있습니다.
그림자 효과는 코드에 작성된 순서대로 앞에서 뒤로(front-to-back) 칠해집니다. 즉, 맨 처음에 작성한 그림자가 가장 위(top)에 올라옵니다.
우리의 예제인 text-shadow: 5px 5px mediumblue, 10px 10px magenta, 15px 15px rebeccapurple; 코드를 살펴볼까요? 3개의 그림자를 정의하고 있는데, 파란색(blue) 그림자가 분홍색(magenta) 그림자 위에 있고, 분홍색 그림자가 보라색(purple) 그림자 위에 위치하게 됩니다.
CSS
p {
text-shadow:
5px 5px mediumblue, /* 제일 위 (1층) */
10px 10px magenta, /* 중간 (2층) */
15px 15px rebeccapurple;/* 제일 아래 (3층) */
}💡 강사의 실무 팁 2: 네온사인 효과 만들기!
이 다중 그림자를 이용하면 밤거리에 빛나는 네온사인 텍스트를 만들 수 있어요!
color: #fff;로 글씨를 하얗게 한 다음,
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de;
이런 식으로 가로세로 오프셋은 0으로 두고, blur 값만 점점 키우면서 같은 색상의 그림자를 여러 겹 쌓아보세요. 빛이 퍼져나가는 듯한 기가 막힌 효과가 만들어집니다.
투명한 텍스트와 다중 그림자 (Multiple shadows with transparent text)
그림자는 배경색이나 배경 이미지보다는 항상 위에 칠해지지만, 요소의 테두리(border)보다는 아래에 칠해집니다. 그림자들끼리는 서로 겹칠 수 있지만, 텍스트 위를 덮을 수는 없습니다. box-shadow 속성에 있는 inset(내부 그림자) 키워드 같은 기능은 텍스트 그림자의 세계에는 존재하지 않습니다. 박스 그림자와 달리, 텍스트 그림자는 그림자를 뿜어내는 글자 형태에 맞춰 잘려나가지(clipped) 않기 때문에, 만약 텍스트가 반투명하거나 투명하다면 텍스트 뒤에 깔린 그림자가 고스란히 비쳐 보이게 됩니다.
아래 예제들은 모두 똑같은 위치에 그림자를 주었지만, 텍스트의 color 값(투명도)만 다르게 적용했습니다. 반투명한 예제들은 글씨를 읽기는 좀 어렵지만, 그림자가 텍스트 뒤에서 어떻게 렌더링되는지 확실하게 보여주기 위해 포함했습니다:
HTML
<p class="opaque">텍스트가 불투명한 검은색입니다 (Opaque black)</p>
<p class="semitransparent">텍스트가 반투명한 검은색입니다 (Semiopaque black)</p>
<p class="transparent">텍스트가 완전히 투명합니다 (Transparent)</p>
<p class="white">텍스트가 불투명한 흰색입니다 (Opaque white)</p>
<p class="semi-white">텍스트가 반투명한 흰색입니다 (Semiopaque white)</p>CSS
p {
text-shadow:
5px 5px 0 mediumblue,
10px 10px 5px magenta,
15px 15px 10px rebeccapurple;
}
.opaque {
color: black;
}
.semitransparent {
color: rgb(0 0 0 / 0.5); /* 투명도 50% */
}
.transparent {
color: transparent; /* 글씨가 아예 안 보이고 그림자만 남습니다! */
}
.white {
color: white;
}
.semi-white {
color: rgb(255 255 255 / 0.75); /* 투명도 75% */
}완전히 투명한("transparent") 예제를 보면, 실제 텍스트는 투명하지만 첫 번째 그림자(파란색)에 흐림(blur) 값이 없기 때문에 모양이 뚜렷해서 마치 진짜 글씨처럼 완벽하게 읽을 수 있습니다.
주목해야 할 점은 그림자가 텍스트 뒤에 나타나며, 텍스트가 100% 불투명하지 않을 때 텍스트를 통과해서 비쳐 보인다는 것입니다. 이 현상은 특히 "반투명한 흰색(semi-white)" 예제에서 아주 잘 보입니다. 이는 그림자가 테두리의 바깥쪽 경계선에서 깔끔하게 잘리는 일반적인 박스 그림자(box-shadow)와는 완전히 다른 동작 방식입니다.
이제 text-shadow를 자유자재로 다루실 수 있게 되었습니다!
단순히 그림자를 넣는 것을 넘어서, 텍스트에 멋진 그라데이션이나 질감을 입히고 싶은 경우 background-clip: text 같은 고급 타이포그래피 기술에 대해서도 알아보고 싶으신가요? 편하게 말씀해 주세요!
