웹 페이지에서 요소의 윤곽선(outline) 색상을 동적으로 변경하고 싶다면, JavaScript의 outlineColor 속성을 사용하면 됩니다. 이 속성은 CSS의 outline-color 속성에 대응하며, 사용자의 클릭과 같은 특정 이벤트에 반응해 윤곽선 색상을 실시간으로 바꿀 때 유용합니다.
아래 예제 코드를 실행하고 버튼을 클릭해 보세요. #box 요소의 윤곽선 색상이 주황색 계열인 #FF5733으로 변경되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px solid red;
}
</style>
</head>
<body>
<div id = "box">
Demo Content
</div>
<br>
<button type = "button" onclick = "display()">Change outline color</button>
<script>
function display() {
document.getElementById("box").style.outlineColor = "#FF5733";
document.getElementById("box").style.outline = "2px solid";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 onclick 이벤트에 의해 display() 함수가 호출됩니다. 이 함수 내부에서는 다음과 같은 작업이 수행됩니다.
1. 요소 선택: document.getElementById("box")를 사용해 id가 box인 div 요소를 가져옵니다.
2. 윤곽선 색상 지정: style.outlineColor 속성에 원하는 색상 값(#FF5733)을 할당합니다. 색상은 HEX 코드 외에도 rgb(), hsl(), 색상 이름 등 다양한 형식으로 지정할 수 있습니다.
3. 윤곽선 스타일 지정: style.outline 속성으로 2px solid를 설정해 윤곽선의 두께와 스타일을 정의합니다. 윤곽선은 기본적으로 화면에 표시되지 않으므로, 색상만 지정해서는 눈에 보이지 않으며 반드시 두께와 스타일을 함께 설정해야 합니다.
참고로 윤곽선(outline)은 테두리(border)와 달리 요소의 레이아웃 크기에 영향을 주지 않으므로, 포커스 강조나 시각적 피드백 효과를 줄 때 자주 활용됩니다.