CSS의 border-left-width 속성은 요소 왼쪽 테두리의 두께를 개별적으로 지정할 때 사용합니다. 전체 테두리가 아닌 왼쪽 면만 두께를 다르게 설정해야 하는 경우에 유용하게 활용됩니다.
border-left-width 속성의 기본 원리
이 속성은 단독으로 사용할 경우 화면에 아무 변화도 나타나지 않습니다. 테두리의 스타일(border-style)이 지정되어 있어야 두께가 시각적으로 표시되기 때문입니다. 따라서 실무에서는 반드시 border-style: solid;처럼 스타일 값을 함께 설정해 주어야 합니다.
사용 예제
다음 코드는 왼쪽 테두리의 두께를 6px로 지정하는 간단한 예제입니다.
<html> <head> </head> <body> <p style = "border-left-width:6px;border-style:solid;"> This is demo content. </p> </body> </html>
위 코드를 실행하면 문단의 왼쪽에만 6px 두께의 실선 테두리가 표시되는 것을 확인할 수 있습니다.
지정할 수 있는 값
border-left-width 속성에는 아래와 같은 값들을 사용할 수 있습니다.
- thin — 얇은 테두리 (일반적으로 1px)
- medium — 중간 두께의 테두리 (기본값, 일반적으로 3px)
- thick — 두꺼운 테두리 (일반적으로 5px)
- 길이 값 — px, em, rem 등 직접 수치를 지정 (예:
6px,0.5em)
활용 팁
네 방향의 테두리 두께를 한 번에 다르게 설정하고 싶다면 축약 속성인 border-width: 상 우 하 좌; 형식을 사용하거나, border-left 축약 속성으로 두께·스타일·색상을 한 줄에서 처리하는 것도 좋은 방법입니다.