사용 중인 플랜
Suite, 모든 버전 Team, Growth, Professional, Enterprise 또는 Enterprise Plus
Support(다음 포함) Guide Professional 또는 Enterprise

Zendesk는 2025년 2분기에 계정에 새 문서 편집기를 도입했습니다. 레거시 문서 편집기에서 새 문서 편집기로의 전환은 4단계를 거쳐 완료될 예정입니다. HTML 및 CSS 수준에서 표에 스타일이 지정되는 방식을 포함한 개선 사항 및 변경 사항이 새 편집기에 적용되었습니다.

새 편집기가 레거시 편집기와 100% 호환되는 것은 아니므로 새 편집기로 업그레이드하는 동안 또는 업그레이드한 후에 표와 관련된 몇 가지 일반적인 문제가 발생할 수 있습니다. 이 문서에서는 테마 개발자와 관리자가 이러한 문제를 극복하고 브랜드 스타일을 의도한 대로 표에 적용하기 위한 해결 방법과 솔루션을 안내합니다.

참고: 추가적인 문제나 솔루션을 찾는다면 이 문서 맨 아래에 있는 댓글 섹션에 추가해 주세요.
이 문서에서 다루는 주제는 다음과 같습니다.
  • 새 편집기에서 표 스타일링 변경 사항
  • 업그레이드 중 표 전환의 예
  • 일반적인 문제와 해결 방법
  • 테마 개발자와 관리자를 위한 성공 사례

새 편집기에서 표 스타일링 변경 사항

새 문서 편집기에서 표에 대한 가장 큰 변경 사항은 HTML 속성이나 외부 CSS 클래스에 의존하여 표에 스타일을 지정하는 대신 표 요소(예: <table>, <tr> 및 <td>)에 직접 적용되는 인라인 CSS 스타일을 사용하는 것입니다. 새 표는 이제 <figure> 태그로 랩핑됩니다.

  • 이전 편집기에서는 HTML 속성(예: cellpadding, border)과 일부 인라인 CSS의 조합을 사용하여 표 스타일을 적용했습니다.

  • 새 편집기에서는 테두리 너비, 테두리 색, 배경 색, 셀 높이/너비, 텍스트 색 및 안쪽 여백과 같은 표 사용자 지정이 인라인 CSS 스타일로 엄격하게 적용됩니다.

인라인 스타일은 항상 CSS 특이도가 가장 높습니다. 즉,

  • 선택기가 동일하거나 더 높은 특이도를 사용하거나 !important를 사용하지 않는 한, 사용자 지정 테마 CSS 스타일링 타겟팅 표는 이러한 인라인 스타일을 무시할 수 없습니다.

  • 신중한 특이도 없이 HTML 속성이나 요소 선택기를 타겟팅한 이전의 테마 및 CSS 스타일링은 새 편집기로 업그레이드한 후에 표 스타일이 손상되거나 일관되지 않게 적용될 수 있습니다.

업그레이드 중 표 전환의 예

다음 예는 표를 새 문서 편집기로 전환할 때 발생할 수 있는 문제를 보여줍니다.

속성에서 인라인 스타일로 전환된 셀 안쪽 여백

레거시 문서 편집기는 [cellpadding] 속성을 사용하여 안쪽 여백을 지정하는 반면 새 문서 편집기는 인라인 스타일링을 사용합니다. [cellpadding] 속성이나 요소를 타겟팅하는 이전 스타일은 조정될 때까지 더 이상 작동하지 않습니다.

레거시 문서 편집기 HTML
<table cellpadding="20">
새 문서 편집기 HTML
<td style="padding: 20px;">

테두리 처리 변경

다음 예는 레거시 편집기, 새 편집기 및 새 편집기로 전환된 레거시 문서에서 표 테두리가 어떻게 처리되는지 보여줍니다.

레거시 편집기에서 표를 삽입하여 생성된 HTML
<table style="border-collapse: collapse; width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 50%">A</td>
      <td style="width: 50%">B</td>
    </tr>
    <tr>
      <td style="width: 50%">C</td>
      <td style="width: 50%">D</td>
    </tr>
  </tbody>
</table>
새 편집기에서 표를 삽입하여 생성된 HTML
<figure style="width: 100%" class="wysiwyg-table">
  <table style="border-style: solid; border-width: 1px">
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px">A</td>
        <td style="border-style: solid; border-width: 1px">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px">C</td>
        <td style="border-style: solid; border-width: 1px">D</td>
      </tr>
    </tbody>
  </table>
