HTML DOM의 borderImageSource 속성은 요소의 테두리(border)로 사용할 이미지의 소스를 설정하거나 반환하는 데 사용됩니다. CSS의 border-image-source 속성과 동일한 역할을 하며, JavaScript를 통해 동적으로 테두리 이미지를 변경할 수 있습니다.
문법
borderImageSource 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderImageSource = "none|image|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| none | 테두리 이미지를 사용하지 않습니다. 별도의 테두리 스타일(border)이 지정되어 있다면 해당 스타일이 적용됩니다. |
| image | 테두리로 사용할 이미지의 경로(URL)를 지정합니다. url() 함수 안에 이미지 경로를 작성합니다. |
| fill | 테두리 이미지의 가운데(middle) 영역을 유지하여 요소 내부까지 채우는 데 사용됩니다. |
| initial | 해당 속성을 기본(default) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제 코드
다음 예제는 버튼 클릭 시 div 요소의 테두리 이미지를 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="테두리 이미지가 변경되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">div 안에 있는 샘플 텍스트입니다</div>
<p>아래 버튼을 클릭하여 위 div의 테두리 이미지를 변경해 보세요</p>
<button onclick="changeBorderImage()">테두리 이미지 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
코드를 실행하면 초기에는 asp.net 로고 이미지가 테두리로 표시됩니다. 이후 “테두리 이미지 변경” 버튼을 클릭하면 Swift 아이콘 이미지로 테두리가 즉시 교체되고, 그 결과 메시지가 화면에 출력됩니다.
예제 상세 설명
1. CSS 스타일 및 div 요소 생성
먼저 id가 “DIV1”인 div 요소를 만들고, 여기에 CSS 스타일을 적용했습니다. border-image-source 속성으로 테두리 이미지의 URL을 지정하고, border-image-slice 속성으로 이미지 분할 크기를 설정합니다.
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
<div id="DIV1">div 안에 있는 샘플 텍스트입니다</div>2. 버튼 생성
사용자가 클릭하면 changeBorderImage() 함수가 실행되는 버튼을 만듭니다.
<button onclick="changeBorderImage()">테두리 이미지 변경</button>
3. changeBorderImage() 함수 동작 원리
changeBorderImage() 함수는 getElementById() 메서드를 사용해 “DIV1” 요소에 접근합니다. 그런 다음 해당 요소의 borderImageSource 속성에 새로운 이미지 URL을 할당하여 테두리 이미지를 교체합니다. 마지막으로 innerHTML 속성을 활용해 id가 “Sample”인 문단에 변경 완료 메시지를 출력합니다.
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="테두리 이미지가 변경되었습니다";
}정리
borderImageSource 속성은 JavaScript에서 요소의 테두리 이미지를 실시간으로 제어할 수 있게 해주는 강력한 도구입니다. none, image(url), fill, initial, inherit 등 다양한 값을 지원하며, 버튼 클릭과 같은 사용자 인터랙션에 따라 테두리 디자인을 동적으로 변경하는 UI를 손쉽게 구현할 수 있습니다.