HTML 스타일링
rtSurvey는 레이블과 힌트에 HTML 태그를 지원하여 서식 있는 텍스트, 링크, 동적 색상 테마를 가능하게 합니다.
rtSurvey는 웹 양식에서 레이블과 힌트 텍스트를 HTML로 렌더링합니다. 이는 표준 HTML 태그를 사용하여 텍스트 서식을 지정하고, 줄 바꿈을 추가하고, 링크를 만들고, 색상을 적용할 수 있다는 것을 의미합니다. 이는 메모 필드, 섹션 지침 및 동적 요약에 특히 유용합니다.
레이블의 HTML은 웹 양식과 rtSurvey 모바일 앱에서 렌더링됩니다. 모든 ODK 호환 클라이언트에서 렌더링되지 않을 수 있습니다. 항상 대상 플랫폼에서 테스트하세요.
지원되는 HTML 태그
텍스트 서식
| 태그 | 결과 |
|---|---|
<strong>text</strong> 또는 <b>text</b> | 굵은 텍스트 |
<em>text</em> 또는 <i>text</i> | 기울임 텍스트 |
<u>text</u> | 밑줄 텍스트 |
<br> | 줄 바꿈 |
<span style="...">text</span> | 인라인 스타일링 |
링크
<a href="https://example.com" target="_blank">여기를 클릭하세요</a>
새 탭에서 열립니다. 조사원이 참조해야 하는 참조 문서, 가이드라인 또는 외부 리소스에 사용합니다.
색상
<span>과 인라인 스타일을 사용합니다:
<span style="color: red;">경고: 값이 범위를 벗어났습니다</span>
<span style="color: #009688;">섹션 완료됨</span>
색상 테마 변수
rtSurvey는 앱의 구성된 테마에 맞게 조정되는 색상 테마 토큰을 지원합니다. __COLOR_THEME_NAME__ 구문을 사용합니다:
<span style="color: var(--color-theme-primary);">기본 색상 텍스트</span>
또는 레이블 텍스트에서 토큰 약어를 사용합니다:
<font color="var(--COLOR_THEME_PRIMARY)">중요 메모</font>
이는 렌더링 시 CSS 변수가 있는 동등한 <span>으로 자동 변환됩니다.
다국어 레이블
단일 레이블 셀에서 여러 언어를 지원하기 위해 언어 태그로 내용을 감쌉니다:
<en>가구 규모를 입력하세요</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey는 현재 앱 언어와 일치하는 내용을 추출합니다. 일치하는 언어 태그가 없으면 전체 문자열이 그대로 표시됩니다.
메모 필드의 예시
굵은 텍스트와 줄 바꿈이 있는 섹션 지침
| type | name | label |
|---|---|---|
| note | section_intro | <strong>섹션 3: 토지 이용</strong><br>이 섹션의 모든 질문은 가구주에게만 질문하세요. |
계산 참조가 있는 동적 요약
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | 총 가구원: <strong>${total}</strong><br><span style="color: gray;">성인: ${adults} · 아동: ${children}</span> |
빨간색 경고
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>경고:</strong> 입력된 나이 (${age})가 비정상적으로 높습니다. 확인해 주세요.</span> | ${age} > 100 |
참조 문서 링크
| type | name | label |
|---|---|---|
| note | guidelines_link | 이 섹션을 시작하기 전에 <a href="https://docs.example.com/guidelines" target="_blank">현장 지침</a>을 참조하세요. |
특수 rtSurvey HTML 태그
<webbox src='url' title='title'>...</webbox>
URL을 양식 내 모달에서 여는 버튼을 임베드합니다. 자세한 내용은 Webbox를 참조하세요.
<delete-repeat-current>label</delete-repeat-current>
탭 시 현재 반복 인스턴스를 삭제하는 반복 그룹 내 버튼을 렌더링합니다.
<delete-repeat-last>label</delete-repeat-last>
마지막 반복 인스턴스를 삭제하는 버튼을 렌더링합니다.
반복 그룹에서의 예시 사용:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>이 구성원 제거</delete-repeat-current> |
모범 사례
- HTML을 절제하여 사용합니다 — 과도하게 서식이 적용된 레이블은 읽기 어렵게 됩니다.
- 굵은 텍스트에는
<strong>, 기울임에는<em>을 사용합니다 (deprecated<b>와<i>대신). - 색상을 의미 있게 사용합니다 — 빨간색은 경고용이지 장식용이 아닙니다.
- 모바일 앱과 웹 양식 모두에서 HTML 렌더링을 항상 테스트합니다. 렌더링이 약간 다를 수 있습니다.
- 레이블 내에서
<table>태그를 피합니다 — 모바일 화면에서 잘 렌더링되지 않습니다. - JavaScript (
<script>)를 사용하지 마세요 — 제거되거나 오류가 발생합니다.
제한 사항
- 복잡한 HTML (표, 양식, 스크립트)은 지원되지 않으며 렌더링이 깨질 수 있습니다.
- 일부 구형 모바일 클라이언트는 HTML 태그를 일반 텍스트로 표시할 수 있습니다 — 모든 대상 기기에서 테스트합니다.
<a>링크는 브라우저 또는 WebView에서 열립니다 — 조사원이 양식을 떠나게 되어 모바일에서 방해가 될 수 있습니다.