Display & Visibility

Utilities for showing and hiding elements for responsive design.

Hide Classes

Selectively hide elements based on device size:

HTML

<!-- 모든 디바이스에서 숨김 -->
<div class="hide">항상 숨김</div>

<!-- PC에서만 숨김 (1280px 이상) -->
<div class="hide-pc">PC에서만 숨김</div>

<!-- Tablet에서만 숨김 (768px ~ 1279px) -->
<div class="hide-tb">Tablet에서만 숨김</div>

<!-- Mobile에서만 숨김 (767px 이하) -->
<div class="hide-mo">Mobile에서만 숨김</div>

Hide Examples (Try resizing your browser):

Hidden on PC only (1280px+)

Hidden on Tablet only (768-1279px)

Hidden on Mobile only (~767px)

Breakpoints

Podo UI uses 3 main breakpoints:

PC: 1280px and above
Tablet: 768px - 1279px
Mobile: 767px and below

Media Query Mixins

Mixins provided for applying responsive styles in SCSS:

component.module.scss

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

.container {
  padding: s(8);

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

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

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

.sidebar {
  display: block;

  @include mo {
    display: none; // 모바일에서 숨김
  }
}

.mobileMenu {
  display: none;

  @include mo {
    display: block; // 모바일에서만 표시
  }
}

Current Screen Size

Content displayed based on current browser size:

1280px and above

Tablet

768px - 1279px

Mobile

767px and below

Real World Examples

Practical examples for responsive design:

HTML

<!-- 데스크톱 네비게이션 -->
<nav class="hide-mo">
  <a href="/">홈</a>
  <a href="/about">소개</a>
  <a href="/contact">연락처</a>
</nav>

<!-- 모바일 햄버거 메뉴 -->
<button class="hide-pc hide-tb">
  <i class="icon-menu"></i>
</button>

<!-- 반응형 그리드 -->
<section class="grid">
  <div class="w-4 hide-mo">사이드바 (모바일에서 숨김)</div>
  <div class="w-8">메인 컨텐츠</div>
</section>