CSS의 border-left-color 속성은 요소 왼쪽 테두리의 색상을 변경하는 데 사용됩니다. 이 속성을 활용하면 전체 테두리가 아닌 왼쪽 테두리만 원하는 색으로 지정할 수 있어, 디자인에 포인트를 주고 싶을 때 매우 유용합니다.
border-left-color 속성 예제
아래 코드를 실행하면 border-left-color 속성이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다.
<html>
<head>
<style>
p.demo {
border:4px solid;
border-left-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
border-left-color 속성 사용 예제입니다.
</p>
</body>
</html>
위 예제에서는 4px 두께의 실선(solid) 테두리를 먼저 설정한 뒤, border-left-color:#FF0000;을 통해 왼쪽 테두리만 빨간색으로 지정했습니다.
주요 특징 정리
- 기본값: 별도로 지정하지 않으면 요소의 글자색(color) 속성 값이 자동으로 적용됩니다.
- 사용 가능한 색상 값: 색상 이름(red, blue 등), HEX 코드(#FF0000), RGB·RGBA 값, HSL 값 등 다양한 형식을 지원합니다.
- 적용 조건: border-style이 none 또는 hidden인 경우 테두리 자체가 보이지 않으므로, 반드시 먼저 테두리 스타일과 두께를 설정해야 합니다.
이처럼 border-left-color 속성은 간단하지만 강력한 도구로, 테두리의 특정 면만 강조하고 싶을 때 효과적으로 활용할 수 있습니다.