[CSS] 특정 테두리의 너비를 설정{border-방향-width: value}

border-방향-width 속성은 요소의 테두리 너비를 설정하는 데 사용됩니다.

top, bottom, left, right (상, 하, 좌, 우) 테두리의 두께 또는 너비를 제어할 수 있습니다.

border-방향-width 사용 구문은 다음과 같습니다.

selector {
  border-top-width: value;
  border-bottom-width: value;
  border-left-width: value;
  border-right-width: value;
}

selector : 테두리 너비를 적용할 HTML 요소를 나타냅니다.
value : 테두리의 원하는 너비를 나타냅니다. 픽셀(px), ems(em), rem(rem), 백분율(%) 등과 같은 다양한 단위로 지정할 수 있습니다.

 

예1) 왼쪽 테두리의 고정 너비를 설정

div {
  border-left-width: 2px;
}

이렇게 하면 모든 div 요소의 왼쪽 테두리에 2픽셀 너비가 적용됩니다.

 

예2) 반응형 디자인에 백분율 사용

.header {
  border-left-width: 5%;
}

클래스 헤더가 있는 요소의 왼쪽 테두리 너비가 부모 컨테이너 너비의 5%로 설정됩니다. 백분율을 사용하면 테두리가 컨테이너 크기에 비례하여 크기가 조정되어 반응형 레이아웃에 유용합니다.

 

예3) 다른 테두리 속성과 결합

.button {
  border-style: solid;
  border-color: #007bff;
  border-left-width: 3px;
}

이 예에서 border-style 속성은 solid로 설정되고 border-color 속성은 #007bff(파란색 음영)로 설정됩니다. border-left-width는 3픽셀로 설정됩니다. 즉, 클래스 버튼이 있는 요소의 왼쪽 테두리에는 너비가 3픽셀인 파란색 실선이 표시됩니다.

border-style 및 border-color와 같은 다른 테두리 관련 속성과 함께 border-방향-width를 사용하여 요소의 테두리 모양을 완전히 사용자 지정할 수 있습니다. 이를 통해 웹 페이지 요소의 시각적 표시를 더 잘 제어할 수 있으며 다양한 웹 디자인에서 테두리, 구분선 또는 콜아웃 요소를 만드는 데 일반적으로 사용됩니다.