웹 페이지에서 요소 주위에 실선 형태의 윤곽선(outline)을 표시하고 싶다면, CSS의 outline-style 속성에 solid 값을 지정하면 됩니다.
윤곽선은 테두리(border)와 달리 요소의 레이아웃 공간에 영향을 주지 않으면서 요소 바깥쪽에 선을 그려주는 기능입니다. 아래 예제처럼 outline-width 속성으로 선의 두께를 함께 지정하면 더욱 완성도 높은 스타일을 만들 수 있습니다.
예제 코드
<html> <head> </head> <body> <p style = "outline-width:3px;outline-style:solid;"> This text is having 3px solid outline. </p> </body> </html>
코드 설명
위 코드에서는 인라인 스타일을 사용하여 문단(p 태그)에 두 가지 속성을 적용했습니다.
- outline-width: 3px — 윤곽선의 두께를 3픽셀로 지정합니다.
- outline-style: solid — 윤곽선을 끊김 없는 하나의 실선으로 표시합니다.
결과적으로 해당 텍스트 주변에 3px 두께의 검정색 실선 윤곽선이 나타납니다. 색상을 변경하고 싶다면 outline-color 속성을 추가로 사용할 수 있습니다.
참고 사항
윤곽선은 접근성 측면에서도 중요합니다. 특히 키보드로 요소에 포커스를 이동할 때 브라우저가 기본적으로 표시하는 포커스 링이 바로 윤곽선이기 때문에, 임의로 제거하기보다는 디자인에 맞게 커스터마이징하는 것이 좋습니다.