CSS를 활용해 목록에 파란색 왼쪽 테두리 추가하기

CSS에서 border-left 속성을 사용하면 ul 목록 요소의 왼쪽에 손쉽게 파란색 테두리를 추가할 수 있습니다. 아래 예제 코드를 실행하여 직접 결과를 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        border-left: 3px solid blue;
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <p>국가 목록</p>
    <ul>
      <li>인도</li>
      <li>미국</li>
      <li>호주</li>
    </ul>
  </body>
</html>

실행 결과

코드 설명

border-left: 3px solid blue; — 목록의 왼쪽에 두께 3px의 파란색 실선 테두리를 적용합니다.
background-color — 연한 회색 배경을 지정해 테두리와의 시각적 대비를 높입니다.

border-left 속성은 이처럼 인용구나 강조 목록을 꾸밀 때 널리 활용됩니다. 테두리의 두께, 스타일(solid, dashed, dotted 등), 색상을 자유롭게 조합하여 원하는 디자인을 만들 수 있습니다.