반응형

반응형 디자인 유틸리티

브레이크포인트

Podo UI는 3가지 브레이크포인트를 제공합니다: PC, Tablet, Mobile. 각 디바이스에 최적화된 레이아웃을 쉽게 구성할 수 있습니다.

PC

1280px 이상

@include pc

Tablet

768px ~ 1279px

@include tb

Mobile

767px 이하

@include mo

SCSS 미디어 쿼리 믹스인

SCSS에서 미디어 쿼리 믹스인을 사용하여 반응형 스타일을 적용할 수 있습니다:

component.module.scss

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

.container {
  padding: s(8);
  font-size: 18px;

  // Tablet (768px ~ 1279px)
  @include tb {
    padding: s(6);
    font-size: 16px;
  }

  // Mobile (767px 이하)
  @include mo {
    padding: s(4);
    font-size: 14px;
  }

  // PC (1280px 이상)
  @include pc {
    max-width: 1200px;
    margin: 0 auto;
  }
}

반응형 숨김

특정 디바이스에서만 요소를 숨기는 클래스를 제공합니다:

HTML

<!-- 항상 숨김 -->
<div class="hide">항상 숨김</div>

<!-- PC에서만 숨김 -->
<div class="hide-pc">PC에서만 숨김</div>

<!-- Tablet에서만 숨김 -->
<div class="hide-tb">Tablet에서만 숨김</div>

<!-- Mobile에서만 숨김 -->
<div class="hide-mo">Mobile에서만 숨김</div>

실제 예제 (창 크기를 조절해보세요):

PC에서 숨김

Tablet에서 숨김

Mobile에서 숨김

반응형 그리드 예제

그리드 시스템은 자동으로 반응형으로 동작합니다:

HTML

<!-- PC: 12칸, Tablet: 6칸, Mobile: 4칸으로 자동 조정 -->
<section class="grid">
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
  <div class="w-3">25%</div>
</section>

실제 예제:

w-3 (25%)

반응형 타이포그래피

모든 타이포그래피 스타일은 자동으로 모바일에서 작아집니다:

예시

// display1
PC: 60px → Mobile: 36px

// display4
PC: 42px → Mobile: 24px

// h1
PC: 54px → Mobile: 24px

// p3
PC: 16px → Mobile: 14px

실제 예제:

H1 제목 (PC: 54px, Mobile: 24px)

P3 본문 (PC: 16px, Mobile: 14px)

모바일 최소 너비

모바일 디바이스의 최소 너비는 375px로 설정되어 있습니다.

device.scss

$min-mo: 375px;  // 최소 모바일 너비

실전 반응형 예제

실제 프로젝트에서 사용하는 반응형 레이아웃 예제:

component.module.scss

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

.header {
  padding: s(6);
  display: flex;
  justify-content: space-between;
  align-items: center;

  @include tb {
    padding: s(5);
  }

  @include mo {
    padding: s(4);
    flex-direction: column;
    gap: s(3);
  }
}

.nav {
  display: flex;
  gap: s(5);

  @include mo {
    flex-direction: column;
    gap: s(3);
    width: 100%;
  }
}

.card {
  padding: s(6);
  border-radius: r(4);

  @include tb {
    padding: s(5);
  }

  @include mo {
    padding: s(4);
    border-radius: r(3);
  }
}

.sidebar {
  width: 300px;

  @include tb {
    width: 250px;
  }

  @include mo {
    width: 100%;
  }
}

팁: 브라우저 개발자 도구의 반응형 모드를 사용하여 다양한 디바이스에서의 레이아웃을 테스트해보세요. Chrome: Ctrl/Cmd + Shift + M

현재 화면 크기 확인

현재: PC

1280px 이상

현재: Tablet

768px ~ 1279px

현재: Mobile

767px 이하