HTML DOM의 box-shadow 속성은 요소의 테두리 안쪽 또는 주변에 그림자를 가져오거나 설정하는 데 사용됩니다. CSS만으로도 그림자를 지정할 수 있지만, JavaScript와 함께 이 속성을 활용하면 사용자의 동작에 따라 그림자를 실시간으로 변경하는 동적인 효과를 구현할 수 있습니다.
문법(Syntax)
boxShadow 속성을 설정하는 기본 문법은 다음과 같습니다.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
속성 값(Property Values)
각 속성 값의 의미는 다음과 같습니다.
| 값 | 설명 |
|---|---|
| none | 기본값입니다. 그림자를 표시하지 않습니다. |
| h-offset | 그림자의 수평 오프셋 거리를 지정합니다. 필수 값이며, 양수이면 그림자가 상자의 오른쪽에, 음수이면 왼쪽에 위치합니다. |
| v-offset | 그림자의 수직 오프셋 거리를 지정합니다. 필수 값이며, 양수이면 그림자가 상자의 아래쪽에, 음수이면 위쪽에 위치합니다. |
| blur | 그림자의 흐림 반경(blur radius)을 지정합니다. 값이 클수록 그림자가 더 부드럽고 흐릿하게 표현됩니다. |
| spread | 그림자의 확산 반경(spread radius)을 지정합니다. 양수이면 그림자가 커지고, 음수이면 작아집니다. |
| color | 그림자의 색상을 지정합니다. |
| inset | 그림자를 요소의 바깥쪽이 아닌 안쪽(내부 그림자)으로 표시합니다. |
| initial | 해당 속성을 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
이제 boxShadow 속성을 실제로 활용한 예제를 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 100px;
box-shadow: 10px 10px 3px orange;
}
</style>
<script>
function changeBoxShadow(){
document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green";
document.getElementById("Sample").innerHTML="The box shadow is changed now ";
}
</script>
</head>
<body>
<div id="DIV1">This is a sample div</div>
<p>아래 버튼을 클릭하면 div의 박스 그림자가 변경됩니다.</p>
<button onclick="changeBoxShadow()">Change Box Shadow</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 처음에는 주황색(orange) 그림자가 적용된 div가 화면에 나타납니다.
여기서 “Change Box Shadow” 버튼을 클릭하면 다음과 같이 초록색(green)의 넓은 확산 반경을 가진 그림자로 변경되는 것을 확인할 수 있습니다.
이처럼 style.boxShadow 속성을 사용하면 버튼 클릭과 같은 이벤트 발생 시 요소의 그림자를 자유롭게 제어할 수 있어, 인터랙티브한 UI 효과를 구현하는 데 유용하게 활용됩니다.