CSS의 outline 속성은 단축(shorthand) 속성입니다. 이 속성을 사용하면 여러 개의 개별 속성을 따로 선언할 필요 없이, 하나의 문장에서 윤곽선(outline)의 너비(width), 선 스타일(line style), 색상(color)을 모두 지정할 수 있습니다.
outline 속성의 기본 문법
outline 단축 속성은 다음과 같은 순서로 값을 작성합니다.
outline: [너비] [스타일] [색상];
예를 들어 outline: thin solid green;처럼 작성하면, 얇은(thin) 실선(solid) 초록색(green) 윤곽선이 요소 주위에 그려집니다.
사용 가능한 주요 값
1. 너비 (width)
thin— 얇은 윤곽선medium— 중간 두께의 윤곽선 (기본값)thick— 두꺼운 윤곽선px,em등 — 직접 수치로 지정
2. 선 스타일 (line style)
solid— 실선dashed— 파선(대시선)dotted— 점선double— 이중선none— 윤곽선 없음
3. 색상 (color)
- 색상 이름:
green,red등 - HEX 코드:
#009900 - RGB/RGBA 값:
rgb(0, 153, 0)
예제
아래 예제는 두 개의 문단에 서로 다른 윤곽선을 적용한 코드입니다.
<html> <head> </head> <body> <p style = "outline:thin solid green;"> 이 텍스트는 얇은 실선 초록색 윤곽선이 적용되어 있습니다. </p> <br /> <p style = "outline:thick dashed #009900;"> 이 텍스트는 두꺼운 파선 녹색 윤곽선이 적용되어 있습니다. </p> <br /> </body> </html>
실행 결과 설명
- 첫 번째 문단에는
thin solid green값이 적용되어, 얇고 연속된 실선의 초록색 윤곽선이 표시됩니다. - 두 번째 문단에는
thick dashed #009900값이 적용되어, 더 두껍고 끊긴 파선 형태의 진한 녹색(#009900) 윤곽선이 표시됩니다.
참고 사항
윤곽선(outline)은 테두리(border)와 비슷해 보이지만 몇 가지 중요한 차이가 있습니다.
- 윤곽선은 요소의 레이아웃 공간을 차지하지 않으므로, 요소의 크기나 위치에 영향을 주지 않습니다.
- 윤곽선은 항상 요소의 네 면 모두에 동일하게 적용되며, 특정 면만 따로 설정할 수 없습니다.
- 주로 키보드 포커스 표시 등 접근성(a11y) 목적으로 활용됩니다.
이처럼 outline 단축 속성을 활용하면 코드를 간결하게 유지하면서도 윤곽선의 세부 스타일을 손쉽게 제어할 수 있습니다.