HTML DOM의 style.textShadow 속성은 HTML 문서 내 텍스트 요소에 그림자(shadow) 효과를 적용하거나, 현재 설정된 그림자 값을 가져오는 데 사용됩니다. CSS의 text-shadow 스타일을 JavaScript로 동적으로 제어할 수 있어, 버튼 클릭이나 특정 이벤트 발생 시 텍스트에 시각적인 강조 효과를 손쉽게 추가할 수 있습니다.
문법(Syntax)
textShadow 속성의 기본 문법은 다음과 같습니다.
1. textShadow 값 반환하기
object.style.textShadow
2. textShadow 값 설정하기
object.style.textShadow = "value"
속성값(Values)
value 자리에 들어갈 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 해당 속성 값을 상속받습니다. |
| initial | 해당 속성 값을 기본(default) 값으로 설정합니다. |
| none | 텍스트에 그림자를 적용하지 않습니다. |
| h-shadow v-shadow blur color | 텍스트에 그림자를 설정합니다. h-shadow: 수평 방향 그림자 위치 값 v-shadow: 수직 방향 그림자 위치 값 blur: 그림자의 흐림(blur) 거리 color: 그림자의 색상 |
예제(Example)
버튼을 클릭하면 단락(p) 텍스트에 그림자 효과가 적용되는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textShadow Property Example</h1>
<p>Some Dummy Text</p>
<button onclick="add()" class="btn">Set textShadow</button>
<script>
function add() {
document.querySelector('p').style.textShadow = "10px 10px 2px #db133a";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Set textShadow” 버튼을 클릭하면, JavaScript의 querySelector()로 선택한 단락 텍스트에 10px 10px 2px #db133a 값이 적용되어 아래와 같이 붉은색 그림자 효과가 나타납니다.
정리
textShadow 속성은 그림자의 수평 위치(h-shadow), 수직 위치(v-shadow), 흐림 정도(blur), 색상(color) 네 가지 값을 조합하여 사용합니다. 예제에서처럼 "10px 10px 2px #db133a" 형태로 지정하면 오른쪽으로 10px, 아래로 10px 떨어진 위치에 2px만큼 흐려진 붉은색 그림자가 생성됩니다. 이를 활용하면 사용자 인터랙션에 따라 텍스트를 역동적으로 강조하는 UI를 구현할 수 있습니다.