웹 페이지에서 요소에 그림자 효과를 주고 싶다면 CSS의 box-shadow를 활용하면 됩니다. JavaScript에서는 이를 boxShadow 속성을 통해 동적으로 제어할 수 있습니다. 이 속성을 사용하면 그림자의 가로·세로 오프셋(너비), 흐림 정도(blur), 색상 등을 자유롭게 지정할 수 있습니다.
기본 문법
boxShadow 속성은 다음과 같은 형식으로 값을 설정합니다.
element.style.boxShadow = "가로오프셋 세로오프셋 흐림정도 색상";
예제
아래 예제는 버튼을 클릭하면 박스에 주황색 드롭 섀도우가 적용되는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid green;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">Add drop shadow</button>
<script>
function display() {
document.getElementById("box").style.boxShadow = "20px 15px 25px orange";
}
</script>
</body>
</html>코드 설명
위 예제에서 display() 함수는 getElementById로 id가 box인 요소를 선택한 뒤, style.boxShadow에 "20px 15px 25px orange" 값을 할당합니다. 각 값의 의미는 다음과 같습니다.
- 20px: 가로 방향 그림자 오프셋
- 15px: 세로 방향 그림자 오프셋
- 25px: 그림자의 흐림 정도(blur radius)
- orange: 그림자 색상
여러 개의 그림자 추가하기
하나의 요소에 여러 개의 그림자를 동시에 적용하려면 각 그림자 값을 쉼표(,)로 구분하여 나열하면 됩니다.
document.getElementById("box").style.boxShadow =
"20px 15px 25px orange, 5px 5px 10px gray";이렇게 하면 주황색 그림자와 회색 그림자가 겹쳐서 표현되어 더욱 입체적인 효과를 만들 수 있습니다.