CSS3 outline-offset 속성이란?
아웃라인(outline)은 요소의 테두리(border) 바깥쪽에 선을 그려 시각적으로 강조하는 속성입니다. 일반적인 border와 달리 레이아웃 공간을 차지하지 않으며, outline-offset 속성을 사용하면 테두리와 아웃라인 사이의 간격을 자유롭게 조절할 수 있습니다.
outline-offset 속성의 주요 특징
- 테두리(border) 외부에 아웃라인 선을 그립니다.
- 지정한 값만큼 테두리에서 떨어진 위치에 아웃라인이 표시됩니다.
- 음수 값을 사용하면 아웃라인을 테두리 안쪽으로 당길 수 있습니다.
- 아웃라인은 문서 흐름(layout)에 영향을 주지 않습니다.
예제 코드
다음 코드를 실행하면 CSS3 outline-offset 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>
코드 설명
위 예제에서 div 요소에는 분홍색(pink) 5px 두께의 테두리가 적용되고, 그 바깥쪽에는 초록색(green) 5px 두께의 아웃라인이 그려집니다. outline-offset: 15px; 설정 덕분에 테두리와 아웃라인 사이에 15px의 여백이 생기는 것을 브라우저에서 직접 확인할 수 있습니다.
이처럼 outline-offset 속성은 포커스 표시, 강조 효과 등 다양한 UI 디자인에서 유용하게 활용됩니다.