SurveyMonkey
CSS를 사용하여 설문조사 스타일 지정
Enterprise 기능: 관심이 있는 경우 영업팀에 문의하세요. 이미 Enterprise 계정이 있는 경우에는 고객 성공 관리자(CSM)에게 문의하세요.
맞춤형 테마를 만들어 전체적인 스타일을 변경할 수 있습니다. 텍스트 서식 도구 모음을 사용하여 특정 설문조사 질문에 고유하게 스타일을 변경할 수 있습니다.
Enterprise 주 관리자는 맞춤형 설문조사 테마를 만들기 위한 CSS를 추가하여 설문조사의 모양을 브랜딩할 수 있습니다.
맞춤형 CSS 테마 만들기
주 관리자는 시각적 자산, 글꼴, 색 및 스타일 기본 설정과 일치하는 맞춤형 설문조사 테마의 CSS를 추가할 수 있습니다.
라이브러리에 새로운 맞춤형 테마를 추가하려면:
- 기본 탐색에서 내 팀을 선택하고 라이브러리를 선택합니다.
- + 새 항목(항목 추가)을 선택합니다.
- CSS 테마를 선택합니다.
- 원하는 CSS 편집 도구에서 코드 복사를 선택하고 붙여넣습니다.
- 코드를 사용자 정의한 다음, 테마 맞춤 조정 아래의 상자에 코드를 추가하고 미리보기 생성을 선택하여 미리보기를 확인합니다.
- 저장을 선택합니다.
팁! 설문조사를 발송하기 전에 맞춤형 CSS 테마를 미리봅니다.
- 설문조사 미리보기를 사용하여 CSS 맞춤형 테마 보기
맞춤형 CSS 테마 업데이트
맞춤형 CSS 테마를 저장한 후에는 주 관리자만 페이지 요소를 수정하거나 변경할 수 있습니다.
맞춤형 테마를 수정하려면:
- 기본 탐색에서 내 팀을 선택하고 라이브러리를 선택합니다.
- ... 아이콘을 선택하고 업데이트를 클릭합니다.
- CSS 테마를 선택합니다.
- 원하는 CSS 편집 도구에서 코드 복사를 선택하고 붙여넣습니다.
- 코드를 사용자 정의한 다음, 테마 맞춤 조정 아래의 상자에 코드를 추가하고 미리보기 생성을 선택하여 미리보기를 확인합니다.
- 저장을 선택합니다.
팀원은 맞춤형 CSS 테마가 적용된 설문조사의 개별 요소를 변경하거나 수정할 수 없습니다.
페이지 요소 맞춤 조정
일반 속성
| CSS 속성 | 문자열 값 |
| 글꼴 집합 | 조직에서 선호하는 글꼴 모음이 있을 수 있습니다. 현재 CSS 웹에 안전한 글꼴에 기재된 글꼴만 사용할 수 있습니다. |
| 글꼴 크기 | 숫자(예: 32px) |
| 색 | 색상 선택기를 사용하여 색의 RGBA 값을 생성합니다. |
| 배경 색 | 16진수 코드 또는 RGBA 값입니다. |
페이지 제목
설문조사의 서로 다른 페이지에 각각 페이지 제목을 추가하여 설문조사를 체계적으로 정리할 수 있습니다.
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
- 글꼴 스타일 변경
- 글꼴 굵기 변경
- 텍스트 장식 변경
설문조사 제목
설문조사 제목은 숨기지 않는 한 응답자들이 설문조사에 응답할 때 각 설문조사 페이지 위쪽에 표시됩니다.
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- 글꼴 스타일 변경
- 글꼴 굵기 변경
- 텍스트 장식 변경
설문조사 페이지
설문조사에서 질문 뒤에 표시되는 배경 색입니다. 설문조사 배경 색은 배경 이미지를 추가하지 않은 경우에만 보입니다.
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
팁! 색상 선택기를 사용하여 색의 RGBA 값을 생성하세요.
질문 제목
다양한 질문 유형에서 질문 텍스트가 표시되는 방식을 사용자 지정할 수 있습니다.
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- 글꼴 스타일 변경
- 글꼴 굵기 변경
- 텍스트 장식 변경
질문 본문
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- 글꼴 스타일 변경
- 글꼴 굵기 변경
- 텍스트 장식 변경
버튼
설문조사에 응답하는 사람들은 이러한 버튼을 사용하여 설문조사를 탐색합니다. 응답자가 설문조사의 각 페이지에서 '다음' 또는 '완료' 버튼을 클릭하면 응답이 저장되고 제출됩니다.
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- 글꼴 굵기 변경
오류
응답자가 필수 질문을 비워두거나 답변이 질문에 주어진 범위나 한도 요건을 충족하지 않는 경우 응답자에게 오류 메시지가 표시됩니다.
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- 글꼴 스타일 변경
- 글꼴 굵기 변경
- 텍스트 장식 변경
나가기 링크
나가기 링크는 모든 페이지의 오른쪽 위에 표시되어, 응답자가 현재 페이지에 입력한 응답을 저장하지 않고 설문조사에서 나갈 수 있습니다.
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- 글꼴 굵기 변경
페이지 레이아웃
페이지 레이아웃을 사용하여 배경 색이나 이미지를 표시할 방법과 위치를 선택할 수 있습니다.
#pageLayout {
layout: banner;
opacity: 0.0;
}
팁! 배경 색을 단색으로 만들려면 불투명도를 100으로 설정합니다.