웹 요소를 디자인하다 보면 요소 주위에 외곽선을 표시해야 할 때가 있습니다. 예를 들어 강조하고 싶은 박스가 있다면, 색상이 있는 외곽선을 추가해 방문자의 시선을 끌 수 있겠죠.
바로 이럴 때 CSS outline(아웃라인) 속성이 유용합니다. outline 속성을 사용하면 요소의 테두리(border) 바깥쪽에 선을 추가하여 해당 요소를 웹 페이지에서 돋보이게 만들 수 있습니다.
이 글에서는 예제와 함께 아웃라인의 기본 개념과 CSS outline 속성으로 웹 요소 바깥에 선을 그리는 방법까지 자세히 살펴보겠습니다.
CSS 아웃라인이란?
아웃라인(outline)은 요소의 테두리 바깥쪽에 그려지는 선입니다. 가장 흔한 활용 사례는 HTML 요소를 강조하는 것입니다.
다음 그림은 CSS에서 아웃라인이 어떻게 적용되는지 보여줍니다.
그림에서 확인할 수 있듯이, 아웃라인은 콘텐츠와 테두리 모두의 바깥에 위치합니다. 즉, 아웃라인은 웹 요소의 가장 바깥쪽 레이어라고 할 수 있습니다.
테두리(Border)와 아웃라인(Outline)의 차이점
CSS에서 테두리와 아웃라인에는 몇 가지 중요한 차이가 있습니다.
첫째, 앞서 언급했듯이 아웃라인은 테두리와 달리 요소의 바깥쪽에 그려집니다. 따라서 아웃라인이 페이지의 다른 콘텐츠와 겹칠 수도 있습니다. 하지만 아웃라인은 공간을 차지하지 않기 때문에, 겹치는 경우를 제외하면 주변 요소에는 어떠한 영향도 미치지 않습니다.
둘째, 아웃라인은 요소의 크기(dimension)에 포함되지 않습니다. 지정한 아웃라인은 요소의 너비(width)와 높이(height) 값에 전혀 영향을 주지 않습니다.
셋째, 테두리와 달리 아웃라인은 각 변마다 다른 두께, 색상, 스타일을 적용할 수 없습니다. 따라서 요소 주위에 지정한 아웃라인은 모든 면에서 동일하게 나타납니다.
CSS 테두리에 대해 더 알고 싶다면 CSS border 관련 가이드를 참고하세요.
CSS outline 속성 사용법
outline 속성은 웹 페이지의 요소에 아웃라인을 추가할 때 사용합니다.
outline 속성은 세 가지 하위 속성의 축약형(shorthand)이며, 이 하위 속성들을 통해 아웃라인의 모양을 세부적으로 조정할 수 있습니다.
- outline-color: 아웃라인의 색상을 설정합니다.
- outline-style: 아웃라인의 스타일을 설정합니다.
- outline-width: 아웃라인의 두께를 설정합니다.
outline 속성의 기본 문법은 다음과 같습니다.
outline: outline-color outline-style outline-width;
outline 속성에 지정하는 값들은 특정 순서를 따르지 않아도 됩니다.
간단한 예제로 outline 속성의 동작 방식을 살펴보겠습니다. 'This is a box'라는 텍스트가 담긴 박스 주위에 아웃라인을 만든다고 가정해 봅시다. 아웃라인의 조건은 다음과 같습니다.
- 색상은 빨간색(red)
- 두께는 3px
- 스타일은 점선(dotted)
또한 박스에는 1px 두께의 검은색 실선 테두리를 적용하고 싶습니다. 다음 코드로 이 아웃라인과 테두리를 만들 수 있습니다.
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline: red dotted 3px;
}
</style>
이 코드에서는 빨간색으로 표시되는 아웃라인과 검은색으로 표시되는 테두리를 함께 선언했습니다. 테두리는 1px 두께의 실선(solid)이고, 아웃라인은 빨간색 3px 두께의 점선(dotted)입니다. 박스의 너비도 100px로 설정했습니다.
결과를 보면 아웃라인이 테두리 바깥쪽에 나타나는 것을 확인할 수 있습니다.
CSS outline 하위 속성 살펴보기
앞서 말씀드린 것처럼 outline 속성은 여러 하위 속성의 축약형입니다. 각 하위 속성이 어떻게 동작하는지 하나씩 자세히 알아보겠습니다.
outline-width – 아웃라인 두께
outline-width 속성은 웹 요소에 적용되는 아웃라인의 두께를 지정합니다. 다음 값 중 하나를 사용할 수 있습니다.
thin(기본값 1px)medium(기본값 3px)thick(기본값 5px)- px, pt, cm, em, rem 등 CSS 길이 단위로 지정한 크기
예를 들어 3px(medium) 두께의 파란색 실선 아웃라인을 가진 박스를 디자인하고, 1px 너비의 검은색 실선 테두리도 함께 적용한다고 해봅시다. 다음 코드로 만들 수 있습니다.
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
</style>
이 예제를 하나씩 분석해 보겠습니다. CSS 코드에서 먼저 박스의 너비를 100px로 설정하고, 박스 주위에 1px 너비의 검은색 실선 테두리를 정의했습니다.
그다음 세 개의 하위 속성으로 아웃라인을 정의했습니다.
outline-style 속성은 아웃라인의 스타일을 설정하며, 여기서는 실선(solid)입니다. outline-color 속성은 아웃라인의 색상을 설정하며, 이 예제에서는 빨간색입니다. (outline-style과 outline-color에 대해서는 뒤에서 더 자세히 다룹니다.)
마지막으로 outline-width 속성으로 아웃라인의 두께를 설정했으며, 값을 medium(기본값 3px)으로 지정했습니다.
결과적으로 박스에는 3px 너비의 빨간색 아웃라인이 적용됩니다.
outline-color – 아웃라인 색상
outline-color 속성은 특정 웹 요소에 지정된 아웃라인의 색상을 설정합니다. 이 속성은 다음과 같은 CSS 색상 표기법을 지원합니다.
- name(색상 이름):
blue,pink처럼 색상 이름으로 지정 - hex(16진수):
#f7f7f7형태의 16진수 색상 코드 - rgb:
rgb(102, 211, 56)형태의 RGB 값 - invert: 아웃라인의 색상을 반전시킵니다.
- hsl:
hsl(0, 25%, 50%)형태의 HSL 값
박스 주위에 파란색 아웃라인을 만든다고 가정해 봅시다. 아웃라인은 3px 두께의 실선(solid) 스타일이어야 합니다. 다음 코드로 이러한 아웃라인을 가진 박스를 만들 수 있습니다.
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline-style: solid;
outline-color: blue;
outline-width: medium;
}
</style>
이 예제에서는 outline-color 속성으로 아웃라인 색상을 파란색(blue)으로 설정했습니다. 또한 outline-style 속성으로 스타일을 실선(solid)으로, outline-width 속성으로 두께를 3px(즉 medium)으로 지정했습니다.
코드에서는 박스의 너비를 100px로 만들고, 1px 검은색 실선 테두리를 추가해 아웃라인을 더 잘 보이게 했습니다.
outline-style – 아웃라인 스타일
outline-style 속성은 아웃라인의 스타일을 설정합니다. 이 속성이 받을 수 있는 값은 다음과 같습니다.
- dotted (점선)
- dashed (파선)
- groove (홈 모양)
- ridge (융기 모양)
- solid (실선)
- double (이중선)
- inset (안쪽 음영)
- outset (바깥쪽 음영)
- none (없음)
- hidden (숨김)
즉, ridge 값은 융기된 느낌의 아웃라인을, inset 값은 안으로 파인 느낌의 아웃라인을, groove 값은 홈이 파인 느낌의 아웃라인을 만듭니다. 이러한 스타일들이 실제로 어떻게 보이는지 확인하기 위해, 박스를 만들고 각 아웃라인 스타일을 하나씩 적용해 보겠습니다.
먼저 박스의 기본 코드입니다.
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 300px;
border: black solid 1px;
outline-color: blue;
outline-width: medium;
}
</style>
이 코드는 3px 너비(medium 값)의 파란색 아웃라인을 가진 박스를 생성합니다. 박스에는 1px 너비의 검은색 실선 테두리가 적용되어 있습니다.
박스의 스타일을 지정하려면 outline-style 속성을 사용해야 합니다. 예를 들어 dotted(점선) 스타일의 아웃라인을 적용하고 싶다면 다음과 같은 CSS를 사용하면 됩니다.
<style>
.outlineExample {
outline-style: dotted;
}
</style>
다음 그림은 outline-style 속성에 허용되는 모든 값을 적용했을 때의 결과를 보여줍니다.
outline-offset – 아웃라인 간격 조절
outline-offset 속성은 아웃라인과 요소의 테두리 사이에 공간을 추가합니다.
outline-offset 속성으로 정의되는 아웃라인과 테두리 사이의 공간은 투명합니다. 또한 outline-offset은 독립적인 속성이므로 outline 축약형 안에서는 사용할 수 없다는 점에 유의하세요.
1px 너비의 검은색 실선 테두리와 2px 너비의 빨간색 실선 아웃라인을 가진 박스를 디자인한다고 해봅시다. 아웃라인은 테두리 바깥 가장자리에서 10px만큼 떨어져 있어야 합니다. 다음 코드로 이러한 스타일의 박스를 만들 수 있습니다.
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 200px;
border: black solid 1px;
outline: red 2px solid;
outline-offset: 10px;
}
</style>
이 예제에서는 너비 200px, 1px 너비의 검은색 실선 테두리, 2px 너비의 빨간색 실선 아웃라인을 가진 박스를 정의했습니다. 아웃라인이 10px만큼 오프셋(offset)되어 있으므로, 테두리의 각 가장자리와 아웃라인 사이에 10px의 간격이 생깁니다.
마무리
CSS outline 속성은 웹 요소의 테두리 바깥쪽에 아웃라인을 정의할 때 사용합니다.
outline 속성은 커스텀 아웃라인을 만드는 데 쓰이는 세 가지 하위 속성, 즉 outline-color, outline-width, outline-style의 축약형입니다. 또한 outline-offset 속성을 사용하면 아웃라인과 요소의 테두리 사이에 간격을 추가할 수 있습니다.
이 글에서는 예제를 통해 CSS에서 아웃라인의 기본 개념, outline 속성과 하위 속성들의 사용법, 그리고 outline-offset 속성의 활용 방법까지 살펴보았습니다. 이제 여러분도 CSS 전문가처럼 아웃라인을 디자인할 준비가 되었습니다!