borderImage 속성은 HTML 요소의 테두리 이미지를 설정하거나 조회할 때 사용하는 DOM 스타일 속성입니다. 이 속성은 단축(shorthand) 속성으로, borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset, borderImageRepeat 등 다섯 개의 개별 속성 값을 한 번에 지정할 수 있다는 장점이 있습니다.
문법(Syntax)
borderImage 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderImage = "source slice width outset repeat|initial|inherit"
속성 값(Value)
borderImage 속성에 사용할 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | borderImageSource 테두리로 사용할 이미지의 경로(URL)를 지정합니다. |
| 2 | borderImageSlice 이미지 테두리의 안쪽 오프셋(inward offset)을 지정합니다. |
| 3 | borderImageWidth 이미지 테두리의 너비를 지정합니다. |
| 4 | borderImageOutset 테두리 이미지 영역이 테두리 상자(border box) 밖으로 얼마나 확장되는지 지정합니다. |
| 5 | borderImageRepeat 이미지 테두리를 반복(repeat), 둥글게 채우기(round) 또는 늘리기(stretch) 중 어떤 방식으로 처리할지 지정합니다. |
| 6 | initial 해당 속성을 기본(initial) 값으로 설정합니다. |
| 7 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 borderImage 속성을 활용하여 버튼 클릭 시 문단의 테두리 이미지를 동적으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1 {
border: 15px solid transparent;
padding: 12px;
border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
width: 100px;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/images/mongodb.png') 20 round";
document.getElementById("Sample").innerHTML="테두리 이미지가 변경되었습니다.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>아래 버튼을 클릭하면 위 문단의 테두리 이미지가 변경됩니다.</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
[Change Border Image] 버튼을 클릭하면 테두리 이미지가 새로운 이미지로 교체되며, repeat 방식 대신 round 방식으로 반복 렌더링됩니다.
