소스 코드 편집기로 헬프 센터 문서와 콘텐츠 블록의 HTML 소스를 편집할 수 있습니다. 이로써 표준 WYSIWYG 편집기로는 가능하지 않은 방식으로 헬프 센터 콘텐츠를 사용자 지정하고 꾸밀 수 있습니다.

헬프 센터를 안전하게 유지하고 최상의 최종 사용자 경험을 제공하기 위해 Zendesk는 문서 및 콘텐츠 블록에 사용할 수 있는 HTML을 제한합니다.
참고: 지원되는 HTML 요소 목록은 헬프 센터 문서에 지원되는 HTML을 참조하세요.
이 문서에서 다루는 주제는 다음과 같습니다.
  • 문서 소스 코드 편집
  • 문서 소스 코드 정리
  • 소스 코드 편집 시 중요 고려 사항
    • 빈 HTML 컨테이너 요소
    • 안전하지 않은 HTML
    • 알 수 없는 HTML
    • 도움말 문서의 스타일링 HTML

문서 소스 코드 편집

문서 소스 코드 편집기로 문서의 HTML을 편집하여 헬프 센터 문서를 사용자 지정할 수 있습니다.

문서 소스 코드를 편집하려면 다음과 같이 하세요.
  1. 헬프 센터나 Guide 관리에서 문서나 콘텐츠 블록을 만들거나 편집합니다.
  2. 문서나 콘텐츠 블록에서 도구 모음에 있는 소스 코드 아이콘()을 클릭합니다.
  3. 소스 코드 편집기에서 사용하려는 소스 코드를 만들거나 편집합니다. 지원되는 요소 목록은 헬프 센터 문서에 지원되는 HTML을 참조하세요.

  4. 적용을 클릭하여 편집 내용을 저장하고 소스 코드 보기를 닫습니다.

문서 소스 코드의 스타일 정리

HTML 페이지의 콘텐츠를 복사하여 도움말 문서에 붙여넣으면 문서 소스 코드를 복잡하게 만들고 헬프 센터의 일관성을 손상시키는 원하지 않는 스타일이 나타날 수 있습니다. 소스 코드 편집기에서 스타일 정리 버튼을 사용하여 문서 편집기 작동에 필수적이지 않은 인라인 스타일을 제거할 수 있습니다. 스타일 정리 버튼은 CSS 클래스나 테마에 영향을 미치지 않으며 문서 편집기에 필요한 인라인 스타일(예를 들어 글꼴 전경 및 배경, 테이블 셀 높이 및 너비)에도 영향을 미치지 않습니다.

문서 소스 코드를 정리하려면 다음과 같이 하세요.
  1. 헬프 센터나 Guide 관리에서 문서나 콘텐츠 블록을 만들거나 편집합니다.
  2. 문서나 콘텐츠 블록에서 도구 모음에 있는 소스 코드 아이콘()을 클릭합니다.

    소스 코드 편집기가 열리면서 모든 코드와 인라인 스타일이 표시됩니다.

  3. 소스 코드 편집기에서 스타일 정리를 클릭합니다.

    지원되지 않는 인라인 스타일이 소스 코드 보기에서 제거됩니다.

  4. 적용을 클릭하여 편집 내용을 저장하고 소스 코드 보기를 닫습니다.
  5. 저장을 클릭하여 변경 내용을 저장합니다.

소스 코드 편집 시 중요 고려 사항

빈 HTML 컨테이너 요소

Zendesk는 i 또는 span 등 대부분의 빈 컨테이너 요소를 자동으로 제거합니다. 이러한 요소는 보통 렌더링될 콘텐츠를 포함해야 합니다. Zendesk는 빈 p 태그를 제거하지 않습니다. 대신 요소의 콘텐츠로  를 삽입합니다. 예:

<p>&nbsp;</p>

안전하지 않은 HTML

기본적으로 Zendesk는 다음과 같은 HTML 요소를 안전하지 않은 것으로 여깁니다.

안전하지 않은 HTML 요소
applet, button, embed, form, input, object, script, textarea, style

