요소의 외곽선(outline) 속성을 설정하려면 CSS의 outline 속성을 사용합니다. 이 속성을 활용하면 외곽선의 색상(color), 스타일(style), 그리고 오프셋(offset)까지 한 번에 지정할 수 있습니다.
JavaScript에서는 style.outline 속성에 값을 할당하기만 하면 되며, 개별적으로 outline-color, outline-style, outline-width를 나눠서 설정할 필요 없이 하나의 선언으로 모든 속성을 처리할 수 있다는 점이 큰 장점입니다.
예제
아래 코드를 실행해 보면, 버튼 클릭 시 JavaScript로 div 요소에 외곽선을 한 번의 선언으로 추가하는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 외곽선이 추가됩니다.</p>
<div id="box">
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
</div>
<br>
<button type="button" onclick="display()">외곽선 설정</button>
<br>
<script>
function display() {
document.getElementById("box").style.outline = "thick solid #5F5F5F";
}
</script>
</body>
</html>코드 설명
위 예제에서 display() 함수가 호출되면, id가 "box"인 요소의 style 객체에 접근하여 outline 속성을 설정합니다.
여기서 값으로 사용된 thick solid #5F5F5F는 각각 다음을 의미합니다.
- thick: 외곽선의 두께(width)
- solid: 외곽선의 스타일(style)
- #5F5F5F: 외곽선의 색상(color)
이처럼 outline 속성에 세 가지 값을 공백으로 구분하여 한 줄로 작성하면, 굵기·스타일·색상이 동시에 적용됩니다. border와 달리 outline은 요소의 레이아웃 크기에 영향을 주지 않으므로, 포커스 표시나 강조 효과를 줄 때 유용하게 활용할 수 있습니다.