테두리

테두리 스타일과 방향을 제어하는 유틸리티 클래스입니다.

기본 사용법

HTML 요소에 테두리 클래스를 직접 적용할 수 있습니다:

HTML

<!-- 기본 테두리 -->
<div class="border">Border</div>

<!-- 방향별 테두리 -->
<div class="border-top">상단 테두리</div>
<div class="border-right">우측 테두리</div>
<div class="border-bottom">하단 테두리</div>
<div class="border-left">좌측 테두리</div>

<!-- 테두리 없음 -->
<div class="border-none">테두리 없음</div>

실제 예제:

전체 테두리

상단 테두리

우측 테두리

하단 테두리

좌측 테두리

SCSS에서 사용하기

SCSS 모듈에서 color() 함수를 사용하여 테두리 색상을 적용할 수 있습니다:

component.module.scss

@use 'podo-ui/mixin' as *;

.card {
  border: 1px solid color(border);
  border-radius: r(3);
  padding: s(5);
}

.divider {
  border-bottom: 1px solid color(border);
  margin: s(5) 0;
}

.customBorder {
  border: 2px solid color(primary);
  border-radius: r(4);
}

// 조건부 테두리
.item {
  &:not(:last-child) {
    border-bottom: 1px solid color(border);
  }
}

테두리 컬러

다양한 시맨틱 컬러를 테두리에 적용할 수 있습니다:

컬러 예제:

Primary

Success

Warning

Danger

SCSS

@use 'podo-ui/mixin' as *;

.primaryBorder {
  border: 2px solid color(primary);
}

.successBorder {
  border: 2px solid color(success);
}

.warningBorder {
  border: 2px solid color(warning);
}

.dangerBorder {
  border: 2px solid color(danger);
}

실제 사용 예제

테두리를 활용한 실제 UI 컴포넌트 예제:

카드 예제:

기본 카드

기본 테두리 스타일을 사용한 카드입니다.

Primary 카드

Primary 색상의 테두리를 사용한 카드입니다.