웹 페이지의 요소에 그림자를 추가하는 것은 매력적인 헤더를 만드는 핵심 요소 중 하나입니다. 예를 들어 웹사이트를 디자인할 때 상단 헤더마다 그림자를 넣으면, 페이지의 다른 텍스트보다 훨씬 눈에 잘 띄게 만들 수 있습니다.
바로 이럴 때 필요한 것이 CSS의 text-shadow 속성입니다. text-shadow 속성을 사용하면 텍스트 요소에 그림자 효과를 간단하게 적용할 수 있습니다. 이번 글에서는 텍스트 그림자의 기본 개념과 함께, 실제 예제를 통해 text-shadow 속성으로 웹 페이지의 텍스트에 그림자를 넣는 방법을 단계별로 살펴보겠습니다.
CSS 텍스트 그림자(text-shadow)란?
그림자는 웹 페이지에서 특정 요소를 돋보이게 하는 효과적인 방법입니다. 예를 들어 초록색 그림자가 있는 텍스트 한 줄은 일반적인 검정 텍스트보다 사용자의 시선을 끌 가능성이 훨씬 높습니다.
CSS의 text-shadow 속성을 사용하면 텍스트 요소 주위에 그림자를 추가할 수 있습니다. 이 속성은 제목(h1~h6), 단락(p 태그) 등 HTML의 모든 텍스트 기반 요소에 적용할 수 있습니다.
text-shadow 속성의 기본 문법은 다음과 같습니다.
text-shadow: offset-x offset-y blur-radius color;
text-shadow의 문법은 박스 형태의 HTML 요소에 그림자를 적용하는 box-shadow 속성과 유사합니다. 각 구성 요소의 의미는 다음과 같습니다.
- offset-x: 그림자의 가로(x축) 오프셋 (필수)
- offset-y: 그림자의 세로(y축) 오프셋 (필수)
- blur-radius: 그림자의 흐림(blur) 반경 (선택)
- color: 그림자의 색상. 기본값은 검정 (선택)
그럼 몇 가지 예제를 통해 text-shadow 속성을 직접 활용하는 방법을 알아보겠습니다. 이 튜토리얼에서는 아래와 같은 HTML 코드를 기준으로 설명합니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
color: lightblue;
}
</style>
이 코드를 실행하면 화면에 'Career Karma'라는 텍스트가 담긴 h1 요소가 렌더링됩니다. h1은 HTML에서 지원하는 가장 큰 크기의 제목 요소입니다. CSS에서 color 속성 값을 lightblue로 설정했기 때문에 헤더는 연한 파란색 텍스트로 표시됩니다.
기본 텍스트 그림자 만들기
text-shadow 속성을 사용할 때 반드시 지정해야 하는 값은 offset-x와 offset-y 두 가지뿐입니다. 이 두 값만 지정해도 가로·세로 방향으로 이동한 그림자를 만들 수 있습니다.
다음은 두 값을 모두 지정한 예제입니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px;
}
</style>
위 코드에서는 헤더에 간단한 그림자를 적용했습니다. 이 그림자는 가로축과 세로축 모두 1px씩 이동한 위치에 생성됩니다. 실행 결과를 보면 텍스트 아래쪽에 은은한 검정색 그림자가 생긴 것을 확인할 수 있습니다. 그림자의 기본 색상은 검정입니다.
그림자 색상 지정하기
텍스트 그림자를 디자인할 때 기본 검정 대신 원하는 색상을 지정하고 싶다면 color 값을 활용하면 됩니다.
예를 들어 그림자를 연분홍색으로 바꾸고 싶다면 다음과 같이 작성할 수 있습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px pink;
}
</style>
위 코드에서는 color 값으로 pink를 지정해 텍스트 아래에 분홍색 그림자를 만들었습니다. 첫 번째 예제와 마찬가지로 그림자는 가로·세로 축 모두 1px씩 이동한 위치에 배치됩니다.
흐릿한(블러) 그림자 만들기
text-shadow 속성은 blur-radius 값과 함께 사용하면 부드럽게 흐려진 그림자를 만들 수 있습니다.
예를 들어 가로·세로 축 모두 3px씩 이동하고, 그림자 주변에 2px의 흐림 효과를 넣고 싶다면 다음과 같이 작성합니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink;
}
</style>
실행 결과를 보면 그림자가 양축 방향으로 3px씩 이동했고, 그림자 주변에 흐림 효과가 적용된 것을 확인할 수 있습니다. 흐림 효과를 더 강하게 하고 싶다면 blur-radius 값을 늘리면 됩니다. 더 흐릿한 그림자를 원한다면 5px, 10px 등 원하는 흐림 정도에 따라 값을 조절하면 됩니다. 이 예제에서 그림자 색상은 분홍색입니다.
여러 개의 그림자 적용하기
지금까지는 텍스트 블록 하나에 그림자 하나를 적용하는 방법을 살펴봤습니다. 하지만 text-shadow 속성은 하나의 텍스트 요소에 여러 개의 그림자를 동시에 적용할 수도 있습니다.
텍스트에 여러 그림자를 추가하려면 쉼표로 구분된 그림자 목록을 만들면 됩니다. 문법은 다음과 같습니다.
text-shadow: shadowOne, shadowTwo;
쉼표로만 구분해 주면 원하는 만큼 그림자를 지정할 수 있습니다. 다만 각 그림자의 x-offset과 y-offset 값이 점점 커지도록 설정해야 합니다. 그렇지 않으면 그림자들이 서로 겹쳐서 제대로 보이지 않을 수 있습니다.
그림자는 지정한 순서대로 표시됩니다. 즉, shadowOne이 먼저 나타나고 그다음 shadowTwo가 나타납니다.
예를 들어 텍스트 뒤에 분홍색과 주황색 그림자가 겹쳐진 배너를 만들고 싶다면 다음과 같이 작성할 수 있습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}
</style>
위 코드에서는 두 개의 그림자를 지정했습니다. 각 그림자에 설정한 값은 다음과 같습니다.
| 속성 이름 | 첫 번째 그림자 | 두 번째 그림자 |
|---|---|---|
| offset-x | 3px | 6px |
| offset-y | 3px | 6px |
| blur-radius | 2px | 5px |
| color | pink | orange |
위와 같이 서로 다른 값을 가진 두 개의 그림자를 하나의 텍스트에 동시에 적용하면 입체적이고 개성 있는 텍스트 효과를 연출할 수 있습니다.
마무리
text-shadow 속성은 HTML 텍스트 블록에 그림자를 추가할 때 사용합니다. 제목이나 단락 등 텍스트 기반 요소라면 어디든 자유롭게 적용할 수 있습니다.
이번 글에서는 텍스트 그림자의 기본 개념과 함께, text-shadow 속성으로 커스텀 그림자를 만드는 방법을 다양한 예제와 함께 살펴봤습니다. 이제 전문 웹 디자이너처럼 나만의 CSS 텍스트 그림자를 디자인할 준비가 되셨기를 바랍니다!