CSS의 outline-width 속성은 요소 외곽선(outline)의 두께를 지정하는 데 사용됩니다. 값으로는 px, em 등의 길이 단위를 직접 입력하거나, thin(얇게), medium(보통), thick(두껍게)이라는 키워드 중 하나를 사용할 수 있습니다. 이는 border-width 속성과 매우 유사한 방식으로 동작합니다.
outline-width 속성의 주요 특징
- outline-style 필수: outline-width만 단독으로 지정하면 외곽선이 화면에 나타나지 않습니다. 반드시
outline-style속성(solid, dashed, dotted 등)을 함께 설정해야 합니다. - 레이아웃 영향 없음: 외곽선은 테두리(border)와 달리 요소의 크기나 배치에 영향을 주지 않고 요소 바깥에 그려집니다.
- 기본값: 별도로 지정하지 않으면 기본값인
medium이 적용됩니다.
사용 가능한 값
thin– 얇은 외곽선 (일반적으로 1px)medium– 보통 두께의 외곽선 (일반적으로 3px)thick– 두꺼운 외곽선 (일반적으로 5px)<length>– px, em, rem 등 원하는 단위로 세밀하게 조절
예제 코드
아래 예제는 thin, thick 키워드와 픽셀 값을 각각 사용해 외곽선 두께를 다르게 적용한 모습입니다.
<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> This text is having thin outline. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;"> This text is having thick outline. </p> <br /> <p style = "outline-width:5px; outline-style:dotted;"> This text is having 5px outline. </p> </body> </html>
예제 설명
- 첫 번째 문단은
solid스타일의 얇은(thin) 외곽선이 적용됩니다. - 두 번째 문단은
dashed스타일의 두꺼운(thick) 외곽선이 적용됩니다. - 세 번째 문단은
dotted스타일에 5px 두께의 외곽선이 적용되어, 길이 단위로도 두께를 자유롭게 조절할 수 있음을 보여줍니다.
이처럼 outline-width 속성을 활용하면 포커스 강조, 접근성 향상 등 다양한 목적으로 요소의 외곽선 두께를 손쉽게 제어할 수 있습니다.