HTML DOM의 borderImageRepeat 속성은 테두리 이미지(border image)에서 잘라낸 이미지 조각(slice)이 영역을 어떻게 채울지 정의하는 데 사용됩니다. 이 속성을 활용하면 테두리 이미지를 늘리거나(stretch), 반복하거나(repeat), 균등하게 채우는(round) 방식을 자바스크립트로 동적으로 설정하거나 현재 값을 가져올 수 있습니다.
문법(Syntax)
borderImageRepeat 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit";
속성 값(Value)
borderImageRepeat 속성에 사용할 수 있는 값과 각 값의 의미는 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | stretch 이미지가 영역 전체를 채우도록 늘어납니다. 기본값(default)입니다. |
| 2 | repeat 이미지가 타일처럼 반복되어 영역을 채웁니다. |
| 3 | round 이미지를 반복해 영역을 채우되, 영역이 정수 배로 나누어지지 않으면 이미지 크기를 자동으로 재조정(rescale)하여 맞춥니다. |
| 4 | space round와 유사하지만, 이미지가 정수 배로 반복되지 않을 경우 남는 공간을 타일 사이에 균등하게 분배합니다. |
| 5 | initial 속성을 기본(initial) 값으로 되돌립니다. |
| 6 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 borderImageRepeat 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 repeat 방식으로 설정된 테두리 이미지가 stretch 방식으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source:
url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="테두리 이미지가 이제 stretch 방식으로 늘어납니다.";
}
</script>
</head>
<body>
<h2>데모 제목</h2>
<p id="b1">단락 안에 들어 있는 임의의 텍스트입니다. 여기에 또 다른 줄이 있습니다.</p>
<p>아래 버튼을 클릭하면 위 단락의 테두리 이미지 반복 속성이 변경됩니다.</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
버튼을 클릭한 후에는 테두리 이미지가 stretch 방식으로 변경되어 다음과 같이 표시됩니다.
정리
borderImageRepeat 속성은 CSS의 border-image-repeat 속성을 자바스크립트로 제어할 수 있게 해주는 DOM 인터페이스입니다. stretch, repeat, round, space 네 가지 핵심 값의 차이를 이해하면, 반응형 웹 디자인에서 테두리 이미지가 깨지지 않고 자연스럽게 표현되도록 만들 수 있습니다. 특히 round와 space는 이미지 비율을 유지하면서 영역을 꽉 채워야 하는 경우에 유용하게 활용됩니다.