JavaScript에서 borderImageRepeat 속성을 사용하면 이미지 테두리(border-image)를 반복(repeat), 둥글게(round), 또는 늘리기(stretch) 방식으로 표시할지 설정할 수 있습니다.
borderImageRepeat 주요 속성값
- stretch – 이미지 조각을 늘려 테두리 영역 전체를 채웁니다. (기본값)
- repeat – 이미지 조각을 반복해서 배치하고, 남는 부분은 잘라냅니다.
- round – 이미지 조각이 잘리지 않도록 크기를 자동으로 조정하면서 반복 배치합니다.
예제
아래 코드를 실행하면 버튼을 클릭했을 때 이미지 테두리가 'round' 방식으로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: blue;
border: 30px solid;
border-image: url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg');
border-image-slice: 10 10 30 30;
border-image-width: 1 1 1 1;
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div id="box">
<p>
Demo Text!
</p>
</div>
<button onclick="display()">Click me!</button>
<script>
function display() {
document.getElementById("box").style.borderImageRepeat = "round";
}
</script>
</body>
</html>코드 설명
위 예제에서 div 요소는 처음에 border-image-repeat: stretch로 설정되어 있어 이미지 테두리가 늘어난 상태로 표시됩니다. 그러나 Click me! 버튼을 클릭하면 display() 함수가 실행되고, JavaScript의 style.borderImageRepeat 속성이 "round"로 변경됩니다. 이에 따라 이미지 테두리가 잘리지 않고 균등하게 반복 배치되는 것을 확인할 수 있습니다.