헬프 센터 CSS 쿡북

사용 중인 플랜

Suite Growth 플랜 이상에서 사용 가능 모든 Guide 플랜에서 사용 가능

CSS(Cascading Style Sheets)를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다.

참고: 평가판 사용자에게는 Professional 플랜이 제공되며, 이 플랜에는 코드 편집 옵션이 포함되어 있지만 Suite Team을 구매하는 경우에는 더 이상 이 기능을 사용할 수 없습니다.

Guide에서 CSS에 액세스하고 편집하려면 CSS 또는 JavaScript 사용자 지정하기를 참조하세요.

CSS가 생소하거나 기억을 더듬을 필요가 있다면 다음 튜토리얼을 살펴보시기 바랍니다.

CSS 시작하기는 완전 초보자를 대상으로 한 가장 완전한 CSS 튜토리얼로 직접 실행해 볼 수 있는 실용적인 예와 함께 이 언어의 기본적인 기능들을 자세히 안내해 줍니다.
CSS 초보자 튜토리얼은 시작하기에 충분한 정보를 제공합니다.

헬프 센터 기본서식 작성 언어 또는 JavaScript를 사용해서 헬프 센터의 디자인을 사용자 지정할 수도 있습니다.

검색 필드의 너비 또는 높이 변경
검색 필드의 배경 색 변경
검색 텍스트의 모양 변경
결과 페이지 제목의 모양 변경
검색 결과 키워드 강조 표시의 모양 변경
지식창고 및 커뮤니티 제목의 모양 변경
결과 사이의 간격 변경
결과 텍스트의 모양 변경
결과 링크의 색 변경

머리글 및 바닥글

머리글은 테마와 사용자 역할에 따라 로고 및 기타 구성 요소를 표시합니다. 바닥글을 사용하여 관련 링크, 회사 정보 또는 법적 고지를 표시할 수 있습니다.

목차로 돌아가기

머리글이나 바닥글의 배경 색 변경.

다음 선택기에서 background-color 특성을 변경하거나 추가합니다.

머리글:

.header {
  background-color: #666;
}

바닥글:

.footer {
  background-color: #333;
}

머리글이나 바닥글의 높이 변경

다음 선택기에서 height 특성을 변경하거나 추가합니다.

머리글:

.header {
   height: 70px;
}

바닥글:

.footer {
   height: 20px;
}

머리글이나 바닥글 위 또는 아래 공백 변경

다음 선택기에서 margin-bottom 및 margin-top 특성을 변경하거나 추가합니다.

머리글:

.header {
     margin-bottom: 20px;
}

바닥글:

.footer {
     margin-top: 10px;
}

선택한 언어의 모양 변경

다음 선택기 및 특성을 추가합니다.

.language-selector .dropdown-toggle {
  color: green;
}

문의 등록 링크의 모양 변경

header.hbs 기본서식은 응답성을 높이기 위해 동일한 기본서식에 헤더의 데스크톱 버전과 모바일 버전이 모두 있습니다. 데스크톱 버전은 nav-wrapper-desktop이라는 클래스가 있는 div에 포함되어 있고 모바일 버전은 nav-wrapper-mobile이라는 클래스가 있는 div에 포함되어 있습니다. 각 div에는 개별적인 문의 등록 링크가 포함되어 있습니다. 링크의 모양을 변경하려면 CSS 규칙의 데스크톱 및 모바일 버전을 만들고 해당 선택기의 특이도를 높여야 합니다.

style.css 파일에 다음 선택기를 추가하고 텍스트 특성을 수정하세요.

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

문의 등록 링크 숨기기

style.css 파일에 다음 선택기를 추가하세요.

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

로그인 링크의 모양 변경

다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.

.login {
  font-size: 14px;
  color: green;
}

로고 크기 변경

권장 로고 이미지 크기는 200픽셀 x 50픽셀이지만 필요한 경우 이 기본값을 무시할 수 있습니다.

참고: 권장 크기보다 큰 로고를 사용하려면 Zendesk Support 인스턴스 밖에 로고 이미지를 호스팅해야 합니다.

로고 크기를 변경하려면 다음과 같이 하세요.

Guide의 사이드바에서 디자인 사용자 지정 아이콘()을 클릭합니다.
테마 편집을 클릭합니다.
CSS를 클릭하여 CSS 스타일시트를 연 후 다음 규칙을 검색합니다.
```
.logo img {
  max-height: 37px;
}
```
검색하려면 코드 편집기 안을 클릭하고 Control+F(Windows의 경우) 또는 Cmd+F(Mac의 경우)를 누릅니다.
".logo img" 선택기에서 높이 특성을 이미지의 높이에 맞게 수정합니다.
저장을 클릭합니다.

