jQuery Mobile bar/body — ui-bar, ui-body 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile bar / body —
ui-bar · ui-body 완전 정리

컨텐츠 영역에 시각적 구분 박스를 만드는 클래스

시작 오늘 분석할 코드

일반 div에 ui-bar·ui-body 클래스만 붙이면 jQuery Mobile이 자동으로 박스 스타일을 입혀준다. data-role을 쓰지 않고 클래스만으로 디자인을 적용하는 방식이다.

<div data-role="content"> <div class="ui-bar ui-bar-b">꽃나무</div><br/> <div class="ui-body ui-body-a"> <h3>진달래</h3> <p>참꽃 또는 두견화라고도 하며…</p> </div><br/> <div class="ui-body ui-body-a"> <h3>개나리</h3> <p>연교•신리화라고도 하며…</p> </div> </div>

실제 출력 미리보기

header 영역

꽃나무

진달래

참꽃 또는 두견화라고도 하며 전국의 50~2,000m 높이의 산야에서 무리지어 자란다.

개나리

연교·신리화라고도 하며, 북한에서는 개나리꽃나무라고 부른다. 산기슭 양지에서 많이 자란다.

footer 영역

---

용어 핵심 키워드

ui-bar제목 띠 — 진한 배경의 가는 가로 막대

ui-body내용 박스 — 패딩과 테두리가 있는 카드

-a ~ -e테마 스와치 — 색상 변형 (a=흰, b=검 ...)

data-role 없음클래스만으로 디자인 적용 — 위젯 변환 없음

---

1 ui-bar — 제목 띠

ui-bar는 가로로 길게 깔리는 헤더 띠를 만든다. 보통 그룹의 제목이나 카테고리명을 표시할 때 쓴다. 배경 색은 뒤에 붙는 ui-bar-X 클래스로 결정된다.

• ui-bar-a — 밝은 배경 (흰색 계열)
• ui-bar-b — 어두운 배경 (검정 계열) ← 본 코드
• ui-bar-c, -d, -e — 추가 테마 스와치

💡 왜 두 클래스를 같이? — ui-bar가 모양(패딩·폰트), ui-bar-b가 색을 결정한다. 모양과 색을 분리해 둬서 색만 바꾸기 쉽다.

---

2 ui-body — 내용 박스

ui-body는 카드 형태의 박스를 만든다. 안쪽 여백, 둥근 모서리, 옅은 그림자가 자동으로 들어간다. 본문에서는 꽃 한 종류씩 카드로 구분하는 데 사용했다.

색상 스와치도 ui-body-a ~ ui-body-e로 동일한 규칙을 따른다.

ui-bar

한 줄짜리 띠 — 그룹 제목

ui-body

여러 줄 컨테이너 — 카드 내용

---

3 <br/>로 간격 만들기

본 코드는 ui-body 사이에 <br/>을 넣어 간격을 만들었다. 이건 학습용 단순 방법이고, 실제로는 CSS의 margin-bottom으로 처리하는 게 표준이다.

⚠ br은 줄바꿈용 — 레이아웃 간격용이 아니다. 의미를 흐리고 유지보수가 어려워진다.

---

 

반응형

 

4 data-role과의 차이

data-role="header"·"footer"·"page"는 jQM이 위젯으로 변환하는 마커다. 반면 ui-bar·ui-body는 이미 jQM이 정의한 CSS 클래스를 그냥 입히는 것뿐 — 어떤 행동/이벤트도 일어나지 않는다.

---

5 자주 하는 실수

실수	증상	해결
ui-bar만 쓰고 스와치 빠짐	색상 없이 기본 회색만 보임	ui-bar-b 등을 함께 지정
ui-body 안에 form 위젯	위젯이 박스를 뚫고 나옴	fieldcontain으로 감싸기
data-role 자리에 ui-bar	위젯 변환 발생 안 함	역할은 data-role, 스타일은 클래스

---

6 현대식 대안

오늘날에는 Bootstrap card (.card · .card-header · .card-body) 또는 Tailwind의 유틸리티 클래스가 같은 역할을 한다. ui-bar/ui-body는 jQM 1.4.x 시절의 표현으로 신규 프로젝트에선 권장되지 않는다.

---

핵심 한 줄 요약

ui-bar한 줄 띠 — 그룹 제목용

ui-body카드 박스 — 본문용

-a ~ -e색 스와치 — a 밝음, b 어두움

data-role과 차이위젯 변환 X, CSS 클래스 적용만

Tags

#jQuery-Mobile #ui-bar #ui-body #스와치 #색테마 #그룹제목 #카드박스 #CSS클래스 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, ui-bar, ui-body, 스와치, 색테마, 그룹제목, 카드박스, CSS클래스, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리