표시 & 가시성

반응형 디자인을 위한 요소 표시 및 숨김 유틸리티입니다.

숨김 클래스

디바이스 크기에 따라 요소를 선택적으로 숨길 수 있습니다:

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>

숨김 예제 (브라우저 크기를 조절해보세요):

PC에서만 숨김 (1280px+)

Tablet에서만 숨김 (768-1279px)

Mobile에서만 숨김 (~767px)

중단점

Podo UI는 3가지 주요 중단점을 사용합니다:

PC: 1280px 이상
Tablet: 768px - 1279px
Mobile: 767px 이하

미디어 쿼리 믹스인

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; // 모바일에서만 표시
  }
}

현재 화면 크기

현재 브라우저 크기에 따라 표시되는 내용:

1280px 이상

Tablet

768px - 1279px

Mobile

767px 이하

실제 사용 예제

반응형 디자인을 위한 실제 활용 예제:

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>