HTML DOM 스타일 outlineColor 속성 완벽 가이드

DOM의 outlineColor 속성은 HTML 문서에서 요소 주위에 그려지는 외곽선(outline)의 색상을 가져오거나 변경하는 데 사용됩니다. 외곽선은 테두리(border)와 달리 요소의 레이아웃에 영향을 주지 않으므로, 시각적 강조가 필요할 때 유용하게 활용할 수 있습니다.

문법(Syntax)

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

1. outlineColor 값 반환하기

object.style.outlineColor

2. outlineColor 값 설정하기

object.style.outlineColor = "color"

색상 값은 색상 이름(예: red), HEX 코드(예: #db133a), RGB/RGBA 값 등 CSS에서 지원하는 모든 형식으로 지정할 수 있습니다.

예제(Example)

다음은 style outlineColor 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 초록색 박스의 외곽선 색상이 빨간색으로 변경됩니다.

<!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 outlineColor Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
    function add() {
        document.querySelector('p').style.outlineColor = "#db133a";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 스타일 outlineColor 속성 완벽 가이드

화면에 있는 “Add outline” 버튼을 클릭하면, 초록색 박스를 감싸고 있던 검정색 외곽선의 색상이 빨간색(#db133a)으로 즉시 변경되는 것을 확인할 수 있습니다.

HTML DOM 스타일 outlineColor 속성 완벽 가이드

핵심 정리

outlineColor는 요소 외곽선의 색상만 담당하며, 외곽선의 두께나 스타일은 outlineWidth, outlineStyle 속성으로 별도 지정해야 합니다.
외곽선은 테두리와 달리 문서 흐름(layout)에 영향을 주지 않아 공간을 차지하지 않습니다.
JavaScript를 통해 동적으로 외곽선 색상을 제어하면 버튼 클릭, 포커스 강조 등 다양한 인터랙션 효과를 구현할 수 있습니다.