CSS의 outline(외곽선) 속성은 요소 주위에 그려지는 선을 지정하는 단축(shorthand) 속성입니다. 하나의 선언만으로 외곽선의 색상(color), 스타일(style), 두께(width) 등 여러 하위 속성 값을 한 번에 설정할 수 있어 코드를 간결하게 유지할 수 있습니다.
outline 속성의 기본 문법
outline 속성은 아래와 같은 순서로 값을 나열하여 사용합니다.
outline: [두께] [스타일] [색상];
각 값은 공백으로 구분되며, 스타일 값(style)은 반드시 지정해야 외곽선이 화면에 표시됩니다.
outline을 구성하는 하위 속성
- outline-width: 외곽선의 두께를 지정합니다.
thin,medium,thick키워드 또는 px 단위 값을 사용할 수 있습니다. - outline-style: 외곽선의 모양을 지정합니다.
none,solid,dashed,dotted,double,groove,ridge,inset,outset등이 있습니다. - outline-color: 외곽선의 색상을 지정합니다. 색상 이름, HEX 코드(#009900), RGB/RGBA 값 등을 사용할 수 있습니다.
실전 예제
아래 예제는 서로 다른 두께, 스타일, 색상의 외곽선을 적용하는 방법을 보여줍니다.
<html>
<head>
</head>
<body>
<p style="outline: thin solid green;">
이 텍스트에는 얇은 실선(solid) 녹색 외곽선이 적용됩니다.
</p>
<br />
<p style="outline: thick dashed #009900;">
이 텍스트에는 굵은 점선(dashed) 녹색 외곽선이 적용됩니다.
</p>
</body>
</html>
첫 번째 문단에는 thin solid green이 적용되어 얇고 연속적인 녹색 선이 나타나고, 두 번째 문단에는 thick dashed #009900이 적용되어 더 굵고 끊긴 형태의 녹색 선이 그려집니다.
border와 outline의 차이점
outline은 border(테두리)와 비슷해 보이지만 다음과 같은 중요한 차이가 있습니다.
- 레이아웃에 영향 없음: outline은 요소의 크기나 위치에 영향을 주지 않으며, 레이아웃 공간을 차지하지 않습니다.
- 방향별 개별 설정 불가: border는 top, right, bottom, left를 각각 조절할 수 있지만, outline은 항상 요소 전체를 둘러싸는 형태로만 그려집니다.
- 접근성 활용: outline은 키보드로 요소에 포커스가 이동했을 때 시각적 표시를 제공하는 데 널리 사용됩니다.
정리
outline 속성은 두께, 스타일, 색상을 한 줄로 지정할 수 있는 편리한 단축 속성입니다. 레이아웃에 영향을 주지 않으면서 요소를 강조해야 할 때, 특히 포커스 스타일링이나 임시 강조 효과가 필요할 때 border 대신 outline을 활용하면 효과적입니다.