outlineWidth 속성이란?
DOM의 style.outlineWidth 속성은 HTML 문서에서 특정 요소 주위에 그려지는 외곽선(outline)의 두께를 가져오거나 변경할 때 사용됩니다.
외곽선(outline)은 테두리(border)와 비슷하지만 레이아웃 공간을 차지하지 않고, 요소 바깥쪽에 그려진다는 점이 다릅니다. 따라서 버튼 포커스 표시 등 시각적 강조 효과를 줄 때 유용하게 활용됩니다.
문법(Syntax)
outlineWidth 속성의 기본 문법은 다음과 같습니다.
1. 외곽선 두께 값 가져오기
object.style.outlineWidth
2. 외곽선 두께 값 설정하기
object.style.outlineWidth = "value"
설정할 수 있는 대표적인 값은 다음과 같습니다.
- thin / medium / thick – 얇은, 보통, 두꺼운 외곽선을 지정합니다.
- length – px, em 등 단위로 직접 두께를 지정합니다. (예: 5px)
- initial – 기본값으로 되돌립니다.
- inherit – 부모 요소의 값을 상속받습니다.
예제(Example)
아래 예제는 버튼을 클릭하면 초록색 박스의 외곽선 두께가 변경되는 코드입니다.
<!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 outlineWidth Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
function add() {
document.querySelector('p').style.outlineWidth = "5px";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
초기 상태에서는 초록색 박스 주위에 2px 두께의 검은색 외곽선이 표시됩니다. 여기서 [Add outline] 버튼을 클릭해 보세요.
버튼을 클릭하면 자바스크립트의 add() 함수가 실행되어 document.querySelector('p').style.outlineWidth = "5px"; 구문에 의해 초록색 박스의 외곽선 두께가 5px로 변경되는 것을 확인할 수 있습니다.
정리
이처럼 style.outlineWidth 속성을 활용하면 자바스크립트만으로 요소 외곽선의 두께를 동적으로 읽고 수정할 수 있습니다. 사용자 입력 강조, 포커스 표시, 인터랙티브한 UI 피드백 등을 구현할 때 유용하게 사용해 보시기 바랍니다.