웹 개발에서 요소에는 테두리(border) 색상과 외곽선(outline) 색상을 각각 지정할 수 있습니다. 두 속성의 가장 큰 차이점은 테두리와 달리 외곽선은 레이아웃 공간을 차지하지 않는다는 점입니다. 즉, 외곽선은 요소의 크기나 위치에 영향을 주지 않으면서 시각적으로 강조 효과를 낼 수 있습니다.
CSS에서 border-color 속성은 요소의 테두리 색상을 설정하고, outline-color 속성은 외곽선 색상을 설정하는 데 사용됩니다.
문법(Syntax)
CSS border-color와 outline-color 속성의 기본 문법은 다음과 같습니다.
/*테두리 색상 설정*/
Selector {
border-color: /*값*/
}
/*외곽선 색상 설정*/
Selector {
outline-color: /*값*/
}색상 값은 색상 이름(예: red), HEX 코드(#ff0000), RGB/RGBA 값 등 다양한 형식으로 지정할 수 있으며, border-color처럼 여러 값을 공백으로 구분해 입력하면 상하좌우 테두리에 서로 다른 색상을 적용할 수도 있습니다.
아래 예제들을 통해 CSS border-color와 outline-color 속성의 실제 동작 방식을 살펴보겠습니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
top: 15px;
border-radius: 50%;
}
div {
margin: auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-color: black;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
위 예제에서 span 요소는 border-color: limegreen crimson을 통해 위아래 테두리는 라임그린, 좌우 테두리는 크림슨 색상으로 지정되었으며, 주황색 ridge 스타일의 외곽선이 함께 적용되었습니다. div 요소 역시 두 가지 테두리 색상과 검은색 점선(dotted) 외곽선이 함께 표현됩니다.
예제 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
</style>
</head>
<body>
<h2>시험 시간 안내</h2>
<p>입학시험은 오후 3시부터 5시까지 진행됩니다. 모든 응시자는 오후 2시 45분까지 도착하여 집결해 주시기 바랍니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
이 예제에서는 p 요소에 연한 파란색(lightblue) ridge 스타일 테두리와 진한 보라색(darkviolet) 실선(solid) 외곽선을 함께 적용했습니다. 이처럼 border-color와 outline-color를 조합하면 콘텐츠를 더욱 돋보이게 하는 다양한 시각 효과를 손쉽게 구현할 수 있습니다.