CSS로 왼쪽 테두리 스타일 변경하기
CSS의 border-left-style 속성은 요소의 왼쪽 테두리 선 모양을 지정하는 데 사용됩니다. 이 속성을 활용하면 전체 테두리가 아닌 왼쪽 테두리만 개별적으로 스타일링할 수 있어, 인용구 강조나 콘텐츠 구분선 디자인에 유용하게 활용됩니다.
주요 속성값
- solid – 실선 테두리
- dashed – 파선(대시) 테두리
- dotted – 점선 테두리
- double – 이중선 테두리
- groove / ridge / inset / outset – 입체적인 3D 효과 테두리
- none / hidden – 테두리를 표시하지 않음
예제 코드
아래 예제는 border-left-style 속성을 적용하여 왼쪽 테두리를 실선(solid)으로 표시하는 방법을 보여줍니다.
<html> <head> </head> <body> <p style = "border-width:3px; border-left-style:solid;"> 왼쪽 테두리 예제 </p> </body> </html>
실행 결과
위 코드를 실행하면 문단의 왼쪽에 두께 3px의 실선 테두리가 나타납니다. 참고로 border-left-style만 단독으로 사용할 경우 일부 브라우저에서 기본 테두리 두께가 적용되므로, 위 예제처럼 border-width 속성을 함께 지정하면 원하는 두께의 테두리를 정확하게 표현할 수 있습니다.