간격

간격 스케일 시스템

간격 시스템

Podo UI는 0부터 13까지 14단계의 여백 값을 제공합니다. 일관된 여백을 사용하여 시각적 리듬을 만들고 정돈된 레이아웃을 구성할 수 있습니다.

간격 값

사용 가능한 모든 간격 값입니다:

s(0)

s(1)

2px

s(2)

4px

s(3)

8px

s(4)

12px

s(5)

16px

s(6)

24px

s(7)

32px

s(8)

40px

s(9)

48px

s(10)

64px

s(11)

80px

s(12)

96px

s(13)

160px

SCSS에서 사용하기

SCSS 모듈에서 s() 함수를 사용하여 간격을 적용할 수 있습니다:

component.module.scss

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

.container {
  // 마진
  margin: s(4);           // 12px
  margin-top: s(5);       // 16px
  margin-bottom: s(6);    // 24px

  // 패딩
  padding: s(3) s(5);     // 8px 16px
  padding-left: s(4);     // 12px

  // 간격
  gap: s(3);              // 8px

  // 여러 속성에 사용
  border-width: s(1);     // 2px
  min-height: s(10);      // 64px
}

CSS 클래스로 사용하기

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

HTML

<!-- 마진 -->
<div class="m-4">Margin 12px</div>
<div class="m-t-5">Margin Top 16px</div>
<div class="m-b-6">Margin Bottom 24px</div>
<div class="m-l-4">Margin Left 12px</div>
<div class="m-r-4">Margin Right 12px</div>

<!-- 패딩 -->
<div class="p-4">Padding 12px</div>
<div class="p-t-5">Padding Top 16px</div>
<div class="p-b-6">Padding Bottom 24px</div>
<div class="p-l-4">Padding Left 12px</div>
<div class="p-r-4">Padding Right 12px</div>

실제 예제:

Padding 12px (p-4)

Padding 24px (p-6)

Padding 40px (p-8)

모서리 반경

Podo UI는 8가지 모서리 반경 값을 제공합니다. r() 함수를 사용합니다:

r(0)

r(1)

2px

r(2)

4px

r(3)

6px

r(4)

8px

r(5)

12px

r(6)

20px

r(full)

9999px

Border Radius SCSS 사용법

component.module.scss

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

.card {
  border-radius: r(4);    // 8px
}

.button {
  border-radius: r(2);    // 4px
}

.avatar {
  border-radius: r(full); // 9999px (원형)
}

.input {
  border-radius: r(3);    // 6px
}

.modal {
  border-radius: r(5);    // 12px
}

Border Radius CSS 클래스

HTML

<div class="r-0">No Radius</div>
<div class="r-2">Radius 4px</div>
<div class="r-4">Radius 8px</div>
<div class="r-full">Radius Full (${t('code.circular')})</div>

실제 예제:

r-0

r-2 (4px)

r-4 (8px)

r-6 (20px)

r-full

실전 예제

간격과 모서리 반경을 함께 사용한 카드 컴포넌트 예제:

component.module.scss

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

.card {
  padding: s(6);
  margin-bottom: s(5);
  border-radius: r(4);
  background: color(bg-modal);
  border: 1px solid color(default-outline);

  .cardHeader {
    margin-bottom: s(4);
    padding-bottom: s(3);
    border-bottom: 1px solid color(default-outline);
  }

  .cardTitle {
    @include display6;
    margin-bottom: s(2);
  }

  .cardContent {
    @include p3;
    line-height: 1.6;
  }

  .cardFooter {
    margin-top: s(5);
    padding-top: s(4);
    border-top: 1px solid color(default-outline);
    display: flex;
    gap: s(3);
  }
}

실제 렌더링:

카드 제목

이 카드는 s() 함수로 일관된 여백을 적용하고, r() 함수로 모서리를 둥글게 만들었습니다. 모든 간격이 디자인 시스템의 값을 따르고 있습니다.

팁: 일관된 간격 시스템을 사용하면 시각적으로 안정감 있는 레이아웃을 만들 수 있습니다. 임의의 픽셀 값 대신 항상 디자인 시스템의 값을 사용하세요.