CSS의 outline-color 속성은 요소 주위에 표시되는 윤곽선(outline)의 색상을 지정할 때 사용합니다. 이 속성의 값은 color나 border-color 속성과 마찬가지로 색상 이름, HEX 코드, RGB 값 등으로 지정할 수 있습니다.
outline-color 속성의 주요 값
- 색상 이름: red, blue, green처럼 정해진 색상 이름을 사용합니다.
- HEX 코드: #0000ff 형태의 16진수 색상 코드를 사용합니다.
- RGB 값: rgb(0, 0, 255) 형태로 빨강·초록·파랑의 비율을 지정합니다.
사용 시 주의사항
윤곽선은 기본적으로 화면에 나타나지 않으므로, outline-color만 단독으로 사용하면 효과가 없습니다. 반드시 outline-style(예: solid)과 함께 outline-width를 지정해야 윤곽선이 실제로 보입니다.
예제
다음 코드를 실행하면 파란색 실선 윤곽선이 적용된 문단을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;outline-color:blue"> This text is having thin solid blue outline. </p> <br /> </body> </html>
위 예제에서는 얇은(thin) 두께의 실선(solid) 스타일에 파란색(blue) 윤곽선을 적용했습니다. 필요에 따라 색상 값을 HEX 코드나 RGB 값으로 바꿔 다양한 윤곽선 색상을 연습해 볼 수 있습니다.