On this page
manage_search
그리드 레이아웃
그리드 레이아웃을 사용하면 CSS 그리드를 사용하여 그룹 내에 필드를 배치할 수 있어 다중 열 양식 설계가 가능합니다.
그리드 레이아웃 기능은 gridformat<> appearance 태그를 사용하여 그룹 내에 다중 열 그리드로 질문을 배치할 수 있게 합니다. 이는 여러 관련 필드가 수직으로 쌓이는 대신 나란히 표시되어야 하는 밀도가 높은 데이터 입력 양식에 유용합니다.
작동 방식
그리드 레이아웃은 두 가지 수준에서 적용됩니다:
- 그룹 — 그리드에 열이 몇 개인지 정의하기 위해
appearance: field-list grid(weight=N)을 설정합니다 - 그룹 내 각 필드 — 필드를 배치하기 위해
appearance: gridformat<row=R col=C colspan=S/>를 설정합니다
그리드는 12열 Bootstrap 스타일 시스템을 사용합니다. weight=N은 논리적 열의 수를 정의하고, 각 열은 12/N Bootstrap 열을 차지합니다.
그룹 수준 appearance
| Appearance | 설명 |
|---|---|
field-list grid(weight=2) | 2열 그리드 (각 열 = 6 Bootstrap 열) |
field-list grid(weight=3) | 3열 그리드 (각 열 = 4 Bootstrap 열) |
field-list grid(weight=4) | 4열 그리드 (각 열 = 3 Bootstrap 열) |
field-list grid(weight=6) | 6열 그리드 (각 열 = 2 Bootstrap 열) |
필드 수준 gridformat<> 구문
gridformat<row=R col=C colspan=S/>
gridformat<row=R col=C colspan=S backgroundcolor=COLOR/>
| 속성 | 설명 |
|---|---|
row | 행 번호 (1부터 시작) |
col | 열 번호 (1부터 시작, weight로 정의된 그리드 내에서) |
colspan | 이 필드가 걸쳐있는 열 수 (기본값 1) |
backgroundcolor | 필드 배경에 대한 선택적 CSS 색상 (예: #f0f0f0, lightblue) |
예시: 2열 가구 설문 섹션
| type | name | label | appearance |
|---|---|---|---|
| begin_group | demographics | 인구 통계 | field-list grid(weight=2) |
| text | first_name | 이름 | gridformat<row=1 col=1/> |
| text | last_name | 성 | gridformat<row=1 col=2/> |
| integer | age | 나이 | gridformat<row=2 col=1/> |
| select_one gender | gender | 성별 | gridformat<row=2 col=2/> |
| text | address | 전체 주소 | gridformat<row=3 col=1 colspan=2/> |
| end_group |
다음과 같이 렌더링됩니다:
[ 이름 ] [ 성 ]
[ 나이 ] [ 성별 ]
[ 전체 주소 (두 열 모두에 걸침) ]
예시: 3열 필지 데이터 입력
| type | name | label | appearance |
|---|---|---|---|
| begin_group | plot_data | 필지 세부 정보 | field-list grid(weight=3) |
| text | plot_id | 필지 ID | gridformat<row=1 col=1/> |
| decimal | area_ha | 면적 (ha) | gridformat<row=1 col=2/> |
| select_one crop_type | crop | 작물 유형 | gridformat<row=1 col=3/> |
| decimal | yield | 수확량 (kg) | gridformat<row=2 col=1/> |
| decimal | revenue | 수익 | gridformat<row=2 col=2/> |
| text | notes | 메모 | gridformat<row=2 col=3/> |
| end_group |
배경 색상
backgroundcolor를 사용하여 섹션을 시각적으로 구분합니다:
| type | name | label | appearance |
|---|---|---|---|
| note | section_a | 섹션 A | gridformat<row=1 col=1 colspan=2 backgroundcolor=#e8f4f8/> |
모범 사례
- 나란히 배치된 필드가 스크롤을 실제로 줄이는 데이터 입력 집약적 화면에만 그리드 레이아웃을 사용합니다.
colspan=1필드를 짧게 유지합니다 (ID, 코드, 짧은 선택지) — 긴 레이블은 좁은 그리드 열에서 잘립니다.- 긴 레이블이나 여러 줄 텍스트 입력이 있는 필드에는
colspan=N을 사용합니다. - 조사원이 사용할 것으로 예상되는 가장 작은 화면 크기에서 테스트합니다 — 4열 그리드는 휴대폰에서 협소합니다.
- 그리드 레이아웃은 웹 및 태블릿 화면 크기에 가장 적합합니다; 모바일 폰에서는 2열 레이아웃이 일반적으로 최대 편안한 너비입니다.
제한 사항
gridformat<>는grid(weight=N)appearance가 있는 그룹 내에서만 작동합니다 — 최상위 수준에서는 효과가 없습니다.- 그리드 레이아웃은 rtSurvey 웹 양식 확장으로 다른 ODK 호환 클라이언트에서 올바르게 렌더링되지 않을 수 있습니다.
- 행 및 열 위치는 양식 빌드 시간에 검증되지 않습니다 — 겹치는 필드는 모두 렌더링되지만 깨진 것처럼 보일 수 있습니다.
이 페이지가 도움이 되었나요?