표시와 가시성 (Display)
v1의 hide, hide-pc, hide-tb, hide-mo를 유지해 화면 구간별로 요소를 숨길 수 있어요. 숨김 규칙은 레이아웃 그리드와 같은 1280px·768px 경계를 사용합니다.
가시성 클래스
hide는 모든 화면에서 숨기고, 접미사가 있는 클래스는 해당 화면 구간에서만 display: none !important를 적용합니다. 접근성 트리에서도 제거되므로 시각적으로만 감출 콘텐츠에는 사용하지 마세요.
| Class | Hidden range | Rule |
|---|---|---|
.hide | 모든 화면 | display: none !important |
.hide-pc | 1280px 이상 | PC에서 숨김 |
.hide-tb | 768px–1279px | Tablet에서 숨김 |
.hide-mo | 767px 이하 | Mobile에서 숨김 |
현재 화면 예제
아래 세 항목 중 현재 화면 구간에 해당하는 하나만 숨겨집니다. 브라우저 폭을 바꾸어 규칙을 확인할 수 있어요.
사용 예제
<link rel="stylesheet" href="/assets/podo-ui/styles.css" />
<div class="hide-mo utility-card">Desktop navigation</div>