HTML 요소의 윤곽선(outline)을 두 겹의 실선, 즉 이중 선(double) 스타일로 지정하려면 CSS의 outline-style 속성에 double 값을 사용합니다.
이중 윤곽선은 요소 바깥쪽에 두 개의 평행한 실선을 그려주는 스타일입니다. 강조하고 싶은 문단이나 콘텐츠 영역을 시각적으로 돋보이게 만들 때 유용하게 활용할 수 있습니다. 이때 선의 굵기는 outline-width 속성으로 함께 지정해 주면 원하는 두께의 이중 선을 구현할 수 있습니다.
예제 코드
<html> <head> </head> <body> <p style = "outline-width:7px;outline-style:double;"> This text is having 7px double outline. </p> </body> </html>
코드 설명
outline-width: 7px;— 윤곽선의 두께를 7픽셀로 지정합니다.outline-style: double;— 윤곽선을 두 개의 실선(이중 선)으로 렌더링합니다.
위 코드를 실행하면 해당 <p> 요소 주위에 7px 두께의 이중 실선 윤곽선이 나타납니다.
참고 사항
윤곽선(outline)은 테두리(border)와 달리 레이아웃 공간을 차지하지 않고 요소 외부에 그려진다는 점이 특징입니다. 또한 outline-style 속성에는 double 외에도 solid(실선), dashed(파선), dotted(점선), groove, ridge, inset, outset 등 다양한 값을 사용할 수 있으니 상황에 맞게 활용해 보세요.