HTML DOM Style outline 속성 완벽 정리 – 요소 외곽선 제어 방법

HTML DOM의 style outline 속성은 HTML 문서 내 특정 요소의 외곽선(outline)을 가져오거나 수정할 때 사용하는 속성입니다. 자바스크립트를 통해 버튼 클릭과 같은 이벤트 발생 시 동적으로 요소에 외곽선을 추가하거나 변경할 수 있습니다.

문법(Syntax)

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

1. 외곽선 값 가져오기

object.style.outline

2. 외곽선 값 설정하기

object.style.outline = "width style color"

값은 너비(width) 스타일(style) 색상(color) 순서로 지정하며, 예를 들어 "2px solid #000"처럼 작성합니다. 즉, 2px 두께의 검정색 실선 외곽선을 의미합니다.

예제(Example)

다음은 HTML DOM style outline 속성을 활용한 실제 예제 코드입니다. 버튼을 클릭하면 초록색 박스에 외곽선이 추가되는 구조입니다.

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

실행 결과(Output)

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

HTML DOM Style outline 속성 완벽 정리 – 요소 외곽선 제어 방법

여기서 “Add outline” 버튼을 클릭하면, 자바스크립트 함수가 실행되어 초록색 박스에 2px 두께의 검정색 실선 외곽선이 적용됩니다.

HTML DOM Style outline 속성 완벽 정리 – 요소 외곽선 제어 방법

정리

DOM style outline 속성은 CSS의 outline 스타일을 자바스크립트로 동적으로 제어할 수 있게 해주는 유용한 기능입니다. 버튼 포커스 효과, 강조 표시, 인터랙티브 UI 구현 등 다양한 상황에서 활용할 수 있습니다.