배경 & 입체감

배경 색상과 그림자를 사용하여 UI에 깊이감을 부여하는 유틸리티입니다.

배경 색상

다양한 레벨의 배경 색상으로 UI에 계층 구조를 표현할 수 있습니다:

SCSS

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

.container {
  background: color(bg-modal);
}

.card {
  background: color(bg-block);
}

.elevated {
  background: color(bg-elevation);
}

.elevated1 {
  background: color(bg-elevation-1);
}

.disabled {
  background: color(bg-disabled);
}

배경 색상 예제:

bg-modal모달 및 팝업

bg-block카드 및 블록

bg-elevation1단계 입체감

bg-elevation-12단계 입체감

입체감 레벨

배경 색상과 그림자를 조합하여 다양한 입체감을 표현할 수 있습니다:

입체감 예제:

레벨 0

기본 배경, 그림자 없음

레벨 1

가벼운 그림자와 배경

레벨 2

더 강한 그림자와 배경

그림자

box-shadow를 사용하여 요소에 깊이감을 추가할 수 있습니다:

SCSS

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

.card {
  background: color(bg-modal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.floatingButton {
  background: color(primary);
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);

  &:hover {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  }
}

그림자 예제:

Shadow 1

Shadow 2

Shadow 3

Shadow 4

실제 사용 예제

배경과 그림자를 활용한 실제 UI 컴포넌트 예제:

기본 카드

그림자 없는 기본 카드입니다.

그림자 카드

가벼운 그림자가 적용된 카드입니다.

입체감 카드

배경과 그림자가 모두 적용된 카드입니다.

Podo UI