문서에서 안전하지 않은 HTML 처리하기

문서의 경우에는 소스 코드 편집기가 안전하지 않은 HTML 요소나 지원되지 않는 HTML 속성을 제거하지 않습니다. 대신 헬프 센터 문서를 렌더링하는 데 사용된 HTTP 응답에서 제외됩니다. 그 결과 문서가 의도한 대로 렌더링되지 않을 수 있습니다.

문서에 안전하지 않은 HTML 허용하기

헬프 센터 문서에서 안전하지 않은 HTML을 허용하도록 기본 설정을 무시할 수 있습니다.

경고: 이와 같이 변경할 경우 사용자가 브라우저에서 문서를 열면 잠재적인 악성 코드가 실행될 수 있습니다.

HTTP 응답에서 안전하지 않은 HTML을 허용하려면 다음과 같이 하세요.

  1. Guide의 사이드바에서 설정 아이콘()을 클릭합니다.
  2. 보안 아래에서 안전하지 않은 콘텐츠 표시 옵션을 선택합니다.
  3. 업데이트를 클릭합니다.

콘텐츠 블록에서 안전하지 않은 HTML 처리하기

콘텐츠 블록의 경우에는 소스 코드 편집기가 안전하지 않은 HTML 요소와 지원되지 않는 속성을 제거합니다. 안전하지 않은 요소 안의 콘텐츠는 알 수 없는 HTML에 설명된 대로 p 요소 안에 배치됩니다.

알 수 없는 HTML

지원되지 않는 HTML 요소는 알 수 없음으로 간주됩니다. 지원되지 않는 HTML은 콘텐츠 블록을 편집하는지 아니면 헬프 센터 문서를 편집하는지에 따라 다르게 처리됩니다.

콘텐츠 블록을 편집하는 경우에는 HTML 블록이 지원되지 않는 콘텐츠를 인식하여 HTML 블록 안에 둘러쌉니다. 콘텐츠 블록 편집기에서 HTML 블록을 클릭하여 해당 블록의 코드만 표시하는 소스 코드 편집기를 엽니다. 이 집중형 보기를 사용하여 전체 콘텐츠 블록의 소스 코드를 스크롤하지 않고도 선택한 콘텐츠의 HTML을 수정할 수 있습니다. HTML 블록을 사용하여 콘텐츠 블록의 코드 편집하기를 참조하세요.

문서의 소스 코드에서 지원되지 않는 HTML을 사용하려고 하면 Zendesk가 알 수 없는 모든 태그를 제거하고 p 요소에 태그의 콘텐츠를 배치합니다. 예를 들어 다음 HTML에는 알 수 없는 mytag 요소가 포함되어 있습니다.
<mytag>Hello world!</mytag>

헬프 센터를 렌더링하는 데 사용된 HTTP 응답에서 mytag 요소가 제거됩니다. 대신 해당 콘텐츠가 p 요소에 배치됩니다.

<p>Hello world!</p>

도움말 문서의 스타일링 HTML

가능하다면 Zendesk는 class 속성과 관련 CSS 클래스를 사용하여 헬프 센터 문서의 HTML에 스타일을 지정할 것을 권장합니다. CSS 클래스는 헬프 센터 테마에서 정의되어야 합니다. 자세한 내용은 헬프 센터 테마 사용자 지정하기를 참조하세요.

헬프 센터 테마를 위한 CSS 규칙을 만들 때 div.container > p > img와 같은 중첩 선택기의 사용을 피하세요. 그러한 규칙은 유지하기가 어렵고 의도치 않은 요소를 대상으로 할 수 있습니다. 대신 .container-image와 같이 클래스에 직접 스타일을 지정하는 선택기를 사용하세요. 그런 다음 class 요소를 사용하여 영향을 받는 HTML 요소에 클래스를 직접 추가하세요. 예:

style 속성을 사용하여 HTML 요소에 인라인 스타일링을 적용하지 마세요. 인라인 스타일링은 유지하기 어렵고 스타일이 일관되지 않을 수 있습니다.

Zendesk 제공