HTML 요소 주위에 윤곽선(outline) 스타일을 설정하려면 JavaScript에서 outlineStyle 속성을 사용하면 됩니다. 윤곽선은 테두리(border)와 달리 레이아웃 공간을 차지하지 않으면서 요소를 강조할 수 있는 유용한 시각적 도구입니다.
윤곽선 스타일의 종류
outlineStyle 속성에는 다음과 같은 다양한 값을 지정할 수 있습니다.
- solid — 실선
- dotted — 점선
- dashed — 파선(긴 점선)
- double — 이중선
- groove / ridge / inset / outset — 입체적인 3D 효과 선
또한 윤곽선의 색상은 outlineColor 속성으로, 두께는 outlineWidth 속성으로 함께 지정해야 화면에 윤곽선이 나타납니다.
예제 코드
아래 예제는 버튼을 클릭하면 JavaScript로 div 요소 주위에 회색 실선 윤곽선을 추가하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
margin-left: 20px;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 윤곽선 스타일이 적용됩니다.</p>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<button type="button" onclick="display()">윤곽선 스타일 설정</button>
<br>
<script>
function display() {
document.getElementById("box").style.outlineColor = "#5F5F5F";
document.getElementById("box").style.outlineStyle = "solid";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 실행되어 id가 "box"인 요소에 다음 두 가지 스타일이 적용됩니다.
- outlineColor = "#5F5F5F" — 윤곽선 색상을 진회색으로 지정합니다.
- outlineStyle = "solid" — 윤곽선을 실선 형태로 표시합니다.
실행 결과, 주황색 배경의 div 요소 바깥쪽에 붉은 테두리와 별개로 회색 실선 윤곽선이 나타나는 것을 확인할 수 있습니다. dotted나 dashed 등 다른 값으로 변경하면서 다양한 윤곽선 스타일을 실험해 보세요.