borderImageSlice 속성이란?
HTML DOM의 borderImageSlice 속성은 테두리 이미지(border-image)가 여러 영역으로 어떻게 나뉘어 적용되는지 정의하는 데 사용됩니다. 백분율(%), 숫자(number) 또는 전역(global) 값을 지정하여 테두리 이미지의 오프셋(offset)을 설정할 수 있습니다.
이 속성을 활용하면 하나의 이미지를 아홉 구역(모서리 4개, 변 4개, 중앙 1개)으로 분할하여 요소의 테두리를 자연스럽게 꾸밀 수 있습니다.
문법(Syntax)
borderImageSlice 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderImageSlice = "number|%|fill|initial|inherit";
값(Value) 설명
| 값 | 설명 |
|---|---|
| number | 래스터(raster) 이미지에서는 픽셀(px) 단위를, 벡터(vector) 이미지에서는 벡터 좌표를 나타냅니다. |
| % | 이미지 크기를 기준으로 상대적인 수평·수직 오프셋을 지정합니다. 기본값은 100%입니다. |
| fill | 테두리 이미지의 가운데(middle) 부분을 잘라내지 않고 유지하여 요소 내부에도 표시합니다. |
| initial | 해당 속성을 기본(default) 값으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 그대로 상속받습니다. |
예제(Example)
다음 예제는 버튼 클릭 시 div 요소의 borderImageSlice 값을 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
}
#b1 {
border: 30px solid transparent;
padding: 5px;
font-size: 20px;
border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
border-image-slice: 60%;
}
</style>
<script>
function changeBorderSlice(){
document.getElementById("b1").style.borderImageSlice = "10%";
document.getElementById("Sample").innerHTML = "테두리 이미지 슬라이스 값이 변경되었습니다.";
}
</script>
</head>
<body>
<div id="b1">div 안에 있는 샘플 텍스트입니다.</div>
<p>위 div의 테두리 이미지 슬라이스 값을 변경해 보세요…</p>
<button onclick="changeBorderSlice()">테두리 슬라이스 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
초기 화면에서는 테두리 이미지가 60% 슬라이스 값으로 적용된 것을 확인할 수 있습니다.
'테두리 슬라이스 변경' 버튼을 클릭하면 슬라이스 값이 10%로 바뀌면서 테두리 이미지가 다르게 표시됩니다.
이처럼 borderImageSlice 속성을 JavaScript와 함께 사용하면 사용자 인터랙션에 따라 테두리 이미지의 분할 방식을 실시간으로 조절할 수 있습니다.