CSS Outline 약식 속성 완벽 가이드

CSS의 outline(아웃라인) 약식(shorthand) 속성은 요소 테두리 바깥쪽에 특정 스타일(필수 값), 두께, 색상을 지정한 선을 그릴 때 사용합니다. 흥미로운 점은 border 속성과 달리 outline은 요소의 실제 크기(width/height 계산)에 포함되지 않는다는 것입니다. 즉, 레이아웃에 영향을 주지 않고 시각적인 강조 효과만 추가할 수 있습니다.

문법(Syntax)

CSS outline 약식 속성의 기본 문법은 다음과 같습니다.

Selector {
   outline: /*값*/
}

약식 속성 하나로 outline-width, outline-style(필수), outline-color 세 가지 값을 동시에 설정할 수 있습니다.

예제 1

outline 약식 속성의 첫 번째 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
span {
   margin: 15px;
   padding: 20px;
   border-style: solid;
   border-color: #f28500 #dc3545;
   position: absolute;
   outline: 5px double green;
   border-radius: 50%;
}
#showDiv {
   margin:auto;
   border-style: solid;
   border-color: darkmagenta dodgerblue;
   outline: groove 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>

실행 결과

위 코드의 실행 결과는 다음과 같습니다.

CSS Outline 약식 속성 완벽 가이드 – 문법과 실전 예제

예제에서 볼 수 있듯이 outline: 5px double green;처럼 두께·스타일·색상을 한 줄로 지정하면 초록색 이중선 아웃라인이 요소 주위에 그려집니다. 원형(border-radius: 50%) 요소에도 자연스럽게 적용됩니다.

예제 2

이번에는 텍스트가 포함된 요소에 outline 약식 속성을 적용한 또 다른 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS outline Shorthand</title>
<style>
#container {
   width:50%;
   margin:50px auto;
}
p {
   margin:auto;
   border-style: ridge;
   border-width: 10px;
   border-color: orange;
   outline: 5px dashed yellow;
}
</style>
</head>
<body>
<div id="container">
<p>Coding Ground is loved by millions of programmers around the globe.</p>
</div>
</body>
</html>

실행 결과

위 코드의 실행 결과는 다음과 같습니다.

CSS Outline 약식 속성 완벽 가이드 – 문법과 실전 예제

이 예제에서는 주황색 능선(ridge) 스타일의 border와 노란색 점선(dashed) 아웃라인이 함께 표현됩니다. border와 outline을 조합하면 입체감 있는 테두리 디자인을 손쉽게 만들 수 있습니다.

정리

outline 약식 속성은 두께, 스타일(필수), 색상을 한 번에 지정할 수 있습니다.
border와 달리 레이아웃 크기에 영향을 주지 않으므로 포커스 강조 등에 유용합니다.
double, dashed, groove 등 다양한 스타일 값을 활용해 보세요.