HTML DOM의 borderImageOutset 속성은 요소의 테두리 상자(border box) 바깥쪽으로 배경 이미지 영역이 얼마나 확장될지를 설정하거나 반환하는 데 사용됩니다. 상단(top), 우측(right), 하단(bottom), 좌측(left) 네 방향의 값을 개별적으로 지정하여, 배경 이미지가 해당 테두리로부터 각각 얼마나 떨어져 확장될지 세밀하게 조절할 수 있습니다.
문법(Syntax)
borderImageOutset 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderImageOutset = "length|number|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| length | 테두리 상자로부터 이미지가 얼마나 확장될지 길이 단위(px 등)로 정의합니다. 기본값은 0이며, 이 경우 이미지는 테두리 상자 밖으로 확장되지 않습니다. |
| number | border-width의 배수를 나타내는 숫자 값을 정의합니다. 예를 들어 2를 입력하면 테두리 두께의 2배만큼 확장됩니다. |
| initial | 해당 속성을 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 그대로 상속받습니다. |
실전 예제
다음은 borderImageOutset 속성을 활용한 예제입니다. 버튼을 클릭하면 테두리 이미지의 outset 값이 동적으로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="테두리 이미지 outset 값이 증가했습니다.";
}
</script>
</head>
<body>
<h2>데모 제목</h2>
<p id="P1"> 이것은 예제를 위해 만든 샘플 단락입니다. 이 단락은 본 예제 시연 목적으로만 작성되었습니다.</p>
<p>아래 버튼을 클릭하면 위 div 요소의 테두리 이미지 outset 값이 변경됩니다</p>
<button onclick="changeBottomOutset()">Bottom Outset 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
버튼을 클릭하면 outset 값이 5px에서 20px로 변경되어, 테두리 이미지가 요소 바깥쪽으로 더 넓게 확장된 것을 확인할 수 있습니다.
