CSS / Reference / text-shadow
text-shadow는 글자에 그림자를 추가합니다. 가로·세로 오프셋과 선택적인 흐림 반경, 색을 지정하며 여러 그림자는 쉼표로 겹칠 수 있습니다. box-shadow와 달리 확산 거리와 inset은 사용하지 않습니다.
문법과 주요 값
| 속성 | 초기값 | 상속 | 주요 적용 조건 |
|---|---|---|---|
text-shadow |
none | 예 | 모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인 |
초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.
.title { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
첫 두 길이 |
가로·세로 이동; 음수 값으로 반대 방향 |
세 번째 길이 |
흐림 반경; 음수는 불가 |
색 |
생략하면 currentColor가 사용됨 |
쉼표 / none |
여러 그림자 / 그림자 없음 |
값과 적용 조건은 MDN text-shadow에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 text-shadow-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-shadow 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font-size: 30px; color: #006c9c; }
.target { text-shadow: 2px 3px 4px rgb(0 0 0 / 35%); }
.reference { text-shadow: none; }
</style>
</head>
<body>
<main id="demo">
<h1>text-shadow 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">그림자 있음</p><div class="target">그림자 CSS</div></div><div class="b"><p class="label">none</p><div class="reference">그림자 CSS</div></div></section>
</main>
</body>
</html>
첫 예문의 글자 오른쪽 아래에 흐린 그림자가 보이고 두 번째 예문에는 없습니다. 그림자가 글자 폭과 줄 높이를 직접 늘리지는 않습니다.
여러 레이어와 선명한 윤곽
쉼표로 여러 그림자를 지정하면 앞에 쓴 그림자가 위에 그려집니다. 흐림 없이 반대 방향의 작은 오프셋을 조합하면 윤곽처럼 보일 수 있지만 지나치게 많은 레이어는 글자 형태를 흐릴 수 있습니다. 실제 작은 크기와 모바일 화면에서도 읽을 수 있는지 확인하세요.
사진 위 텍스트의 대비
그림자는 배경과 텍스트를 구별하는 보조 표현일 뿐 충분한 대비를 항상 보장하지 않습니다. 배경 밝기가 변하는 사진에는 배경 패널이나 명확한 색 대비를 검토하고, 중요한 내용을 장식 효과에만 의존하지 않도록 합니다. 상위 overflow가 그림자를 자를 수도 있습니다.
한 가지 설정씩 바꾸어 확인하기
앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.
- 기존 .target의 그림자에서 흐림 4px만 0으로 바꾸고 되돌립니다. 선명한 원문과 흐린 그림자를 각각 읽을 수 있는지 확인합니다.
- 그림자 두 개를 쉼표로 넣고 순서만 바꾸어 겹치는 부분을 비교합니다. 사진 위 텍스트는 그림자만으로 대비를 보장하지 않으므로 대체 배경 패널이나 글자색도 검사합니다.
관련 조건은 WCAG 텍스트 대비 기준에서 확인할 수 있습니다.
문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 box-shadow입니다.
적용되지 않거나 예상과 다를 때
- 그림자 값에 box-shadow의 spread나 inset을 넣지 않았는지 확인합니다.
- 번짐이 크면 먼저 흐림 반경과 알파 값을 줄여 비교합니다.
CSS / Reference / font-variant
small-caps와 숫자 변형을 지정하면서 원문 문자열과 글꼴 기능을 구분합니다. 단축 속성의 재설정과 실제 렌더링 글꼴 확인 방법을 안내합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.
CSS / Reference / list-style-position
목록 마커를 항목 안·밖에 배치하고 여러 줄 시작점을 비교합니다. 첫 블록 자식과 시작 여백, 잘리는 마커를 확인하는 기준을 설명합니다.
CSS / Reference / background-attachment
요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.
문단 첫 줄 들여쓰기와 내어쓰기를 만들고 전체 문단 여백과의 차이를 비교합니다. 음수 값, 상속과 좁은 화면에서 필요한 시작 여백을 확인합니다.
단위 없는 줄 높이와 고정 길이의 상속 결과를 비교합니다. 부모·자식 글자 크기를 바꾸어 계산값과 실제 줄 상자의 차이를 확인합니다.
CSS / Reference / background-clip
배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
긴 단어의 긴급 줄바꿈과 최소 내용 너비를 비교합니다. anywhere·break-word의 min-content 차이와 Flex·Grid에서 필요한 최소 크기 조정을 확인합니다.
숫자 굵기와 상대 굵기를 지정하고 실제 지원 서체를 확인합니다. 정적·가변 글꼴의 차이와 여러 요청이 같은 모습으로 나오는 이유를 설명합니다.