jQuery Mobile 버튼 그룹 — controlgroup 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 버튼 그룹
controlgroup 세로/가로 정렬 완전 정리

버튼들을 묶어서 한 덩어리처럼 보이게 하는 단 하나의 속성

시작 오늘 분석할 코드

여러 개의 버튼을 한 덩어리(border가 한 줄로 이어진 그룹)로 묶고 싶을 때 쓰는 패턴이다. data-role="controlgroup" 속성 한 줄이면 jQuery Mobile이 알아서 모서리·테두리·간격을 처리해준다.

<div data-role="controlgroup"> <a href="#" data-role="button">버튼1</a> <a href="#" data-role="button">버튼2</a> <a href="#" data-role="button">버튼3</a> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">버튼1</a> <a href="#" data-role="button">버튼2</a> <a href="#" data-role="button">버튼3</a> </div>

실제 출력 미리보기

기본 (vertical)

버튼1

버튼2

버튼3

data-type="horizontal"

버튼1

버튼2

버튼3

---

용어 핵심 키워드

controlgroup버튼·라디오·체크박스를 한 덩어리로 묶는 컨테이너

data-role="button"a 태그를 jQuery Mobile 버튼 스타일로 변환

data-type="horizontal"묶음을 가로 방향으로 배치 (기본은 vertical)

묶음 효과중간 테두리는 합쳐지고 양 끝만 모서리 둥글게

---

1 data-role="controlgroup" — 묶음의 시작

버튼이 여러 개 있는데 각각을 따로 두면 사이에 여백이 생기고 모서리도 모두 둥글게 처리된다. controlgroup으로 감싸면 jQuery Mobile이 "이건 한 덩어리다"로 인식한다.

개별 버튼 3개

각 버튼이 독립적 — 사이 여백 + 모든 모서리 둥글게 + 각각 그림자

controlgroup으로 묶음

중간 테두리 합쳐짐 + 양 끝 모서리만 둥글게 + 한 덩어리로 인식

---

2 data-type — 가로 vs 세로

controlgroup의 기본 방향은 vertical(세로)이다. 가로로 나열하려면 data-type="horizontal"을 붙인다.

data-type	배치	모서리 처리
(생략) / vertical	세로 일렬	맨 위만 위쪽 둥글게, 맨 아래만 아래쪽 둥글게
horizontal	가로 일렬	맨 왼쪽만 왼쪽 둥글게, 맨 오른쪽만 오른쪽 둥글게

※ horizontal을 쓸 때 주의

• 버튼 글자가 길면 좁은 화면에서 잘릴 수 있음
• 버튼 개수는 2~3개 정도가 적당 (4개부터 가독성 떨어짐)
• 모바일에선 vertical이 손가락 터치하기 더 쉬움

---

3 data-role="button" — a 태그를 버튼처럼

HTML의 <a>는 원래 글씨 형태의 링크다. data-role="button"을 붙이면 jQuery Mobile이 그 a 태그를 버튼 모양(둥근 박스, 그림자, 호버 효과)으로 자동 변환한다.

⚙ 왜 a 태그를 쓰나 — 모바일에서는 "다른 페이지로 이동"이 가장 흔한 동작이다. 버튼이 본질적으로 링크 역할인 경우가 많아서 <a href> + data-role="button" 조합이 표준 패턴이 됐다.

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
버튼에 data-role="button" 빠뜨림	그냥 텍스트 링크로 표시	각 a에 명시
controlgroup 없이 그냥 나열	버튼 사이 여백 발생	한 덩어리는 반드시 controlgroup으로
data-type 오타 ("horizon" 등)	vertical로 동작	정확히 "horizontal"
horizontal에 4~5개 버튼	모바일에서 글씨 잘림	3개 이하로 정리하거나 vertical로

---

핵심 한 줄 요약

controlgroup여러 버튼을 한 덩어리로 묶는 컨테이너

data-type="horizontal"가로 배치 (기본은 vertical)

data-role="button"a 태그를 버튼 스타일로 변환

모서리 처리양 끝만 둥글고 사이는 평평 — 한 덩어리 느낌

Tags

#jQuery-Mobile #controlgroup #버튼그룹 #data-role #data-type #horizontal #vertical #모서리 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, controlgroup, 버튼그룹, data-role, data-type, horizontal, vertical, 모서리, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리