HTML DOM Style outlineStyle 속성 완벽 정리

DOM Style의 outlineStyle 속성은 HTML 문서에서 요소 주위에 그려지는 외곽선(outline)의 스타일을 가져오거나 변경하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 요소의 외곽선을 실선, 점선, 파선 등 다양한 형태로 동적으로 제어할 수 있습니다.

문법(Syntax)

outlineStyle 속성의 기본 문법은 다음과 같습니다.

1. outlineStyle 값 반환하기

object.style.outlineStyle

2. outlineStyle 값 설정하기

object.style.outlineStyle = "value"

value 자리에는 solid(실선), dashed(파선), dotted(점선), double(이중선), none(없음) 등 CSS에서 지원하는 outline 스타일 값을 지정할 수 있습니다.

예제(Example)

아래 예제를 통해 outlineStyle 속성의 사용 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        background-color: seagreen;
        height: 200px;
        width: 200px;
        outline: 2px solid #000;
    }
    .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 outlineStyle Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
    function add() {
        document.querySelector('p').style.outlineStyle = "dashed";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Style outlineStyle 속성 완벽 정리

초록색 박스가 표시된 상태에서 “Add outline” 버튼을 클릭해 보세요. 버튼 클릭 시 자바스크립트 함수가 실행되어 초록색 박스 주위의 외곽선 스타일이 기존의 실선(solid)에서 파선(dashed)으로 변경되는 것을 확인할 수 있습니다.

HTML DOM Style outlineStyle 속성 완벽 정리

정리

outlineStyle 속성은 border와 달리 레이아웃에 영향을 주지 않으면서 요소를 강조하고 싶을 때 유용하게 활용됩니다. 특히 포커스 표시나 인터랙티브한 UI 효과를 구현할 때 자바스크립트와 함께 사용하면 매우 효과적입니다.