HTML DOM Style outlineOffset 속성 – 개요와 사용법 총정리

HTML 문서에서 DOM Style outlineOffset 속성은 요소 주위에 그려지는 아웃라인(outline)의 오프셋(간격)을 가져오거나 설정하는 데 사용됩니다. 아웃라인은 테두리(border)와 달리 레이아웃에 영향을 주지 않으면서 요소 외곽을 강조할 수 있는 유용한 시각적 도구입니다.

문법(Syntax)

outlineOffset 속성의 기본적인 사용 문법은 다음과 같습니다.

outlineOffset 값 반환하기

object.style.outlineOffset

outlineOffset 값 변경하기

object.style.outlineOffset = "value"

값은 px, em 등 CSS에서 허용하는 길이 단위로 지정할 수 있으며, 음수 값을 사용하면 아웃라인이 요소 안쪽으로 이동합니다.

예제(Example)

아래 예제는 style outlineOffset 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 초록색 박스 주위의 아웃라인이 바깥쪽으로 8px 떨어지게 됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        background-color: seagreen;
        height: 200px;
        width: 200px;
        outline: 3px solid #000;
        border: 3px solid #fff;
        margin: 1.5rem auto;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style outlineOffset Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add offset</button>
<script>
    function add() {
        document.querySelector('p').style.outlineOffset = "8px";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Style outlineOffset 속성 – 개요와 사용법 총정리

여기서 “Add offset” 버튼을 클릭하면 초록색 박스 주변의 검은색 아웃라인이 8px만큼 바깥쪽으로 밀려나며 간격이 생기는 것을 확인할 수 있습니다.

HTML DOM Style outlineOffset 속성 – 개요와 사용법 총정리

정리

outlineOffset 속성은 자바스크립트를 통해 동적으로 아웃라인의 위치를 조절할 수 있어, 포커스 강조 효과나 인터랙티브한 UI 피드백을 구현할 때 특히 유용합니다. 테두리와 달리 레이아웃 계산에 영향을 주지 않기 때문에 기존 디자인을 유지하면서도 시각적 강조를 손쉽게 추가할 수 있습니다.