검색

검색 상자는 지식창고와 커뮤니티 둘 다에서 콘텐츠를 찾아 결과 페이지에 링크를 표시합니다. 원하는 경우 검색 상자를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 검색 도우미를 참조하세요.

목차로 돌아가기

검색 필드의 너비 또는 높이 변경

다음 선택기에서 width 또는 height 값을 변경합니다.

큰 검색 상자:

.search input[type=search] {
  height: 50px;
  width: 90%;
}

작은 검색 상자:

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

검색 필드의 배경 색 변경

다음 선택기에서 background 특성을 변경합니다.

큰 검색 상자:

.search input[type=search] {
  background: #999;
}

작은 검색 상자:

.search-small input[type=search] {
  background: #999;
}

검색 텍스트의 모양 변경

다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.

큰 검색 상자:

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

작은 검색 상자:

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

결과 페이지 제목의 모양 변경

검색 결과 페이지의 제목은 검색어에 리턴된 결과 수로 구성됩니다. 예: “일련번호”에 대한 9개의 결과

스타일시트에 아직 없는 경우에는 다음 선택기를 추가하고, 텍스트 특성을 변경하거나 추가합니다.

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

검색 결과 키워드 강조 표시의 모양 변경

검색 결과 내 강조 표시된 용어는 .search-result-description 컨테이너에서 인라인 요소인 <em>으로 둘러싸여 있습니다. 강조 표시를 노란색 배경으로 굵게 표시하려면 다음과 같이 할 수 있습니다.

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

지식창고 및 커뮤니티 제목의 모양 변경

다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

결과 사이의 간격 변경

다음 선택기에서 margin-bottom 특성을 추가합니다.

.search-result {
  margin-bottom: 20px;
}

결과 텍스트의 모양 변경

다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

결과 링크의 색 변경

다음 선택기에서 color 특성을 추가하거나 수정합니다.

.search-result a {
  color: #484;
}

이동 경로

이동 경로는 사용자들이 헬프 센터에서 콘텐츠를 찾는 데 도움이 됩니다. 원하는 경우 이동 경로를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 이동 경로 도우미를 참조하세요.

목차로 돌아가기

이동 경로 위 또는 아래 공백 변경

다음 선택기에서 padding 특성을 추가하거나 수정합니다.

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

이동 경로 텍스트의 모양 변경

다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

이동 경로 링크의 색 변경

다음 선택기 및 특성을 추가합니다.

.breadcrumbs li a {
  color: #484;
}

이동 경로의 포인터 문자(>) 변경

다음 선택기에서 color 및 content 특성을 변경합니다.

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

문서 목록

테마에 따라 홈 페이지, 카테고리 시작 페이지 및 섹션 시작 페이지에 문서 목록이 사용됩니다.

목차로 돌아가기

문서 목록 주위 공백 변경

다음 선택기 및 padding 특성을 추가하거나 수정합니다.

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

문서 사이의 간격 변경

다음 선택기에서 margin-bottom 특성을 변경합니다.

.article-list > li {
  margin-bottom: 10px;
}

문서 링크의 모양 변경

다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

문서 링크의 색 변경

다음 선택기 및 특성을 추가합니다.

.article-list li a {
  color: #FFF;
}

지식창고 문서

지식창고에서 문서의 디자인을 변경할 수 있습니다.

목차로 돌아가기

문서 제목의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

문서 텍스트의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

문서 링크의 색 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-body a {
  color: #930;
}

작성자 이름의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

마지막 업데이트된 문자열의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

“이 문서가 도움이 되었습니까?"의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

투표 카운터의 모양 변경

예: “8명 중 6명이 유용하다고 평가했습니다.” 다음 선택기 및 특성을 추가하거나 수정합니다.

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

"또 다른 질문이 있으십니까? 문의 등록"의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

댓글 제목의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

댓글 텍스트의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

커뮤니티 질문 및 답변

커뮤니티에서 콘텐츠의 디자인을 변경할 수 있습니다.

목차로 돌아가기

질문 제목의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

질문 텍스트의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

질문 링크의 색 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-text a {
  color: #484;
}

질문 작성자 이름의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.

.question-author a {
  color: #484;
}

질문 작성자의 이름, 질문 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

질문 게시 후 경과 시간의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

질문 공유 링크의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

답변 제목의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

답변 텍스트의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

답변 작성자 이름의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-author a {
  color: #484;
}

답변 작성자의 이름, 답변 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

답변 게시 후 경과 시간의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

답변 공유 링크의 모양 변경

다음 선택기 및 특성을 추가하거나 수정합니다.

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}