</figure>
레거시 편집기에서 새 편집기로 표를 전환하여 생성된 HTML
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
  <table
    style="border-collapse: collapse; border-style: solid; border-width: 1px"
  >
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">A</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">C</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">D</td>
      </tr>
    </tbody>
  </table>
</figure>

일반적인 문제와 해결 방법

이 섹션에서는 레거시 편집기에서 새 편집기로 표를 전환할 때 발생하는 몇 가지 일반적인 문제와 그러한 문제를 해결하는 방법에 대해 설명합니다.

테마 CSS가 표 스타일(안쪽 여백, 테두리 및 색)을 무시하지 않음

문제: 이제 편집기가 인라인 스타일을 사용하기 때문에 이전에 표 테두리, 셀 안쪽 여백 또는 배경 색을 제어한 사용자 지정 테마 CSS가 적용되지 않습니다.

가능한 솔루션:

  • CSS 특이도 증가: 더 구체적인 선택기를 사용하여 문서 내 표 요소를 타겟팅합니다. !important를 추가하면 인라인 스타일을 확실히 무시합니다.
    .article-body table,
.article-body table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  background-color: #f9f9f9 !important;
}
  • 그림 래퍼 타겟팅: 편집기가 이제 .wysiwyg-table 클래스가 있는 <figure> 요소 안쪽에 표를 래핑합니다. 필요에 따라 래퍼를 사용자 지정합니다.
    figure.wysiwyg-table {
  margin: 1em auto;
  max-width: 90%;
}
  • HTML 속성에 의존하는 스타일 업데이트: 테마 스타일 표가 [cellpadding] 또는 [border]와 같은 속성 선택기를 사용하는 경우에는 대신 클래스나 인라인 스타일을 사용하여 새 구조를 타겟팅하도록 업데이트합니다.

업그레이드 후 표가 다르게 보임

문제: 표의 너비나 맞춤 구성을 잃거나 예상치 못한 테두리 및 간격이 나타납니다.

가능한 솔루션:
  • 새 편집기가 표를 인라인 너비가 있는 <figure> 안쪽에 배치합니다. 조정하거나 무시해야 할 수도 있습니다.
    figure.wysiwyg-table {
  width: 100% !important;
  text-align: center;
}
figure.wysiwyg-table table {
  width: 100% !important;
  border-collapse: collapse;
}
  • 테마의 table 기본 스타일을 확인하고 새 구조에 맞게 조정합니다.

사용자 지정 또는 복잡한 표 HTML이 손상되거나 수동 조정이 필요함

문제: 특이한 속성이나 사용자 지정 인라인 스타일로 표를 사용자 지정했다면 레거시 편집기에서 새 편집기로 업그레이드 시 이를 완벽하게 처리하지 못할 수 있습니다.
참고: 레거시 편집기에서 표가 소스 코드를 통해 수정되었거나 새 편집기에서 지원하지 않는 HTML을 포함하고 있다면 새 편집기가 HTML 블록의 안쪽에 표를 래핑합니다. 이 경우 새 문서 편집기의 표 구성 요소를 사용하여 표를 편집할 수 없게 됩니다. 대신 소스 코드 편집기를 사용하여 HTML 블록을 업데이트해야 합니다.

가능한 솔루션:

  • 표에 대한 마이그레이션된 문서 HTML 소스를 검토합니다.
  • 새 모델을 따르도록 사용자 지정 표 HTML을 조정하거나 다시 작성합니다.
    • <table>을 <figure class="wysiwyg-table"> 안쪽에 래핑합니다.
    • <table>과 <td> 둘 다에서 테두리에 대한 인라인 스타일을 사용합니다.

  • 호환성을 보장하기 위해 새 편집기에서 복잡한 표를 다시 만드는 것이 좋습니다.

테마 개발자와 관리자를 위한 성공 사례

다음 성공 사례를 사용하여 표를 새 문서 편집기로 마이그레이션할 때 문제를 최소화하세요.
  • .article-body 안쪽의 .wysiwyg-table 표 또는 figure 요소 래핑 표를 타겟팅하는 특정 CSS 선택기를 사용합니다.
  • 신중하게 !important를 사용하여 인라인 스타일을 무시합니다.
  • 여러 브라우저와 다양한 크기의 기기에서 업그레이드 동안 그리고 업그레이드 후에 표를 테스트합니다.
  • 콘텐츠 작성자에게 인라인 스타일의 가능성과 유지 관리를 쉽게 하기 위해 표 ​​사용자 지정을 최소한으로 유지해야 할 필요성에 대해 교육합니다.
  • 일괄 업그레이드나 과도한 사용자 지정을 수행하기 전에 문서 콘텐츠 및 헬프 센터 테마를 백업합니다.
Zendesk 제공