새 웹앱은 아래 두 줄로 시작해요. 휴대폰 크기 규칙, 아이폰 안전장치, 탭·버튼·카드 모양이 한 번에 들어가요. 화면 폭을 줄여 보면 휴대폰 단계로 바뀌는 걸 볼 수 있어요.

<link rel="stylesheet" href="https://titan-ui-cqu.pages.dev/v1/titan-ui.css">
<script src="https://titan-ui-cqu.pages.dev/v1/titan-ui.js"></script>

높이 48px(휴대폰 44px) 알약. 빛 번짐·반짝임 없음. 반복되는 보조 동작은 글자 링크.

메뉴 5개 이상은 밑줄 탭(맨 위 메뉴처럼). 2~4개 전환·필터는 칩.

페이지를 절반쯤 내리면 아래에서 올라와요. 지금 이 화면에서도 내려 보세요. 마지막 단계나 아래쪽을 계속 누르는 화면에서는 data-off로 꺼요.

휴대폰에서만 바꿀 자리는 <br class="m-br">, 붙어 있어야 하는 말은 <span class="nowrap">.

궁금한 점은 언제든
편하게 물어봐 주세요.

주소 끝에 ?preview를 붙이면 로그인·서버 없이 가짜 데이터로 화면을 띄워요. 휴대폰 점검과 디자인 확인용이고, 실제 데이터는 건드리지 않아요.

<script src="https://titan-ui-cqu.pages.dev/v1/titan-ui.js"></script>
<script>
  TitanUI.preview({
    whoAmI:   () => ({ name: '홍길동', team: '피플파트' }),
    getBooks: () => [{ title: '예시 책', status: '대여 가능' }]
  });
</script>
<!-- 이 두 줄은 앱 코드보다 먼저, 하이브리드 앱은 shim 다음에 -->