반응형
Web Development · jQuery Mobile
jQuery Mobile —
data-role 기본 페이지 구조
page · header · content · footer 4개 data-role로 모바일 화면 만들기
시작 오늘 분석할 코드
jQuery Mobile에서 모바일 한 화면 = 1개의 page 단위로 만든다. data-role 4개로 page · header · content · footer를 정하면 jQuery Mobile이 자동으로 모바일 스타일을 입혀준다.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="page"> /* 한 화면 */ <div data-role="header"> /* 상단 바 */ <h1>머리말(header)영역</h1> </div> <div data-role="content"> /* 본문 영역 */ <p>내용(content)영역</p> </div> <div data-role="footer"> /* 하단 바 */ <h4>꼬리말(footer)영역</h4> </div> </div>
실제 출력 미리보기 (jQM 스타일 모형)
머리말 (header)영역
내용(content)영역
용어 용어 정리
jQuery Mobile모바일 웹 UI 프레임워크 (현재 EOL)
data-rolejQM이 인식하는 역할 표시 속성
page한 화면 단위
header / footer상단/하단 고정 바
content본문 영역
CDN파일을 외부 서버에서 가져오는 방식
viewport meta모바일 화면 크기 인식 필수 설정
data-* 속성HTML5의 사용자 정의 데이터 속성
1 jQuery Mobile은 무엇인가?
jQuery Mobile은 HTML에 data-role 속성만 적으면 자동으로 모바일 UI를 만들어주는 프레임워크다. 2010년대 초반 큰 인기를 얻었지만 2021년 공식 EOL 됐다.
※ 현재 신규 프로젝트에는 사용 비추천. 학습 목적이나 레거시 유지보수에는 의미 있지만, 새로 만든다면 React Native, Vue + Vant, 또는 그냥 모바일 반응형 웹이 표준.
2 data-role의 4가지 역할
| data-role | 역할 | 자동 처리 |
|---|---|---|
page |
한 화면 단위 | 전체 컨테이너 + 페이지 전환 효과 |
header |
상단 바 | 어두운 배경 + 가운데 정렬 제목 |
content |
본문 | 적절한 padding과 흰 배경 |
footer |
하단 바 | 어두운 배경 + 작은 글자 |
3 data-* 속성이란?
HTML5는 data-XXX라는 사용자 정의 속성을 허용한다. 표준 속성이 아니지만 JS·CSS에서 자유롭게 활용 가능. jQuery Mobile은 이걸 잘 활용한 사례.
<div data-role="page" ← jQM이 인식 data-title="페이지1" ← 페이지 제목 data-theme="b"> ← 테마 색 JS에서 접근: element.dataset.role // "page" element.dataset.title // "페이지1" CSS에서 접근: [data-role="page"] { ... }
4 jQM 페이지 구조의 의미
<body> <div data-role="page"> ← 한 화면 <div data-role="header"> ┐ <h1>…</h1> │ 모바일 앱처럼 </div> │ 위·중·아래 구분 <div data-role="content"> │ <p>…</p> │ </div> │ <div data-role="footer"> │ <h4>…</h4> │ </div> ┘ </div> </body>
※ 한 페이지에 여러 page를 넣을 수도 있다
<div data-role="page" id="page1"><div data-role="page" id="page2"><a href="#page2">링크로 페이지 전환- 이 경우 한 HTML 파일이 여러 화면을 포함 — multi-page
반응형
5 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| viewport meta 누락 | 모바일에서 화면 크기 이상 | <meta name="viewport"> 필수 |
| jQuery 로드 전에 jQM 로드 | JS 에러 | jQuery → jQM 순서 |
| data-role 없이 클래스만 | jQM 스타일 안 입혀짐 | 반드시 data-role 사용 |
| page div 밖에 콘텐츠 | 스타일 안 먹음 | page 안에만 콘텐츠 |
오타 data-role="hader" |
일반 div로 인식 | 철자 정확히 |
6 요즘은 어떻게?
jQuery Mobile (2021 EOL)
data-role 자동 스타일링. 학습 자료에는 아직 많이 등장.
현대식 대안
반응형 CSS (media query) + 시맨틱 태그. 또는 React + 모바일 UI 라이브러리.
핵심 한 줄 요약
jQuery Mobiledata-role로 모바일 UI 자동 생성 (2021 EOL)
data-rolepage · header · content · footer 4가지 기본
필수 의존jQuery + jQM CSS + jQM JS (CDN)
viewport meta모바일 화면 크기 인식 필수
data-* 속성HTML5 표준 — JS·CSS·프레임워크 자유 활용
Tags
#jQueryMobile #data-role #page #header #content #footer #jQM #모바일웹 #single-page #viewport #CDN #jQuery #data-속성 #HTML5 #모바일UI #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
jQueryMobile, data-role, page, header, content, footer, jQM, 모바일웹, single-page, viewport, CDN, jQuery, data-속성, HTML5, 모바일UI, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| jQuery Mobile — target="_blank" 새 창 링크 완전 정리 (0) | 2026.05.06 |
|---|---|
| jQuery Mobile — rel="external" 외부 페이지 새 로드 완전 정리 (0) | 2026.05.06 |
| jQuery Mobile — listview + 외부 앱 링크 완전 정리 (0) | 2026.05.06 |
| jQuery Mobile — data-transition 페이지 전환 효과 완전 정리 (0) | 2026.05.05 |
| jQuery Mobile — data-ajax="false" 외부 페이지 링크 완전 정리 (0) | 2026.05.05 |
댓글