CSS의 outline-style 속성은 요소 주위를 둘러싸는 윤곽선(outline)의 선 스타일을 지정하는 데 사용됩니다. 윤곽선은 테두리(border)와 달리 요소의 레이아웃에 영향을 주지 않으면서 시각적으로 강조 효과를 낼 수 있어 유용합니다.
주요 선 스타일 값
outline-style 속성에는 다음과 같은 값들을 사용할 수 있습니다.
- solid — 실선으로 표시됩니다.
- dashed — 긴 파선(대시) 형태로 표시됩니다.
- dotted — 점선 형태로 표시됩니다.
- double — 이중선으로 표시됩니다.
- none — 윤곽선을 표시하지 않습니다.
예제
아래 코드를 실행하면 outline-style 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다. 각 문단마다 서로 다른 두께와 선 스타일의 윤곽선이 적용됩니다.
<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> 얇은 실선(solid) 윤곽선이 적용된 텍스트입니다. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;"> 굵은 파선(dashed) 윤곽선이 적용된 텍스트입니다. </p> <br /> <p style = "outline-width:5px; outline-style:dotted;"> 5px 점선(dotted) 윤곽선이 적용된 텍스트입니다. </p> </body> </html>
윤곽선을 화면에 표시하려면 outline-width와 outline-style을 함께 지정하는 것이 좋습니다. outline-style을 생략하면 기본값이 none이기 때문에 윤곽선이 나타나지 않습니다.