CSS에서 아웃라인(outline)과 테두리(border)는 비슷해 보이지만 중요한 차이점이 있습니다. 두 속성의 특징을 정확히 이해하면 상황에 맞게 활용할 수 있습니다.
아웃라인(Outline)의 특징
아웃라인은 공간을 차지하지 않으며, 설정 시 테두리 바깥쪽에 표시됩니다. 주로 요소를 강조(highlight)하는 용도로 사용되며, 테두리와 달리 개별 면(top, right, bottom, left)마다 아웃라인을 따로 지정할 수 없다는 점이 특징입니다.
테두리와 마찬가지로 아웃라인도 기본적으로는 표시되지 않습니다. 참고로 Firefox 등 일부 브라우저에서는 포커스를 받은 요소에 얇은 아웃라인이 자동으로 표시됩니다.
테두리(Border)의 특징
테두리는 아웃라인보다 훨씬 유연하게 커스터마이징할 수 있습니다. 각 면의 스타일을 개별적으로 지정할 수 있고, border-radius 속성으로 모서리를 둥글게 처리할 수도 있습니다.
다만 테두리는 실제 공간을 차지하기 때문에 요소의 크기 계산 방식(box-sizing)에 영향을 줍니다. 반면 아웃라인은 레이아웃에 전혀 영향을 주지 않는다는 점이 가장 큰 차이입니다.
문법(Syntax)
CSS에서 border와 outline 속성의 기본 문법은 다음과 같습니다.
Selector {
border: /*값*/
outline: /*값*/
}예제 1
다음 예제는 CSS의 outline과 border 속성을 비교해서 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex;
float: left;
margin: 20px;
padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
예제 2
이번에는 article 요소에 thick double 스타일의 아웃라인을 적용하고, 제목에는 inset 테두리를 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto;
width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
}
h3 {
border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
정리
레이아웃에 영향을 주지 않으면서 요소를 강조하고 싶다면 아웃라인을, 요소의 경계를 자유롭게 디자인하고 싶다면 테두리를 사용하는 것이 좋습니다. 두 속성의 차이를 이해하고 있으면 CSS 설계 시 훨씬 수월합니다.