outline-color 속성은 요소의 테두리(border) 바깥쪽에 특정 색상의 선을 그리기 위해 사용됩니다. 다만 border 속성과 달리, 아웃라인(outline)은 요소의 실제 크기(width/height 계산)에는 포함되지 않는다는 점이 중요한 특징입니다. 즉, 아웃라인을 추가해도 레이아웃에 영향을 주지 않으므로 포커스 강조나 시각적 피드백 등에 유용하게 활용할 수 있습니다.
문법(Syntax)
CSS outline-color 속성의 기본 문법은 다음과 같습니다.
Selector {
outline-color: /*값*/
}참고: outline-color를 선언하기 전에 반드시 outline-style 속성을 먼저 정의해야 합니다. outline-style이 지정되지 않으면 기본값이 none이므로 색상을 설정해도 화면에 표시되지 않습니다.
예제 1
다음은 outline-color 속성을 활용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: #f28500 #dc3545;
position: absolute;
outline-width: 5px;
outline-style: double;
outline-color: green;
border-radius: 50%;
}
#showDiv {
margin:auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: groove;
outline-color: black;
height: 80px;
width: 80px;
}
#container {
width:50%;
margin:50px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="showDiv"><span></span></div>
</div></body></html>실행 결과
위 코드를 실행하면 원형 요소에 초록색 이중(double) 아웃라인이, 내부 div에는 검은색 홈(groove) 스타일의 아웃라인이 각각 적용되어 표시됩니다.
예제 2
이번에는 outline-style과 함께 outline-color를 조합한 또 다른 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-color</title>
<style>
#container {
width:50%;
margin:50px auto;
}
p {
margin:auto;
border-style: ridge;
border-width: 10px;
border-color: lightblue;
outline-style: dashed;
outline-width: 5px;
outline-color: violet;
}
</style>
</head>
<body>
<div id="container">
<p>Reach millions of professionals with video tutorials.</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 연한 파란색 능선(ridge) 테두리 안쪽으로 보라색(violet) 점선(dashed) 아웃라인이 나타나는 것을 확인할 수 있습니다.
정리
outline-color 속성은 요소 외곽에 색상 있는 선을 그릴 때 사용하며, border와 달리 레이아웃 크기에 영향을 주지 않습니다. 사용 시에는 outline-style을 먼저 지정해야 한다는 점만 기억하면 됩니다. 접근성 측면에서도 키보드 포커스 표시 등에 활용 가치가 높은 속성입니다.