JavaScript에서 요소 주변의 윤곽선(outline) 색상을 설정하려면 outlineColor 속성을 사용합니다. 이 속성에 원하는 색상 값을 지정하면 해당 요소의 외곽선 색이 즉시 변경됩니다.
아래 예제는 버튼을 클릭했을 때 div 요소의 윤곽선 색상을 회색(#5F5F5F)으로 변경하는 코드입니다.
예제
<!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입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
<p>이것은 div입니다. 이것은 div입니다. 이것은 div입니다. 이것은 div입니다.</p>
</div>
<br>
<button type="button" onclick="display()">윤곽선 색상 설정</button>
<br>
<script>
function display() {
document.getElementById("box").style.outline = "thick solid";
document.getElementById("box").style.outlineColor = "#5F5F5F";
}
</script>
</body>
</html>코드 설명
- style.outline: 윤곽선의 스타일을 지정합니다. 위 예제에서는 두꺼운 실선(thick solid)으로 설정했습니다. 윤곽선을 표시하려면 반드시 outline 스타일이 먼저 정의되어야 합니다.
- style.outlineColor: 윤곽선의 색상을 지정합니다. HEX 값(#5F5F5F) 외에도 색상 이름(gray, blue 등)이나 RGB 값(rgb(95, 95, 95))을 사용할 수 있습니다.
참고 사항
윤곽선(outline)은 테두리(border)와 비슷해 보이지만 몇 가지 중요한 차이가 있습니다. 윤곽선은 요소의 크기나 레이아웃에 영향을 주지 않고 요소 바깥쪽에 그려지며, 네 방향 모두 동일하게 적용됩니다. 따라서 포커스 강조나 임시 시각적 피드백을 구현할 때 유용합니다.