웹 페이지에서 텍스트에 그림자 효과를 적용하려면 JavaScript의 textShadow 속성을 사용하면 됩니다. 이 속성은 CSS의 text-shadow와 동일한 방식으로 동작하며, 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경(blur radius), 색상을 순서대로 지정할 수 있습니다.
textShadow 속성 기본 문법
textShadow 값은 아래와 같은 형식으로 작성합니다.
textShadow = "수평오프셋 수직오프셋 흐림반경 색상";
또한 쉼표(,)로 구분하면 하나의 텍스트에 여러 개의 그림자를 동시에 적용할 수 있어 더욱 입체적인 효과를 연출할 수 있습니다.
예제
아래 코드는 버튼을 클릭하면 자바스크립트를 통해 텍스트에 그림자 효과가 적용되는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<button onclick = "display()">Set Text Shadow</button>
<div id = "myID">
This is Demo Text! This is Demo Text! This is <br>This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text!<br> This is Demo Text!<br> This is Demo Text! This is Demo Text! This is Demo Text! This is Demo Text!
</div>
<script>
function display() {
document.getElementById("myID").style.textShadow = "2px 2px 2px #ff0000,20px 5px 2px #F1F1F1";
}
</script>
</body>
</html>코드 설명
위 예제에서 "2px 2px 2px #ff0000"은 텍스트에서 오른쪽으로 2px, 아래로 2px 떨어진 위치에 2px만큼 흐려진 빨간색(#ff0000) 그림자를 생성합니다. 이어지는 "20px 5px 2px #F1F1F1" 값은 더 멀리 배치된 연회색 그림자를 추가로 적용하여 텍스트에 깊이감과 입체적인 느낌을 더해줍니다.
버튼을 클릭하면 display() 함수가 실행되어 getElementById()로 선택한 요소의 style 객체에 textShadow 값이 할당되는 방식으로 동작합니다. 이처럼 JavaScript를 활용하면 사용자의 상호작용에 따라 그림자 효과를 동적으로 변경할 수 있습니다.