CSS의 outline 속성은 하나의 선언만으로 요소의 외곽선 관련 속성을 모두 지정할 수 있는 단축(shorthand) 속성입니다. 이 속성 하나로 다음 세 가지 세부 속성을 동시에 설정할 수 있습니다.
- outline-width — 외곽선의 두께
- outline-style — 외곽선의 스타일(solid, dashed 등)
- outline-color — 외곽선의 색상
JavaScript에서 outline 속성 사용하기
JavaScript에서는 style.outline 속성에 값을 할당하는 방식으로 간단하게 외곽선을 설정할 수 있습니다. 아래 예제 코드를 직접 실행하면서 outline 속성이 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
}
</style>
</head>
<body>
<div id="box">This is a div.</div>
<br>
<button type="button" onclick="display()">Click to set Outline</button>
<script>
function display() {
document.getElementById("box").style.outline = "5px solid red";
}
</script>
</body>
</html>코드 설명
위 예제에서는 파란색 점선 테두리(border)가 적용된 <div> 요소를 준비했습니다. 버튼을 클릭하면 display() 함수가 호출되고, document.getElementById("box").style.outline = "5px solid red"; 구문을 통해 div 요소에 빨간색 실선의 5px 두께 외곽선이 한 번에 적용됩니다.
이처럼 outline 단축 속성을 활용하면 두께, 스타일, 색상을 별도로 설정하지 않고도 단 한 줄의 코드로 외곽선 전체를 제어할 수 있어 코드가 더욱 간결해집니다.