앱 셸
사이드바 + 상단바 + 본문 구조가 필요한 앱. 선택 사항입니다.
코드
<div class="jt-shell">
<aside class="jt-sidebar">
<a class="jt-nav-item" aria-current="page">품목 등록</a>
<a class="jt-nav-item">적재 최적화</a>
</aside>
<div>
<header class="jt-topbar">
<h1 class="jt-topbar-title">적재 최적화</h1>
<div class="jt-topbar-actions"><button class="jt-btn jt-btn-sm">저장</button></div>
</header>
<main class="jt-main">…</main>
</div>
</div>하지 말 것
- 구조는 강제가 아닙니다. 랜딩 페이지·단일 화면 도구·모바일 전용 앱은 이 골격을 쓰지 않아도 됩니다. 지켜야 하는 건 값 규칙(색·간격·타이포)입니다.
- 모바일에서 주요 메뉴를 상단에 두지 마세요 — 하단 탭바를 씁니다.
접근성
- 본문 맨 앞에 건너뛰기 링크를 두세요 —
<a class="jt-sr-only" href="#main">본문으로 건너뛰기</a> - 태블릿 이하에서 사이드바가 자동으로 접히고
data-open="true"로 드로어가 열립니다
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-sidebar-w(240px) --jt-topbar-h(56px)
.my-page .jt-shell { --jt-sidebar-w`(240px): …; }