outline-style 속성은 HTML 요소 주위를 둘러싸는 외곽선(outline)의 스타일을 지정하는 CSS 속성입니다. 테두리(border)와 비슷하지만, 외곽선은 요소의 크기나 레이아웃에 영향을 주지 않고 요소 바깥쪽에 그려진다는 점이 다릅니다.
이 속성에는 다음과 같은 값들을 사용할 수 있습니다.
- none – 외곽선을 표시하지 않습니다. (outline-width: 0; 과 동일)
- solid – 하나의 실선으로 외곽선을 그립니다.
- dotted – 점선(점들이 이어진 형태)으로 외곽선을 그립니다.
- dashed – 짧은 선들이 반복되는 파선 형태로 외곽선을 그립니다.
- double – 두 줄의 실선으로 외곽선을 그립니다.
- groove – 페이지에 홈이 파인 것처럼 보이는 입체적인 외곽선입니다.
- ridge – groove와 반대로 볼록하게 솟아 보이는 외곽선입니다.
- inset – 요소가 페이지 안쪽으로 파묻힌 것처럼 보이게 합니다.
- outset – 요소가 화면 밖으로 튀어나온 것처럼 보이게 합니다.
- hidden – none과 동일하게 외곽선을 숨깁니다.
예제 코드
아래 코드를 실행하면 outline-style 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> This text is having thin solid outline. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;"> This text is having thick dashed outline. </p> <br /> <p style = "outline-width:5px;outline-style:dotted;"> This text is having 5x dotted outline. </p> </body> </html>
예제 설명
첫 번째 문단은 thin(얇은) 두께의 solid(실선) 외곽선이 적용됩니다. 두 번째 문단은 thick(두꺼운) 두께의 dashed(파선) 외곽선이, 세 번째 문단은 5px 두께의 dotted(점선) 외곽선이 각각 표시됩니다.
참고로 outline-style은 단독으로 사용해도 되지만, 일반적으로 outline-width, outline-color와 함께 사용하거나 축약형 속성인 outline을 활용하면 더욱 편리합니다. 예를 들어 outline: 5px dotted red;처럼 한 줄로 두께, 스타일, 색상을 모두 지정할 수 있습니다.