CSS 테두리(Border)란 무엇인가?
CSS의 border 속성은 요소의 테두리를 정의하는 데 사용되는 속성입니다. border-width(두께), border-style(스타일), border-color(색상)를 하나로 묶어 지정할 수 있는 단축 속성(shorthand)입니다. 또한 상·하·좌·우 각 변을 개별적으로 스타일링할 수 있고, border-radius를 활용해 둥근 모서리 효과도 손쉽게 구현할 수 있습니다.
CSS 아웃라인(Outline)이란 무엇인가?
반면 outline 속성은 레이아웃 공간을 전혀 차지하지 않으며, 설정 시 요소의 테두리 바깥쪽에 그려집니다. outline-offset 속성을 사용하면 테두리와 아웃라인 사이의 간격을 자유롭게 조절할 수 있다는 점이 큰 특징입니다. 다만 border와 달리 특정 변에만 아웃라인을 따로 지정하는 것은 불가능합니다.
참고로 border와 outline은 기본값으로 모두 화면에 표시되지 않으므로, 반드시 스타일을 직접 지정해야 합니다.
Border와 Outline 핵심 차이점 비교
| 구분 | border | outline |
|---|---|---|
| 공간 점유 | 레이아웃 공간을 차지함 | 공간을 차지하지 않음 |
| 개별 변 설정 | 각 변별 지정 가능 | 변별 지정 불가 |
| 오프셋 지원 | 미지원 | outline-offset 지원 |
| 둥근 모서리 | border-radius 지정 가능 | 직접 지정 불가 |
기본 문법(Syntax)
CSS에서 border와 outline 속성의 기본 작성 문법은 다음과 같습니다.
Selector {
border: /*값*/
outline: /*값*/
}
예제 1: div 요소에 border와 outline 적용하기
다음 예제는 div 요소에 테두리와 아웃라인을 함께 적용한 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>
실행 결과
위 코드를 실행하면 초록색 실선 테두리 안쪽에 둥근 모서리가 적용되고, 그 바깥으로 보라빛(fuchsia) 능선(ridge) 스타일의 아웃라인이 나타납니다.
예제 2: p 요소에 dashed 테두리와 inset 아웃라인 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>
실행 결과
이번 예제에서는 초록색 굵은 점선(dashed) 테두리와 그 바깥쪽에 오목하게 들어간 듯한(inset) 보라색 아웃라인이 함께 표현됩니다.
마무리 정리
border는 요소의 실제 레이아웃에 영향을 주며 세밀한 변별 제어가 가능한 반면, outline은 레이아웃에 영향 없이 요소 외곽을 강조하는 용도에 적합합니다. 포커스 표시나 강조 효과에는 outline을, 디자인 구분선에는 border를 활용하면 각 속성의 장점을 최대한 살릴 수 있습니다.